typestar

accessible_table.html in HTML

A data table people can actually read: caption, scopes, a summary row, and text that is not color alone.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Build history</title>
  </head>
  <body>
    <main>
      <h1>Build history</h1>

      <p id="table-note">
        Times are UTC. Failed builds keep their logs for 30 days.
      </p>

      <table aria-describedby="table-note">
        <caption>The last five builds of typestar</caption>
        <colgroup>
          <col class="id">
          <col span="3">
          <col class="numbers">
        </colgroup>
        <thead>
          <tr>
            <th scope="col">Build</th>
            <th scope="col">Branch</th>
            <th scope="col">Started</th>
            <th scope="col">Status</th>
            <th scope="col">Duration</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><a href="/builds/812">812</a></th>
            <td>main</td>
            <td><time datetime="2026-07-30T09:14Z">09:14</time></td>
            <td class="ok">Passed</td>
            <td>4m 02s</td>
          </tr>
          <tr>
            <th scope="row"><a href="/builds/811">811</a></th>
            <td>sql-content</td>
            <td><time datetime="2026-07-30T08:51Z">08:51</time></td>
            <td class="bad">Failed</td>
            <td>1m 47s</td>
          </tr>
          <tr>
            <th scope="row"><a href="/builds/810">810</a></th>
            <td>main</td>
            <td><time datetime="2026-07-29T17:03Z">17:03</time></td>
            <td class="ok">Passed</td>
            <td>3m 58s</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th scope="row" colspan="4">Median duration</th>
            <td>3m 58s</td>
          </tr>
        </tfoot>
      </table>

      <p role="status" aria-live="polite">Showing 3 of 5 builds</p>
    </main>
  </body>
</html>

How it works

  1. The caption names the table; a screen reader reads it first.
  2. scope on every header is what links a cell to its row and column.
  3. Status is a word as well as a color, because color is not readable.

The run, in numbers

Lines
66
Characters to type
1369
Tokens
462
Three-star pace
80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 346 seconds.

Type this snippet

Step 1 of 1 in Encore, step 15 of 15 in Accessible HTML.

← Previous