El rol de la semántica en la navegación de páginas
Aprendiste sobre los indicadores visuales, la semántica y cómo las tecnologías de accesibilidad usan el árbol de accesibilidad para crear una experiencia del usuario alternativa para sus usuarios. Puedes ver que escribir HTML semántico y expresivo te brinda mucha accesibilidad con muy poco esfuerzo, ya que muchos elementos estándar tienen la semántica y el comportamiento de compatibilidad integrados.
En esta lección, abordaremos algunas semánticas menos obvias que son muy importantes para los usuarios de lectores de pantalla, en especial en lo que respecta a la navegación. En una página simple con muchos controles, pero no mucho contenido, es fácil escanear la página para encontrar lo que necesitas. Sin embargo, en una página con mucho contenido, como una entrada de Wikipedia o un agregador de noticias, no es práctico leer todo de arriba abajo. Necesitas una forma de navegar por el contenido de manera eficiente.
Los desarrolladores suelen tener la idea errónea de que los lectores de pantalla son tediosos y lentos de usar, o que todo en la pantalla debe poder enfocarse para que el lector de pantalla lo encuentre. Pero, a menudo, no es así.
Los usuarios de lectores de pantalla suelen usar una lista de encabezados para encontrar información. La mayoría de los lectores de pantalla tienen formas sencillas de aislar y analizar una lista de encabezados de página, una función importante llamada rotor. Veamos cómo podemos usar los encabezados HTML de manera efectiva para admitir esta función.
Usa encabezados de manera eficaz
Primero, reiteremos un punto anterior: El orden del DOM es importante, no solo para el orden de enfoque, sino también para el orden del lector de pantalla. A medida que experimentes con lectores de pantalla, como VoiceOver, NVDA, JAWS y ChromeVox, verás que la lista de encabezados sigue 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, y este se basa en el árbol del DOM, el orden que percibe un lector de pantalla se basa directamente en el orden del DOM. Esto 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 encabezados se anidan para indicar relaciones de jerarquía entre los bloques de contenido. La lista de tareas de WebAIM hace referencia a esta técnica de forma reiterada.
- 1.3.1 menciona que "se usa el marcado semántico para designar encabezados".
- 2.4.1 menciona la estructura de los encabezados como una técnica para omitir bloques de contenido.
- En 2.4.6, se analizan algunos detalles para escribir encabezados útiles.
- 2.4.10 establece que “las secciones individuales de contenido se designan con encabezados, siempre que corresponda”.
No todos los encabezados tienen que ser visibles en pantalla. Wikipedia, por ejemplo, usa una técnica que coloca deliberadamente algunos encabezados fuera de la pantalla para que sean accesibles solo para los 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>
En el caso de las aplicaciones complejas, esta puede ser una buena manera de incluir encabezados cuando el diseño visual no requiere o no tiene espacio para un encabezado visible.
Otras opciones de navegación
Si bien 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, incluidos los vínculos, los controles de formulario y los puntos de referencia.
Los lectores pueden usar la función de rotor del lector de pantalla (una forma fácil de aislar y analizar una lista de encabezados de página) para acceder a una lista de vínculos en la página. A veces, como en una wiki, hay muchos vínculos, por lo que el lector puede buscar un término dentro de ellos. Esto limita los hits a los vínculos que realmente contienen el término, en lugar de cada ocurrencia del término en la página.
Esta función solo es útil si el lector de pantalla puede encontrar los vínculos y el texto de los vínculos es significativo. Por ejemplo, estos son algunos patrones comunes que dificultan la búsqueda de vínculos.
- Etiquetas de ancla sin atributos
hrefEstos destinos de vínculos, que suelen usarse en aplicaciones de una sola página, causan problemas para los lectores de pantalla. Puedes obtener más información en este artículo sobre las apps de una sola página. - Son botones que se implementan con vínculos. Esto hace que el lector de pantalla interprete el contenido como un vínculo y se pierda la funcionalidad del botón. En estos casos, reemplaza la etiqueta de ancla por un botón real y dale el estilo adecuado.
- Imágenes que se usan como contenido de vínculos. A veces, las imágenes vinculadas que son necesarias pueden ser inutilizables para los lectores de pantalla. Para garantizar que el vínculo se exponga correctamente a la tecnología de accesibilidad, asegúrate de que la imagen tenga texto del atributo
alt.
Otro problema es el texto de los vínculos poco claros. El texto en el que se puede hacer clic, como "más información" o "haz clic aquí", no proporciona información semántica sobre adónde dirige el vínculo. En su lugar, usa texto descriptivo, como "Obtén más información sobre el diseño responsivo" o "Mira este instructivo de Canvas", para ayudar a los lectores de pantalla a proporcionar contexto significativo sobre los vínculos.
El rotor también puede recuperar una lista de controles de formulario. Con esta lista, los lectores pueden buscar elementos específicos y dirigirse directamente a ellos.
Un error común que cometen los lectores de pantalla es la pronunciación. Por ejemplo, un lector de pantalla podría pronunciar "Udacity" como "oo-dacity", leer un número de teléfono como 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 tienen en cuenta.
Algunos desarrolladores intentan mejorar esta situación proporcionando texto solo para lectores de pantalla que se deletrea fonéticamente. Esta es una regla simple para la ortografía fonética: no la uses, ya que solo empeora el problema. Por ejemplo, si un usuario usa una pantalla braille, la palabra se escribirá de forma incorrecta, lo que generará más confusión. Los lectores de pantalla permiten deletrear palabras en voz alta, así que deja que el lector controle su experiencia y decida cuándo es necesario hacerlo.
Los lectores pueden usar el rotor para ver una lista de lugares de interés. Esta lista ayuda a los lectores a encontrar el contenido principal y un conjunto de puntos de referencia de navegación proporcionados por los elementos de punto de referencia HTML.
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, de forma específica, pistas estructurales en la página
sin forzar ningún estilo integrado (que, de todos modos, debes hacer con CSS).
Los elementos estructurales semánticos reemplazan a varios bloques div repetitivos y proporcionan una forma más clara y descriptiva de expresar intuitivamente la estructura de la página para los autores y los lectores.