¿Alguna vez te detuviste a pensar 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 marquen sus páginas con HTML semántico. Pero, ¿qué es la semántica y cómo la usan los lectores de pantalla?
Affordances y semántica
Antes de profundizar en la semántica, es útil comprender las affordances. Una posibilidad es cualquier objeto que le ofrece a su usuario la oportunidad de 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 le indica al usuario cómo debe operarse. Tiene una manija y, como viste otros objetos en el mundo con manijas similares, puedes inferir cómo debes tomarla y usarla.
Cuando creamos interfaces gráficas de usuario, usamos CSS para agregar ayudas visuales a nuestra interfaz. Por ejemplo, puedes agregarle una sombra paralela y un borde a un botón para que se parezca a un botón real.
Sin embargo, los usuarios que no pueden ver la pantalla no reciben estas indicaciones visuales. Por lo tanto, debes asegurarte de que tu interfaz esté construida de manera que pueda transmitir estas mismas condiciones a la tecnología de asistencia. Esta exposición no visual de las posibilidades de un elemento de la IU se denomina semántica.
Escribe código HTML semántico
La forma más sencilla de transmitir la semántica adecuada es usar elementos HTML semánticamente enriquecidos.
Con CSS, es posible aplicar un 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", lo que es una señal mucho más fuerte para el usuario de que es algo con lo que puede interactuar.
A menudo, la mejor solución 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 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, como "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 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 también pueden tener un estado, que transmite su estado actual.
Por ejemplo, un elemento <select> puede estar en estado expanded o collapsed, según si está abierto o cerrado.
El árbol de accesibilidad
Para cada nodo del DOM, el navegador determina si el nodo es semánticamente "interesante" y lo agrega al árbol de accesibilidad. Cuando la tecnología de asistencia, 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 ayuda a la navegación con lectores de pantalla, no podrás evitar mirar las páginas que creas de manera diferente. En la siguiente sección, volveremos un paso atrás y analizaremos cómo se puede transmitir el esquema completo de una página con encabezados y puntos de referencia eficaces.