Relationships: 👨+ 👩 = 👪

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>
        

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>
        

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 the rest of the story