El rol de la semántica en la navegación de páginas
Aprendiste sobre las asignaciones, la semántica y la forma en que las tecnologías de asistencia usan el árbol de accesibilidad para crear una experiencia del usuario alternativa para sus usuarios. Puedes ver que escribir HTML expresivo y semántico proporciona una gran cantidad de accesibilidad con muy poco esfuerzo, dado que muchos elementos estándar tienen una semántica y un comportamiento de asistencia integrados.
En esta lección, cubriremos semánticas menos obvias que son muy importantes a los usuarios de lectores de pantalla, especialmente en lo que respecta a la navegación. En una página sencilla con muchos controles, pero no mucho contenido, es fácil buscar en la página que necesitas. Pero en una página con mucho contenido, como una entrada de Wikipedia o una noticia agregador, no es práctico leer todo de arriba hacia abajo; tú necesitan una forma de navegar eficientemente por el contenido.
Los desarrolladores suelen tener la idea errónea de que los lectores de pantalla son tediosos y lentos para usar o que todo lo que aparece en la pantalla debe poder enfocarse en ella. para que los usuarios los encuentren. A menudo, no es así.
Los usuarios de lectores de pantalla a menudo dependen de una lista de encabezados para ubicar la información. Más probable los lectores de pantalla tienen formas sencillas de aislar y escanear una lista de encabezados de página, una función importante llamada rotor. Veamos cómo podemos usar encabezados HTML de manera eficaz para respaldar esta función.
Uso eficaz de encabezados
En primer lugar, reiteramos un punto anterior: la orden del DOM importa, no solo para pero para el orden del lector de pantalla. A medida que experimentas con lectores de pantalla como VoiceOver, NVDA, JAWS y ChromeVox, encontrarás la siguiente lista de encabezados. el orden del DOM en lugar del orden visual.
Esto es así para los lectores de pantalla en general. Debido a que los lectores de pantalla interactúan con el árbol de accesibilidad; este se basa en el árbol del DOM, el orden que percibe un lector de pantalla se basa, así, directamente en el orden del DOM. Esta significa que una estructura de encabezado adecuada es más importante que nunca.
En la mayoría de las páginas bien estructuradas, los niveles de encabezado están anidados para indicar relaciones superiores y secundarias entre los bloques de contenido. La WebAIM lista de tareas se refiere reiteradamente a esta técnica.
- 1.3.1 Menciona que el "lenguaje de marcado semántico se usa para designar encabezados"
- 2.4.1 menciona la estructura de encabezado como una técnica para evitar bloques de contenido
- 2.4.6 analiza algunos detalles para escribir encabezados útiles
- 2.4.10 afirma que "las secciones individuales de contenido se designan mediante encabezados, cuando corresponda"
No todos los encabezados tienen que ser visibles en la pantalla. Wikipedia, por ejemplo, usa una técnica que coloca deliberadamente algunos encabezados fuera de la pantalla para hacerlos específicamente accesible solo para lectores de pantalla y otras tecnologías de accesibilidad.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Para aplicaciones complejas, esta puede ser una buena manera de acomodar los encabezados cuando el diseño visual no requiere ni tiene espacio para un encabezado visible.
Otras opciones de navegación
Aunque las páginas con buenos encabezados ayudan a los usuarios de lectores de pantalla a navegar, hay otros elementos que pueden usar para moverse por una página, como vínculos, formularios controles de seguridad y puntos de referencia.
Los lectores pueden usar la función de rotor del lector de pantalla (una forma fácil de aislar y escanear una lista de encabezados de página) para acceder a una lista de vínculos de la página. A veces, como en una wiki, hay muchos vínculos, por lo que el lector puede buscar un en los vínculos. Esto limita los hits a vínculos que realmente contengan la en lugar de cada caso del término en la página.
Esta función es útil solo si el lector de pantalla puede encontrar los vínculos y el vínculo. texto es significativo. Por ejemplo, estos son algunos patrones comunes que crean vínculos difícil de encontrar.
- Etiquetas de anclaje sin atributos
href. Suelen usarse en una sola página aplicaciones, estos objetivos de vínculo causan problemas para los lectores de pantalla. Puedes obtén más información en este artículo sobre las apps de una sola página. - Botones que se implementan con vínculos Estos hacen que el lector de pantalla interpretan el contenido como un enlace, y se pierde la funcionalidad del botón. Para en estos casos, debes reemplazar la etiqueta de anclaje por un botón real y aplicarle un estilo. apropiadamente.
- Imágenes usadas como contenido del vínculo. A veces, las imágenes vinculadas se pueden
inutilizable para los lectores de pantalla. Para garantizar que el vínculo esté expuesto correctamente a
tecnología de accesibilidad, asegúrate de que la imagen tenga texto de atributo
alt.
Un texto deficiente del vínculo es otro problema. Texto en el que se puede hacer clic, como "más información" o "haga clic en aquí" no brinda información semántica sobre la ubicación del vínculo. En cambio, usa texto descriptivo como «más información sobre el diseño adaptable» o "ver este lienzo instructivo” para ayudar a los lectores de pantalla a brindar contexto significativo sobre los vínculos.
El rotor también puede recuperar una lista de control de formulario. Con esta lista, los lectores pueden buscar elementos específicos e ir directamente a ellos.
Un error común de los lectores de pantalla es la pronunciación. Por ejemplo, una pantalla el lector podría pronunciar “Udacity” como "oo-dacity", o leer un número de teléfono como un un número entero grande o leer texto en mayúsculas como si fuera un acrónimo. Curiosamente, los usuarios de lectores de pantalla están bastante acostumbrados a esta peculiaridad y la llevan a consideración.
Algunos desarrolladores intentan aliviar esta situación proporcionando solo lectores de pantalla texto que se deletrea fonéticamente. Esta es una regla simple para la ortografía fonética: no lo hagas; solo empeora el problema. Si, por ejemplo, un usuario utiliza una pantalla braille, la palabra se deletreará de forma incorrecta, lo que dará lugar a más confusión. Los lectores de pantalla permiten que las palabras se deletreen en voz alta, así que déjalo en lector para controlar su experiencia y decidir cuándo es necesario.
Los lectores pueden usar el rotor para ver una lista de puntos de referencia. Esta lista ayuda a los lectores encontrar el contenido principal y un conjunto de puntos de referencia de navegación proporcionados por HTML elementos de referencia.
HTML5 introdujo algunos elementos nuevos que ayudan a definir la estructura semántica de
la página, incluidos header, footer, nav, article, section, main y
aside Estos elementos proporcionan pistas estructurales en la página específicamente
sin forzar un estilo integrado (lo cual, de cualquier manera, deberías hacer con CSS).
Los elementos estructurales semánticos reemplazan varios bloques div repetitivos.
ofrecen una forma más clara y descriptiva de expresar la estructura de la página de forma intuitiva
para los autores y para los lectores.