¿Te has preguntado cómo la tecnología de accesibilidad, como un lector de pantalla, sabe qué anunciar a los usuarios? La respuesta es que estas tecnologías dependen de que los desarrolladores agreguen lenguaje de marcado a sus páginas con HTML semántico. Pero, ¿qué son los semántica y cómo los usan los lectores de pantalla?
Indicaciones visuales y semántica
Antes de profundizar en la semántica, es útil comprender otro término: indicadores visuales. Un indicador visual es cualquier objeto que le ofrece al usuario la oportunidad de realizar una acción. Un ejemplo clásico es la tetera:
Esta tetera no necesita un manual de instrucciones, sino que su diseño físico le indica al usuario cómo debe operarla. Tiene un mango y, como has visto otros objetos en el mundo con mangos similares, puedes inferir cómo deberías levantarlo y operarlo.
Cuando compilamos interfaces de usuario gráficas, usamos elementos como CSS para agregar indicadores visuales a nuestra IU. Por ejemplo, puedes darle a un botón una sombra y un borde para que se parezca a un botón real en el mundo real.
Sin embargo, si un usuario no puede ver la pantalla, no se le transmitirán estas indicaciones visuales. Por lo tanto, debes asegurarte de que tu IU se compile de una manera que pueda transmitir estas mismas indicaciones a la tecnología de accesibilidad. Esta exposición no visual de los indicadores visuales de un elemento de la IU se denomina su semántica.
Usa código HTML semántico
La forma más sencilla de transmitir semántica adecuada es usar elementos HTML enriquecidos semánticamente.
Con CSS, es posible asignar diseño a los elementos <div> y <button> para que transmitan las mismas indicaciones visuales, pero las dos experiencias son muy diferentes cuando se usa un lector de pantalla.
Un <div> es solo un elemento de agrupación genérico, por lo que un lector de pantalla solo anuncia el contenido de texto del <div>.
El <button> se anuncia como un "botón", una señal mucho más clara para el usuario de que es algo con lo que puede interactuar.
La solución más simple y, a menudo, la mejor para este problema es evitar por completo los controles interactivos personalizados.
Por ejemplo, reemplaza un <div> que actúa como un botón
con un <button> real.
Propiedades semánticas y el árbol de accesibilidad
En términos generales, cada elemento HTML tendrá algunas de las siguientes propiedades semánticas:
- Un rol o un tipo
- Un nombre
- Un valor (opcional)
- Un estado (opcional)
El rol de un elemento describe su tipo, por ejemplo, "botón", "entrada" o incluso solo "grupo" para elementos como div y span.
El nombre de un elemento es su etiqueta calculada. Por lo general, los lectores de pantalla anuncian el nombre de un elemento seguido de su rol, p.ej., "Registrarse, botón". El algoritmo que determina el nombre de un elemento tiene en cuenta factores como si hay contenido de texto dentro del elemento, si tiene o no atributos como title o placeholder, si el elemento está asociado o no con un elemento <label> real y si el elemento tiene algún atributo ARIA, como aria-label y aria-labelledby.
Algunos elementos pueden tener un valor. Por ejemplo, <input type="text"> puede tener un valor que refleje lo que el usuario escribió en el campo de texto.
Algunos elementos pueden tener un estado, que indica su estado actual.
Por ejemplo, un elemento <select> puede estar en un estado expandido o contraido, según si está abierto o cerrado.
El árbol de accesibilidad
Para cada nodo del DOM, el navegador determina si es "interesante" semánticamente y lo agrega al árbol de accesibilidad. Cuando una tecnología de accesibilidad, como un lector de pantalla, proporciona una IU alternativa al usuario, suele hacerlo a través de este árbol de accesibilidad.
Con las Herramientas para desarrolladores de Chrome, puedes inspeccionar las propiedades semánticas de un elemento y explorar su posición en el árbol de accesibilidad.
Próximos pasos
Una vez que sepas un poco sobre la semántica y cómo ayuda a la navegación del lector de pantalla, no podrás evitar mirar las páginas que compilas de manera diferente. En la siguiente sección, haremos un alto y analizaremos cómo se puede transmitir todo el esquema de una página con encabezados y puntos de referencia eficaces.