Labelling method inside table cell test

← Index page

These tests are to determine whether the aria-label or the <label> element would be the most accessible solution for form controls within table cells.

Example 01: using aria-labelledby

Code

<form action="#">
  <table role="none">
    <thead>
      <tr>
        <th></th>
        <th id="sound">Sound</th>
        <th id="reaction">Reaction</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="news-notification">News Notification</td>
        <td>
          <select aria-labelledby="news-notification sound">
            <option>Choose</option>
            <option value="alert01-mp3">Alert01.mp3</option>
            <option value="alert02-mp3">Alert02.mp3</option>
            <option value="alert03-mp3">Alert03.mp3</option>
          </select>
        </td>
        <td>
          <select aria-labelledby="news-notification reaction">
            <option>Choose</option>
            <option value="on-next-change">On next change</option>
            <option value="next-day">Next day</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Dummy link after

Example 02: using a hidden <label>

Code

<form action="#">
  <table role="none">
    <thead>
      <tr>
        <th></th>
        <th>Sound</th>
        <th>Reaction</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>News Notification</td>
        <td>
          <label for="one" class="hidden">News notication sound</label>
          <select id="one">
            <option>Choose</option>
            <option value="alert01-mp3">Alert01.mp3</option>
            <option value="alert02-mp3">Alert02.mp3</option>
            <option value="alert03-mp3">Alert03.mp3</option>
          </select>
        </td>
        <td>
          <label for="two" class="hidden">News notication reaction</label>
          <select id="two">
            <option>Choose</option>
            <option value="on-next-change">On next change</option>
            <option value="next-day">Next day</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

← Index page