aria-label:
Button
<button
aria-label="Click to be even happier"
onclick="alert('🤗 You are the happiest person 😎')">
😍
</button>
Navigation menu
<ul aria-label="Category menu">
<li>
<a href="http://w3.org" aria-label="The World Wide Web Consortium">W3C</a>
</li>
<li>
<a href="http://w3.org" aria-label="The World Wide Web">WWW</a>
</li>
</ul>
Form elements
<form>
<input type="search" placeholder="Type any" aria-label="Site Search" name="search" />
<button type="submit">Search 🔎"</button>
</form>
aria-labelledby
Multiple labels
<div id="billing" class="sr-only">Billing:</div>
<div id="name">Name</div>
<input type="text" aria-labelledby="billing name" />
<div id="address">Address</div>
<input type="text" aria-labelledby="billing address" />
Billing
Name
Address
Definition lists 📝
<dl>
<dt id="anathema">anathema</dt>
<dd aria-labelledby="anathema">
a ban or curse solemnly pronounced by ecclesiastical authority and
accompanied by excommunication
</dd>
<dd aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
<dt id="homily">homily</dt>
<dd aria-labelledby="homily">a usually short sermon</dd>
<dd aria-labelledby="homily">
a lecture or discourse on or of a moral theme
</dd>
</dl>
- anathema
- a ban or curse solemnly pronounced by ecclesiastical authority and accompanied by excommunication
- a vigorous denunciation : cursor
- homily
- a usually short sermon
- a lecture or discourse on or of a moral theme
ASCII art
<figure role="img" aria-labelledby="fish-caption">
<pre>FIGURE</pre>
<figcaption id="fish-caption">
Joan G. Stark, "<cite>fish</cite>".
October 1997. ASCII on electrons. 28×8.
</figcaption>
</figure>
o .'`/
' / (
O .-'` ` `'-._ .')
_/ (o) '. .' /
) ))) >< <
`\ |_\ _.' '. \
'-._ _ .-' '.)
jgs `\__\
aria-describedby
A close button ❌
<button
aria-label="Close"
aria-describedby="descriptionClose"
onclick="close()"
>
❌
</button>
<p id="descriptionClose">
Closing this window will discard any information entered and return
you back to the main page
</p>
Closing this window will discard any information entered and return you back to the main page
aria-placeholder
Birthday date 🎂
<label for="bday1">Birth Date</label>
<input id="bday1" type="text" aria-placeholder="mm/dd/yyyy format">