ARIA20Usar la función (role) region para identificar una región de la página

Aplicabilidad

Tecnologías que admiten Accessible Rich Internet Applications.

Descripción

Esta técnica muestra cómo asignar la función (role) genérica region a una sección de la página para que los agentes de usuario y las tecnologías de asistencia puedan identificarla por software. La función region delimita un segmento de la página que contiene contenido relevante, de modo que resulte más fácil de descubrir y de navegar. La región genérica debe usarse cuando la sección no pueda marcarse con una función de región (landmark) estándar del documento (consulte ARIA11).

Es importante dar nombre a las regiones, porque son elementos de agrupación genéricos y los usuarios necesitarán alguna forma de saber en qué región se encuentran. Las regiones pueden nombrarse con aria-labelledby, aria-label u otra técnica. Hacerlo ayuda a exponer mejor el contenido y las relaciones de información de la página. La función region debe usarse con prudencia, porque, si se abusa de ella, la página puede resultar excesivamente verbosa para quienes usan lectores de pantalla.

Ejemplos

<div role="region" aria-labelledby="pollhead">
  <h3 id="pollhead">This week's Poll</h3>
  <form>
    <fieldset>
      <legend>Do you believe the tax code needs to be overhauled?</legend>
      <input type="radio" id="r1" name="poll">
      <label for="r1">No, it's fine the way it is</label>
      <input type="radio" id="r2" name="poll">
      <label for="r2">Yes, the wealthy need to pay more</label>
      <input type="radio" id="r3" name="poll">
      <label for="r3">Yes, we need to close corporate loopholes</label>
      <input type="radio" id="r4" name="poll">
      <label for="r4">Changes should be made across the board</label>
    </fieldset>
  </form>
  <a href="results.php">See Poll Results</a>
</div>

<ol>
  <li>
    <button aria-controls="block1" aria-expanded="false" id="l1" title="show details"
      type="button">John Henry's Account <img alt="" src="images/panel_expand.gif">
    </button>
    <div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1"
      role="region">
      <span id="cd1" role="heading" aria-level="3">Certificate Of Deposit</span>
      <table>
        <tr>
          <th scope="row">Account:</th>
          <td>25163522</td>
         </tr>
         <tr>
          <th scope="row">Start date:</th>
          <td>February 1, 2014</td>
         </tr>
         <tr>
          <th scope="row">Maturity date:</th>
          <td>February 1, 2016</td>
         </tr>
         <tr>
          <th scope="row">Deposit Amount:</th>
          <td>$ 3,000.00</td>
         </tr>
         <tr>
          <th scope="row">Maturity Amount:</th>
          <td>$ 3,072.43</td>
        </tr>
      </table>
    </div>
  </li>
</ol>

<div role="region" aria-label="weather portlet"> 
  ...
</div>

Pruebas

Técnicas relacionadas

• ARIA11: Usar funciones (roles) de región ARIA para identificar las regiones de una página
• ARIA12: Usar role=heading para identificar los encabezados
• ARIA13: Usar aria-labelledby para nombrar regiones (landmarks)

Recursos

• The Roles Model (role=region) (modelo de funciones de WAI-ARIA: role=region)