typestar

accessible_table.html en HTML

Una tabla de datos legible de verdad: caption, scopes, fila de resumen y texto que no es solo color.

<!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>

Cómo funciona

  1. El caption nombra la tabla; el lector de pantalla lo lee primero.
  2. scope en cada encabezado es lo que une la celda con su fila y columna.
  3. El estado es palabra además de color, porque el color no se lee.

El intento, en números

Líneas
66
Caracteres a escribir
1369
Tokens
462
Ritmo de tres estrellas
80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 346 segundos.

Escribe este fragmento

Paso 1 de 1 en Bis; paso 15 de 15 en HTML accesible.

← Anterior