La función de la semántica en la navegación de páginas
Aprendiste sobre las condiciones, la semántica y cómo las tecnologías de accesibilidad usan el árbol de accesibilidad para crear una experiencia alternativa para sus usuarios. Como puedes ver, escribir código HTML semántico y expresivo brinda mucha accesibilidad con muy poco esfuerzo, ya que muchos elementos estándar tienen incorporada la semántica y un comportamiento complementario.
En esta lección, abordaremos una semántica menos obvia que es muy importante para los usuarios de lectores de pantalla, especialmente en cuanto a la navegación. En una página simple con muchos controles, pero sin mucho contenido, es fácil explorar 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 desde arriba hacia abajo; necesitas una forma de navegar por el contenido de manera eficiente.
Los desarrolladores suelen tener la idea equivocada de que los lectores de pantalla son tediosos y lentos de usar, o de que todo lo que aparece en la pantalla tiene que ser enfocable para que el lector de pantalla lo encuentre. A menudo, ese no es el caso.
Los usuarios de lectores de pantalla a menudo dependen de una lista de encabezados para ubicar la 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 encabezados HTML de manera efectiva para esta función.
Cómo usar encabezados de forma eficaz
En primer lugar, 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 se aplica a 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 en el 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 encabezado se anidan para indicar las relaciones de superior y secundario entre los bloques de contenido. La lista de tareas de WebAIM se refiere repetidamente a esta técnica.
- 1.3.1 menciones "El lenguaje de marcado semántico se utiliza para designar encabezados".
- 2.4.1 menciona la estructura de encabezados como una técnica para evadir bloques de contenido.
- 2.4.6 analiza algunos detalles para escribir encabezados útiles
- 2.4.10 establece "Las secciones individuales de contenido se designan con encabezados, cuando corresponde"
No todos los encabezados tienen que ser visibles en la pantalla. Por ejemplo, Wikipedia usa una técnica que coloca deliberadamente algunos encabezados fuera de la pantalla para hacerlos específicamente 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 aplicaciones complejas, esta puede ser una buena manera de adaptar encabezados cuando el diseño visual no requiere un encabezado visible o no tiene espacio para este.
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 desplazarse por una página, como 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 sencilla de aislar y escanear 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 vínculos que contienen el término, en lugar de todas las apariciones 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 texto del vínculo es significativo. Por ejemplo, estos son algunos patrones comunes que hacen que los vínculos sean difíciles de encontrar.
- Etiquetas de anclaje sin atributos
hrefEstos destinos de vínculo, 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. - Botones que se implementan con vínculos. Estos hacen que el lector de pantalla interprete el contenido como un vínculo y se pierde la funcionalidad del botón. En estos casos, reemplaza la etiqueta delimitadora con un botón real y define el diseño adecuado.
- Imágenes usadas como contenido de vínculo. A veces, las imágenes vinculadas pueden resultar inutilizables para los lectores de pantalla. Para garantizar que el vínculo esté expuesto correctamente a la tecnología de asistencia, asegúrate de que la imagen tenga texto de atributo
alt.
Un texto de vínculo deficiente es otro problema. 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 el destino del vínculo. En su lugar, usa texto descriptivo como "más información sobre el diseño responsivo" o "consulta este instructivo de lienzo" para ayudar a los lectores de pantalla a proporcionar contexto significativo sobre los vínculos.
El rotor también puede mostrar 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 que cometen los lectores de pantalla es la pronunciación. Por ejemplo, un lector de pantalla podría pronunciar "Udacity" como "oo-dacity", o 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. Es interesante que los usuarios de lectores de pantalla estén acostumbrados a esta peculiaridad y la tienen en cuenta.
Algunos desarrolladores intentan aliviar esta situación proporcionando texto solo para lectores de pantalla que se deletrea fonéticamente. Esta es una regla sencilla para la escritura fonética: no lo hagas; solo empeora el problema. Si, por ejemplo, un usuario usa una pantalla braille, la palabra se deletreará de forma incorrecta, lo que generará más confusión. Los lectores de pantalla permiten que las palabras se deletreen en voz alta, así que deja que el lector controle su experiencia y decida cuándo es necesario.
Los lectores pueden usar el rotor para ver una lista de puntos de referencia. Esta lista ayuda a los lectores a encontrar el contenido principal y un conjunto de puntos de referencia de navegación proporcionados por elementos de puntos 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, específicamente, proporcionan pistas estructurales en la página sin forzar un diseño integrado (lo que, de todas formas, deberías hacer con CSS).
Los elementos estructurales semánticos reemplazan varios bloques div repetitivos y proporcionan una forma más clara y descriptiva de expresar la estructura de la página de manera intuitiva para los autores y los lectores.