¿Alguna vez te preguntaste cómo sabe qué anunciar a los usuarios la tecnología de accesibilidad, como un lector de pantalla? La respuesta es que estas tecnologías dependen de que los desarrolladores marquen sus páginas con código HTML semántico. Pero ¿qué es la semántica y cómo la utilizan los lectores de pantalla?
Asignaciones y semántica
Antes de sumergirte en la semántica, es útil comprender otro término: affordances. Una indicación visual es cualquier objeto que le ofrezca o le permita al usuario realizar una acción. Un ejemplo clásico es la tetera:
Esta tetera no necesita un manual de instrucciones; en cambio, su diseño físico transmite al usuario cómo debe funcionar. Tiene un controlador y, como viste otros objetos en el mundo con controladores similares, puedes inferir cómo debes tomarlo y operarlo.
Cuando creamos interfaces gráficas de usuario, usamos elementos como CSS para agregar asistencias visuales a nuestra IU. Por ejemplo, puedes proporcionar un borde y una sombra paralela a un botón para que se asemeje a un botón real en el mundo real.
Sin embargo, si un usuario no puede ver la pantalla, no se le transmitirán estos indicadores visuales. Por lo tanto, debes asegurarte de que la IU esté construida de manera que pueda transmitir estos mismos aspectos a la tecnología de accesibilidad. Esta exposición no visual de las indicaciones visuales de un elemento de la IU se denomina semántica.
Usa HTML semántico
La forma más fácil de transmitir una semántica adecuada es usar elementos HTML enriquecidos con semántica.
Con CSS, es posible aplicar diseño a los elementos <div> y <button> para que transmitan las mismas posibilidades visuales, pero las dos experiencias son muy diferentes cuando se usa un lector de pantalla.
Una <div> es solo un elemento de agrupación genérico, por lo que un lector de pantalla solo anuncia el contenido de texto de la <div>.
<button> se anuncia como un "botón", una señal mucho más fuerte 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 por 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 tipo
- Un nombre
- Un value (opcional)
- Un state (opcional)
La función de un elemento describe su tipo, por ejemplo, "button", "input" o incluso solo "group" para elementos como div y span.
El nombre de un elemento es su etiqueta calculada. Los lectores de pantalla suelen anunciar el nombre de un elemento seguido de su función, 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 atributos como title o placeholder, si el elemento está asociado o no con un elemento <label> real y si el elemento tiene atributos 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 también tener un state, que transmite su estado actual.
Por ejemplo, un elemento <select> puede estar en estado expandido o contraído, según si está abierto o cerrado.
Árbol de accesibilidad
Para cada nodo del DOM, el navegador determina si el nodo es "interesante" desde el punto de vista semántico y lo agrega al árbol de accesibilidad. Cuando la tecnología de accesibilidad, como un lector de pantalla, proporciona una IU alternativa al usuario, a menudo lo hace recorriendo 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 facilitan la navegación del lector de pantalla, no podrás dejar de mirar las páginas que compilaste de manera diferente. En la siguiente sección, nos daremos un paso atrás y consideraremos cómo se puede transmitir el esquema completo de una página usando encabezados y puntos de referencia eficaces.