Tabla de contenido oculta para lectores de pantalla

Question

He visto en un par de sitios que incluirán una sección de navegación en la parte superior de su página, con enlaces internos a otras partes de la página, para que los usuarios con lectores de pantalla puedan saltar rápidamente al contenido, menú , pie de página, etc. Esto " nav " el elemento se mueve fuera de la pantalla con CSS para que los usuarios habituales no lo vean.

¿Cuál es la mejor manera de implementar esto? Es decir, ¿qué es lo más accesible y menos intrusivo para los lectores de pantalla? Esto es con lo que he estado jugando:

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

El primero tiene la ventaja de ser mucho más limpio en su marcado, pero no es exactamente semántico. Además, aparece como & Quot; Saltar a la sección uno Saltar a la sección dos Saltar a la sección tres & Quot ;. Sé que la apariencia visual no es importante, ya que está oculta, pero ¿eso afecta cómo se lee? ¿Hay pausas apropiadas entre cada uno?

El segundo es un poco más detallado en su sintaxis, pero con suerte más descriptivo.

¿Cuál de estos es mejor y hay una forma aún mejor?

Answer 1

Puede descargar un complemento para Firefox llamado Fangs (en referencia al lector de pantalla real Mandíbulas). Producirá un texto que Jaws leería. Es muy útil. Me gustaría ir con un buen diseño semántico sobre los enlaces uno tras otro. También lo escondería con ... algo así como

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

El uso de display: none puede no leerse en algunos lectores de pantalla.

En mis propios sitios, generalmente he hecho esto:

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Answer 2

Tenga en cuenta que los lectores de pantalla suelen anunciar hipervínculos como tales. Lo que significa que su primer ejemplo no se leerá como & Quot; Salte a la sección uno salte a la sección dos salte a la sección tres & Quot; sino más bien como " Enlace: Salta a la sección uno, enlace: Salta a la sección dos, enlace: Salta a la sección tres " o algo así.

(Personalmente, seguiría con la segunda opción semántica, pero esa es solo mi preferencia personal).

Answer 3

Debe colocar los enlaces en un con un id (o clase) de #nav. Esto les da a aquellos que usan lectores de pantalla un aviso de que el contenido es una lista de enlaces: & Quot; Esta es una lista con tres elementos: un enlace, 'saltar a la sección uno, un enlace' saltar a la sección dos '... "

Colocando " ul " en un " div " con una identificación de " #nav " es funcional, pero el div no está haciendo otra cosa que envolver " ul " para identificación Es más limpio simplemente identificar el & Quot; ul & Quot; y deje el " div " fuera. El siguiente código es el mejor (creo). Limpio y al grano.

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Para eliminar el texto de la página con CSS, utilice:

ul#nav {
    position: absolute;
    left: -9999px
}

Answer 4

Con un buen diseño semántico, no lo necesita. Puede hacer que los elementos de navegación que ya está utilizando sean compatibles con el lector de pantalla. La segunda opción es normalmente cómo hacer que eso suceda. Puede diseñar los elementos de la lista para que coincidan con lo que está haciendo actualmente.

Answer 5

La mejor manera de hacer lo que ha solicitado es utilizar <ul> con los anclajes dentro de ellos.

Sin embargo, hay algunos errores en WebKit que harán que el foco no cambie realmente al elemento objetivo, por lo que también deberá adjuntar un controlador de eventos a los enlaces para que el foco cambie. Esto también requerirá que el objetivo sea sable de foco de pestaña (tabindex="-1" funcionará para esto).

Sin embargo, si tiene una buena estructura de encabezado en la página, el usuario del lector de pantalla puede navegar por la página sin necesidad de este menú de navegación que está creando. De hecho, este menú podría ser más útil para los usuarios de teclado que no tienen un lector de pantalla. En ese caso, querrás que aparezca enfocado para que el usuario con teclado pueda verlo.