Buttons

Recipe 13.3 Debug roles, names, properties, and states

Sample:

Scores Group A
Name Score Actions
Michael 27
Robert 7
Dominik 19
David 21
Markus 14
Paul 42

Code:

<table>
  <caption>Scores Group A</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="name1">Michael</td>
      <td>27</td>
      <td>
        <button id="details1" aria-labelledby="details1 name1">Details</button>
      </td>
    </tr>
    <tr>
      <td id="name2">Robert</td>
      <td>7</td>
      <td>
        <button id="details2" aria-labelledby="details2 name2">Details</button>
      </td>
    </tr>
    <tr>
      <td id="name3">Dominik</td>
      <td>19</td>
      <td>
        <button id="details3" aria-labelledby="details3 name3">Details</button>
      </td>
    </tr>
    <tr>
      <td id="name4">David</td>
      <td>21</td>
      <td>
        <button id="details4" aria-labelledby="details4 name4">Details</button>
      </td>
    </tr>
    <tr>
      <td id="name5">Markus</td>
      <td>14</td>
      <td>
        <button id="details5" aria-labelledby="details5 name5">Details</button>
      </td>
    </tr>
    <tr>
      <td id="name6">Paul</td>
      <td>42</td>
      <td>
        <button id="details6" aria-labelledby="details6 name6">Details</button>
      </td>
    </tr>
  </tbody>
</table>