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">