Saltar al contenido principal

Navegación

img

  • Debe estar dentro de una etiqueta <nav> o en su defecto añadir el atributo role="navigation"
  • Añade un aria-label para describir el tipo de navegación, o bien, usa aria-labelledby asociado a un encabezado oculto.
  • Añade el atributo aria-current="page" para marcar la página actual.

Ejemplo de menú de navegación principal accesible:

<nav class="navbar" aria-labelledby="menuprincipal">
<h2 class="visuallyhidden" id="menuprincipal">Menú principal</h2>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Historia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>
</nav>

  • Debe estar dentro de una etiqueta <nav> o en su defecto añadir el atributo role="navigation"
  • Añade un aria-label para describir el tipo de navegación.
  • Añade el atributo aria-current="page" para marcar la página actual.

Ejemplo de rastro de migas accesible:

<nav aria-label="Ubicación">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item"><a href="#">Categoría</a></li>
<li class="breadcrumb-item"><a href="#" aria-current="page">Subcategoría</a></li>
</ol>
</nav>

Paginación

  • Debe estar dentro de una etiqueta <nav> o en su defecto, añadir el atributo role="navigation"
  • Añade un aria-label para describir el tipo de navegación.
  • Añade el atributo aria-current="page" para marcar la página actual.
  • Agrega el atributo aria-disabled="true" cuando el enlace está deshabilitado.

Ejemplo de páginación accesible:

<nav role="navigation" aria-label="Paginación">
<ul>
<li><a href="#" aria-label="Página anterior"> << </a></li>
<li><a href="/page-1" aria-label="Ir a la página 1">1</a></li>
<li><a href="/page-2" aria-label="Ir a la página 2">2</a></li>
<li><a href="/page-3" aria-label="Página actual, página 3" aria-current="true">3</a></li>
<li><a href="#" aria-label="Siguiente página" aria-disabled="true"> >> </a></li>
</ul>
</nav>

Acordeón

  • En los encabezados debemos usar botones para permitir la navegación mediante teclado:
    • Pulsando Espacio o Entrar cuando está sobre un encabezado, expande la sección.
    • Pulsando Tab, mueve el foco al siguiente elemento enfocable.
    • Pulsando Shift+Tab, movemos el foco al anterior elemento enfocable.
  • Cada botón se relaciona con su contenido mediante el atributo aria-controls, en este atributo especificaremos el id del contenido asociado.
  • Cada botón tendrá un atributo aria-expanded con valor true o false, dependiendo si el contenido está oculto o visible.

El indicador de foco es para los usuarios de teclado lo que el cursor es para los usuarios de ratón.

Ejemplo de acordeón accesible:

<div class="accordion">
<ul aria-label="Acordeón accesible con lista" class="accordion-controls">
<li>
<h3>
<button aria-controls="content-1" aria-expanded="false" id="accordion-control-1">
Cabecera 1
</button>
</h3>
<div aria-hidden="true" id="content-1">
<p>Lorem ipsum dolor sit amet</p>
</div>
</li>
<li>
<h3>
<button aria-controls="content-2" aria-expanded="false" id="accordion-control-2">
Cabecera 1
</button>
</h3>
<div aria-hidden="true" id="content-2">
<p>Lorem ipsum dolor sit amet</p>
</div>
</li>
<li>
<h3>
<button aria-controls="content-3" aria-expanded="false" id="accordion-control-3">
Cabecera 1
</button>
</h3>
<div aria-hidden="true" id="content-3">
<p>Lorem ipsum dolor sit amet</p>
</div>
</li>
</ul>
</div>