aria-controls
Expandable Content
<button aria-controls="cb" onclick="document.getElementById('cb').classList.remove('collapsed')" > More about color-blindness </button> <div id="cb" role="region" aria-label="Color-blindness is" class="transition collapsed"> <p> Color-blindness (color vision deficiency) is a condition in which a person cannot distinguish certain colors. Red/green color-blindness is the most common form of color vision deficiency. Red/green color-blindness does not mean those colors literally disappear. It means that some kinds of reds & greens (including some oranges, greenish-blues, and reddish-yellows) are difficult to distinguish. </p> </div>
Color-blindness (color vision deficiency) is a condition in which a person cannot distinguish certain colors. Red/green color-blindness is the most common form of color vision deficiency. Red/green color-blindness does not mean those colors literally disappear. It means that some kinds of reds & greens (including some oranges, greenish-blues, and reddish-yellows) are difficult to distinguish.
aria-owns
popup with aria-owns
<ul role="menu"> <li role="menuitem" aria-haspopup="true" aria-owns="fileMenu" aria-labelledby="fileLabel" > <span id="fileLabel">File</span> </li> <li role="menuitem" aria-haspopup="true" aria-labelledby="viewLabel"> <span id="viewLabel">View</span> </li> </ul> <ul role="menu" id="fileMenu"> <li role="menuitem">New</li> <li role="menuitem">Open</li> </ul>
- File
- View
- New
- Open
Radiogroup and radios
<table> <tr> <td role="radiogroup" tabindex="0" aria-label="My radio label" aria-owns="myradio1 myradio2 myradio3" colspan="3"> My Radio Label </td> </tr> <tr> <td id="myradio1" role="radio" tabindex="0" aria-checked="true"> Item #1 </td> <td id="myradio2" role="radio" tabindex="0" aria-checked="false"> Item #2 </td> <td id="myradio3" role="radio" tabindex="0" aria-checked="false"> Item #3 </td> </tr> </table>
My Radio Label | ||
Item #1 | Item #2 | Item #3 |
aria-flowto
Skipping past advertisements ī¸âŠī¸
<h3>News Headline</h3> <p aria-flowto="part2">This is the beginning of the news story.</p> <div aria-label="advertisement">This is an advertisement.</div> <p id="part2" aria-label="news story, continued"> This is the rest of the story </p>
News Headline
This is the beginning of the news story.
This is an advertisement.
This is the rest of the story