ARIA11Usar funciones (roles) de región ARIA para identificar las regiones de una página

Aplicabilidad

Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El propósito de esta técnica es proporcionar acceso por software a las secciones de una página web. Las funciones de región (o «regiones», en inglés landmarks) identifican por software las secciones de una página. Las regiones ayudan a quienes usan tecnologías de asistencia a orientarse en una página y a desplazarse con facilidad a sus distintas secciones.

También ofrecen a quienes usan tecnologías de asistencia una forma sencilla de saltar los bloques de contenido que se repiten en varias páginas y les informan de la estructura programática de una página. Por ejemplo, si hay un menú de navegación común presente en todas las páginas, las funciones de región (o «regiones») pueden usarse para saltarlo y desplazarse de una sección a otra. Esto ahorra a quienes usan tecnologías de asistencia o el teclado la molestia y el tiempo de tabular por una gran cantidad de contenido para encontrar lo que realmente buscan, de forma muy parecida a un mecanismo tradicional de «enlaces para saltar» (skip links). (Consulte las notas sobre agentes de usuario más arriba para conocer los detalles de la compatibilidad de las tecnologías de asistencia). Una persona ciega que conozca el menú de un sitio de noticias y solo le interese llegar a la noticia principal puede desplazarse fácilmente a la región «main» y evitar docenas de enlaces del menú. En otra situación, una persona ciega puede querer encontrar rápidamente un menú de navegación, y puede hacerlo saltando a la región de navegación.

Las regiones también pueden ayudar a las personas videntes que solo usan el teclado a desplazarse a las secciones de una página mediante un complemento del navegador.

Las regiones se insertan en la página mediante el atributo role en un elemento que delimita la sección. El valor del atributo designa el tipo de región. Estos valores de role se enumeran a continuación. Para conocer las correspondencias en HTML de las funciones de región, consulte la tabla Rules of ARIA attribute usage by HTML element de la recomendación ARIA in HTML.

• banner: una región que contiene principalmente contenido orientado al sitio, en lugar de contenido específico de la página.
• navigation: una región que contiene un conjunto de elementos de navegación (normalmente enlaces) para desplazarse por el documento o por documentos relacionados.
• main: una región que contiene el contenido principal de un documento.
• region: una región que contiene una sección perceptible de la página con contenido relevante para un propósito concreto especificado por el autor y suficientemente importante para que los usuarios probablemente quieran poder desplazarse a ella con facilidad. Una región region no se expone como región (landmark) a menos que tenga un nombre accesible.
• form: una región que representa un conjunto de elementos asociados a un formulario, algunos de los cuales pueden representar valores editables que pueden enviarse a un servidor para su procesamiento. form no se expone como región (landmark) a menos que tenga un nombre accesible.
• search: una región que contiene un conjunto de elementos y objetos que, en conjunto, se combinan para crear una funcionalidad de búsqueda.
• complementary: una región que complementa el contenido principal, pero que está separada y tiene sentido por sí misma.
• contentinfo: una región que contiene información sobre el documento principal, como derechos de autor y enlaces a declaraciones de privacidad.

Hay casos en los que una misma función de región puede usarse más de una vez en una página, como en los bloques de navegación principal y secundaria. En estos casos, las funciones idénticas deben nombrarse mediante una técnica válida para etiquetar regiones.

Las regiones deben complementar el marcado semántico nativo, como los encabezados HTML, las listas y otro marcado estructural. Las regiones son interpretables por las tecnologías de asistencia compatibles con WAI-ARIA y los navegadores no las exponen directamente a los usuarios.

El enfoque recomendado es incluir todo el contenido de la página dentro de regiones, para que quienes usan lectores de pantalla y dependen de ellas para desplazarse de una sección a otra no pierdan el hilo del contenido.

Ejemplos

<div role="banner">site logo and name, etc. here</div>
<div role="search">search functionality here</div>
<div role="navigation">a list of navigation links here</div>
<div role="form">a sign-up form here</div>
<div role="main">the page's main content here</div>
<div role="region">a sponsor's promotion here</div>
<div role="complementary">sidebar content here</div>
<div role="contentinfo"> site contact details, copyright information, etc. here </div>

<div aria-labelledby="site-nav-heading" role="navigation">
  <h2 id="site-nav-heading">Site</h2>
    <ul>
      <li><a href="...">nav link 1</a></li>  
      <li><a href="...">nav link 2</a></li>
      <li><a href="...">nav link 3</a></li>
   </ul>
</div>
<div aria-labelledby="related-nav-heading" role="navigation">
  <h2 id="related-nav-heading">Related Topics</h2>
    <ul>
      <li><a href="...">topic link 1</a></li>
      <li><a href="...">topic link 2</a></li>
      <li><a href="...">topic link 3</a></li>
    </ul>
</div>

<div aria-label="Site" role="navigation">
   <ul>
      <li><a href="...">nav link 1</a></li>
      <li><a href="...">nav link 2</a></li>
      <li><a href="...">nav link 3</a></li>
   </ul>
</div>
<div aria-label="Tags" role="navigation">
   <ul>
      <li><a href="...">tag link 1</a></li>
      <li><a href="...">tag link 2</a></li>
      <li><a href="...">tag link 3</a></li>
   </ul>
</div>

<form role="search">
   <label for="product-search" id="search-label">Search</label>
   <input id="product-search" placeholder="title, author, or ISBN" type="text">
   <button type="submit">Find Books</button>
</form>

Pruebas

Técnicas relacionadas

• G1: Añadir un enlace al principio de cada página que lleve directamente al área de contenido principal
• G124: Añadir enlaces al principio de la página a cada zona del contenido
• ARIA13: Usar aria-labelledby para nombrar regiones (landmarks)
• ARIA20: Usar la función (role) region para identificar una región de la página
• H69: Proporcionar elementos de encabezado al principio de cada sección de contenido
• H100: Proporcionar campos de correo electrónico y contraseña correctamente marcados
• SCR28: Usar un menú expandible y contraíble para evitar bloques de contenido

Recursos

• WAI-ARIA Authoring Practices, Landmark Regions (regiones en la guía de prácticas de autor de WAI-ARIA)
• W3C Web Accessibility Tutorials, Page Regions (tutoriales de accesibilidad web del W3C: regiones de la página)
• Accessible Rich Internet Applications (WAI-ARIA), Landmark Roles
• Landmarks browser extension (extensión de navegador Landmarks)