H101Usar elementos semánticos de HTML para identificar regiones de una página

Aplicabilidad

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

Descripción

El propósito de esta técnica es proporcionar acceso por software a las secciones de una página web. Las funciones (roles) de región, o «landmarks», identifican por software las secciones de una página. Los navegadores no muestran las regiones directamente a los usuarios, pero las tecnologías de asistencia y las extensiones del navegador las ponen a su disposición para facilitar la navegación hacia las distintas secciones de la página.

Las regiones ofrecen a los usuarios de tecnologías de asistencia una forma sencilla de entender la estructura programática de una página y de saltarse el contenido que no les interesa. Por ejemplo, si la cabecera, la navegación global, el área de contenido principal y el pie de un sitio están marcados como regiones, una persona que usa un lector de pantalla puede saltar fácilmente a la región que le interesa sin tener que recorrer todo el contenido anterior. Una persona ciega que conozca el menú de un sitio de noticias y solo quiera llegar a la noticia principal podría ir directamente a la región «main» y evitar docenas de enlaces del menú. En otra situación, una persona ciega puede querer localizar rápidamente un menú de navegación, y puede hacerlo saltando a la región de navegación.

Las regiones se crean de forma implícita al usar ciertos elementos semánticos de HTML, lo que es distinto de usar ARIA para crear regiones de forma explícita. Estos elementos son:

• <header>: cuando un header es hijo directo del elemento body, crea una función banner, una región que normalmente contiene el logotipo del sitio, su nombre y otro contenido persistente común a todo el sitio en la parte superior de la página.
• <nav>: una región que contiene enlaces de navegación a otras páginas o a distintas partes de la misma página.
• <main>: una región que contiene el contenido principal de la página.
• <section>: una región que contiene una sección genérica de un documento o aplicación. Un elemento section no se expone como región a menos que tenga un nombre accesible.
• <form>: una región del documento que representa un conjunto de elementos asociados a un formulario, algunos de los cuales pueden representar valores editables que se pueden enviar a un servidor para su procesamiento. Un elemento form no se expone como región a menos que tenga un nombre accesible.
• <aside>: una región del documento que complementa el contenido principal, pero que es independiente y tiene sentido por sí misma.
• <footer>: una región que, cuando su ancestro más cercano es el elemento body, contiene información sobre la página, como los derechos de autor y enlaces a las declaraciones de privacidad.

Los navegadores web modernos no necesitan que se añada al elemento HTML la función ARIA equivalente para exponerlo como región. Por ejemplo, <main role="main"> es innecesario y debería ser simplemente <main>.

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

Se recomienda incluir todo el contenido de la página dentro de regiones, para que los usuarios de lectores de pantalla que se apoyan en las regiones para navegar de una sección a otra no pierdan contenido por el camino.

Ejemplos

<header> site logo and name, etc. here </header>
<form aria-label="site search"> search functionality here </form>
<nav> a list of navigation links here </nav>
<main> the page's main content here </main>
<section> a sponsor's promotion here </section>
<aside> sidebar content here </aside>
<footer> site contact details, copyright information, etc. here </footer>

<nav aria-labelledby="site-nav-heading">
  <h2 id="site-nav-heading">Site</h2>
  <ul>
    <li><a href="/news">News</a></li>  
    <li><a href="/weather">Weather</a></li>
    <li><a href="/sport">Sport</a></li>
  </ul>
</nav>
<nav aria-labelledby="related-nav-heading">
  <h2 id="related-nav-heading">Related Topics</h2>
  <ul>
    <li><a href="/local-news">Local News</a></li>
    <li><a href="/local-weather">Local Weather</a></li>
    <li><a href="/local-sport">Local Sport</a></li>
  </ul>
</nav>

<nav aria-label="Vehicles">
  <ul>
    <li><a aria-current="page" href="/cars">Cars</a></li>
    <li><a href="/trucks">Trucks</a></li>
    <li><a href="/bikes">Bikes</a></li>
  </ul>
</nav>
<nav aria-label="Tags">
  <ul>
    <li><a href="/cars-electric">Electric Cars</a></li>
    <li><a href="/cars-gas">Gas-powered Cars</a></li>
    <li><a href="/cars-family">Family Cars</a></li>
    <li><a href="/cars-working">Rugged Cars For Working</a></li>
    <li><a href="/cars-commuting">Cars For Suburban Commuting</a></li>
  </ul>
</nav>

<form aria-labelledby="search-label">
  <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

• ARIA11: Usar funciones (roles) de región ARIA para identificar las regiones de una página
• 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
• H69: Proporcionar elementos de encabezado al principio de cada sección de contenido
• SCR28: Usar un menú expandible y contraíble para evitar bloques de contenido

Recursos

• Using ARIA
• ARIA in HTML
• Accessible Name and Description Computation
• Extensión de navegador Landmarks