ARIA9Usar aria-labelledby para concatenar una etiqueta a partir de varios nodos de texto

Un campo de tiempo de espera con nombre concatenado

Un campo de texto permite a los usuarios ampliar el tiempo predeterminado antes de que se agote el tiempo de espera.

La cadena "Extend time-out to" (Ampliar el tiempo de espera a) está contenida en un elemento label nativo y se asocia al campo mediante id="timeout-duration". Esta etiqueta se asocia al campo mediante la asociación for/id solo en los agentes de usuario que no son compatibles con ARIA. En los agentes de usuario compatibles con ARIA, la asociación for/id se ignora y el nombre del campo lo proporciona únicamente aria-labelledby, conforme al cálculo del nombre y la descripción accesibles de HTML Accessibility API Mappings 1.0.

El atributo aria-labelledby del campo de texto hace referencia a tres elementos: (1) el span que contiene la etiqueta nativa, (2) el campo de texto que contiene el texto predeterminado '20' (recuerde que este campo no está etiquetado con el texto de la etiqueta asociada mediante for/id) y (3) la cadena 'minutes' (minutos) contenida en un span. Estos elementos deben concatenarse para formar el nombre completo del campo de texto

<div>
  <span id="timeout-label">
    <label for="timeout-duration">Extend time-out to</label>
  </span>
  <input type="text" size="3" id="timeout-duration" value="20" 
   aria-labelledby="timeout-label timeout-duration timeout-unit">
  <span id="timeout-unit"> minutes</span>
</div>

Ejemplo funcional: Campo de tiempo de espera con etiqueta concatenada, adaptado de «Easy ARIA tip #2: aria-labelledby and aria-describedby», un ejemplo elaborado por Marco Zehe.

Una tabla de datos sencilla con campos de texto

Una tabla de datos sencilla que contiene campos de texto. Las etiquetas de los campos se concatenan mediante aria-labelledby, que hace referencia a los encabezados de columna y de fila correspondientes.

<table>
  <tr>
    <td></td>
    <th id="tpayer">Taxpayer</th>
    <th id="sp">Spouse</th>
  </tr>
  <tr>
    <th id="gross">W2 Gross</th>
    <td><input type="text" size="20" aria-labelledby="tpayer gross"></td>
    <td><input type="text" size="20" aria-labelledby="sp gross"></td>
  </tr>
  <tr>
    <th id="divi">Dividends</th>
    <td><input type="text" size="20" aria-labelledby="tpayer divi"></td>
    <td><input type="text" size="20" aria-labelledby="sp divi"></td>
  </tr>
</table>

Ejemplo funcional: Uso de aria-labelledby en una tabla sencilla con campos de texto, basado en un ejemplo de Jim Thatcher.

Una tabla de reserva de talleres de un congreso

Una tabla de reserva de talleres de un congreso con dos itinerarios paralelos permite a los usuarios seleccionar el taller al que desean asistir. Al tabular por las casillas de verificación de la tabla, se proporcionan como nombre concatenado de cada casilla, mediante aria-labelledby, el itinerario (1 o 2), el título y el ponente del taller, seguidos de la etiqueta "Attend" (Asistir) de la casilla adyacente.

<h1>Dinosaur Conference workshops timetable Thursday, 14 & Friday, 15 March 2013</h1>
<table>
  <caption>Dinosaur Conference workshop booking table</caption>
  <tr>
    <th rowspan="2" scope="col">Track</th>
    <th colspan="2" scope="colgroup">Thursday</th>
    <th colspan="2" scope="colgroup">Friday</th>
  </tr>
  <tr>
    <th scope="col" id="am1">9 to 12 AM</th>
    <th scope="col" id="pm1">2 to 5 PM</th>
    <th scope="col" id="am2">9 to 12 AM</th>
    <th scope="col" id="pm2">2 to 5 PM</th>
  </tr>
  <tr>
    <th id="track1" scope="row">Track 1</th>
    <td>
      <h2 id="title-TM1">The Paleozoic era </h2>
      <p>2 places left</p>
      <input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
      <label id="TM1-att" for="TM1">Attend</label>
    </td>
    <td>
      <h2 id="title-TA1">The Mesozoic era overview</h2>
      <p>2 places left</p>
      <input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
      <label id="TA1-att" for="TA1">Attend</label>
    </td>
    <td>
      <h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
      <p>1 place left</p>
      <input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
      <label id="FM1-att" for="FM1">Attend</label>
    </td>
    <td>
      <h2 id="title-FA1">The Jurassic period</h2>
      <p>11 places left</p>
      <input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
      <label id="FA1-att" for="FA1">Attend</label>
    </td>
  </tr>
  <tr>
    <th id="track2" scope="row">Track 2</th>
    <td>
      <h2 id="title-TM2">The Cretaceous period</h2>
      <p>18 places left</p>
      <input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
      <label id="TM2-att" for="TM2">Attend</label>
   </td>
   <td>
      <h2 id="title-TA2">The end of the dinosaurs</h2>
      <p>2 places left</p>
      <input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
      <label id="TA2-att" for="TA2">Attend</label>
    </td>
    <td>
      <h2 id="title-FM2">First discoveries of dinosaurs</h2>
      <p>2 places left</p>
      <input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
      <label id="FM2-att" for="FM2">Attend</label>
    </td>
    <td>
      <h2 id="title-FA2">Emerging scholarship</h2>
      <p>19 places left</p>
      <input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
      <label id="FA2-att" for="FA2">Attend</label>
    </td>
  </tr>
</table>

Ejemplo funcional: Horario de reserva de talleres de un congreso.