Jump to Categories

ARIA

aria-describedby

aria-describedby is very similar to aria-labelledby: A label provides essential information about an object, while a description provides extended information that the user might need.

Error Messages

Adding the error message to the #message-error element will make sure the input associates the corresponding error message with this field.

<input type="text" aria-describedby="message-error">
<span id="message-error" class="visually-hidden">
  Error: this field is invalid
</span>

Tooltips

<div class="form cvv">
  <label for="cvv">CVV</label>
  <input aria-describedby="cvv-label" type="text" name="CVV" id="cvv">
  <span class="cvv__tip">ℹ️</span>
  <span id="cvv-label" class="cvv__info">These are the 3 digits on the back of your credit card</span>
</div>

Application Landmark Descriptions

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <p id="info">
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>

A close button

<button aria-label="Close" aria-describedby="descriptionClose" 
    onclick="myDialog.close()">X</button>

<div id="descriptionClose">Closing this window will discard any information entered and 
return you back to the main page</div>

aria-labelledby

aria-labelledby is very similar to aria-describedby: A label provides essential information about an object, while a description provides extended information that the user might need.

The aria-labelledby attribute is read by a screenreader after it says out loud the field type. It always expects an ID string, which can be more than 1. It should never replace the use of label elements in forms. Consider it for the situations when you need multiple labels.

Providing additional information for links

<h2 id="headline">Storms hit east coast</h2>

<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>

Labeling choices

An example of when you’d want to use labelledby is labeling choices, which are labeled by a previously appearing title

<h3 id="lunch_label">Café Options</h3>

<ul aria-labelledby="lunch_label" role="radiogroup">
  <li id="o1">Macchiato</li>...
  <li id="o2">Cappuccino</li>...
  <li id="o3">Latte</li>...
</ul>

Associating Headings With Regions

<div role="main" aria-labelledby="foo">
   <h1 id="foo">A title for a section</h1>
   <p>Some more text</p>
</div>

Dialog Example

<div role="dialog" aria-labelledby="dialogheader">
    <h2 id="dialogheader">Choose a File</h2>
</div>

Popup Menu

<div role="menubar">
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
    <div role="menu" aria-labelledby="fileMenu">
        <div role="menuitem">Open</div>
        <div role="menuitem">Save</div>
        <div role="menuitem">Save as ...</div>
        ...
    </div>
    ...
</div>

Multi-label

<div id="billing">Billing:</div>

<div>
  <div id="name">Name:</div>
  <input type="text" aria-labelledby="billing name"/>
</div>
<div>
  <div id="address">Address:</div>
  <input type="text" aria-labelledby="billing address"/>
</div>

Read-only visual representations (Star rating)

<span id="star-rating" class="visually-hidden">Rating: 4 of 5</span>
<div role="img" aria-labelledby="star-rating">
  ★★★★☆
</div>

Refs