Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA20Marcar una zona importante de la página con role="region"

Nombre oficial en el W3C: Usar la función (role) region para identificar una región de la página

En pocas palabras

Si una parte importante de la página no encaja en ninguna región estándar (cabecera, menú, contenido principal, pie…), se puede marcar con role="region" y darle un nombre. Así aparece en la lista de regiones del lector de pantalla y se llega a ella directamente. Conviene usarla con moderación.

Por qué es importante

Las personas que usan lector de pantalla saltan de una región a otra para moverse rápido. Si una zona útil, como el tiempo, una encuesta o el saldo de una cuenta, no está marcada, tienen que buscarla leyendo todo.

El nombre es imprescindible: una región sin nombre no dice qué contiene. Y demasiadas regiones llenan la página de anuncios y la hacen más lenta de recorrer.

Cómo se hace

  1. Antes, compruebe si sirve una región estándar: <header>, <nav>, <main>, <aside>, <footer>, <form> o role="search" (técnica ARIA11).
  2. Si ninguna encaja, marque la zona con role="region". En HTML, una <section> con nombre ya tiene esa función.
  3. Dele un nombre con aria-labelledby, apuntando a su título visible. Si no tiene título, use aria-label.
  4. Reserve las regiones para contenido que de verdad merezca un acceso directo.

Cómo comprobarlo

  1. Busque en el código los elementos con role="region" y las <section> con nombre.
  2. Confirme que su contenido es lo bastante importante para tener región propia.
  3. Confirme que no encaja en una región estándar.
  4. Compruebe que tiene nombre, con aria-labelledby o aria-label.
  5. Abra la lista de regiones del lector de pantalla (en NVDA, Insert + F7; en VoiceOver, el rotor). La zona debe aparecer con su nombre.

Ejemplo

Encuesta semanal de la portada de un ayuntamiento marcada como región con nombre.

<div role="region" aria-labelledby="tit-encuesta">
  <h2 id="tit-encuesta">Encuesta de la semana</h2>
  <p>¿Qué servicio municipal usa más?</p>
  <a href="/encuesta">Responder la encuesta</a>
</div>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica ARIA20 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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

Región en un sitio web de noticias

Una sección de la página de inicio de un sitio web de noticias que contiene una encuesta que cambia cada semana se marca con role="region". El h3 situado encima del formulario se referencia como nombre de la región mediante aria-labelledby.

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

Identificar una región en el sitio de un banco

Tras iniciar sesión en el sitio web de un banco, el usuario puede expandir enlaces para ver los detalles de sus depósitos a plazo. Los detalles están dentro de un span marcado con la función region. El encabezado de la región tiene role=heading y se incluye en el aria-labelledby que da nombre a la región.

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

Identificar un portlet con una región genérica

Este ejemplo muestra cómo podría añadirse una región (landmark) genérica region a un portlet meteorológico. No existe en la página ningún texto que pueda referenciarse como etiqueta, así que se etiqueta con aria-label. 

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

Pruebas

Procedimiento

Para cada sección marcada con role="region":

  1. Examinar el contenido y asegurarse de que es lo bastante importante para tener una región (landmark) independiente
  2. Asegurarse de que ninguna función de región (landmark) estándar es apropiada para este contenido
  3. Comprobar que la región tiene un nombre determinable por software

Resultados esperados

  • Las comprobaciones n.º 1 a n.º 3 son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica ARIA20 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.