Semántica y lectores de pantalla

¿Alguna vez te preguntaste cómo la tecnología de asistencia, como una pantalla ¿sabes qué anunciar a los usuarios? La respuesta es que estas tecnologías depender de que los desarrolladores marquen sus páginas con HTML semántico Pero ¿cuáles son semántica y cómo la usan los lectores de pantalla?

Antes de profundizar en la semántica, es útil comprender otro término: y condiciones. Una indicación visual es cualquier objeto que ofrece o otorga a su usuario la oportunidad de realizar una acción. Un ejemplo clásico es la tetera:

El mango de una tetera es una opción natural.

Esta tetera no necesita un manual de instrucciones. en cambio, su diseño físico comunica al usuario cómo debe operarse. Tiene un identificador, y como viste otros objetos en el mundo con controladores similares, puedes deducir debes tomarlo y operarlo.

Cuando creamos interfaces gráficas de usuario, usamos elementos como CSS para agregar elementos visuales condiciones a nuestra IU. Por ejemplo, puedes darle a un botón una sombra paralela y borde para que se parezca a un botón real en el mundo real.

Pero si un usuario no puede ver la pantalla, estas indicaciones visuales no se les debe transmitir. Por lo tanto, debes asegurarte de que tu IU sea construido de una manera que pueda transmitir estas mismas condiciones visuales a los en la nube. Esta exposición no visual de las posibilidades de un elemento de la IU se denomina su semántica.

Usa HTML semántico

La forma más sencilla de transmitir una semántica adecuada es usar HTML con semántica enriquecida o de terceros.

Con CSS, es posible para definir el estilo de los elementos <div> y <button>, de modo que transmitan las mismas posibilidades 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 elemento <button> se anuncia como un "botón". una señal mucho más fuerte al usuario de que es algo con lo que puede interactuar.

La forma más sencilla y suele ser la mejor solución a este problema es evitar por completo los controles interactivos personalizados. Por ejemplo, reemplaza un <div> que funciona como un botón con un <button> real.

Propiedades semánticas y el árbol de accesibilidad

En términos generales, cada elemento HTML tendrá alguno de los siguientes elementos propiedades:

  • 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 solo "grupo" para elementos como los elementos div y span.

El nombre de un elemento es su etiqueta calculada. Los lectores de pantalla suelen leer el nombre de un elemento seguido de su rol, p.ej., "Botón Registrarse". El algoritmo que determina el nombre de un elemento tiene en cuenta, por ejemplo, si hay texto contenido dentro del elemento, ya sea que tenga o no atributos como title o placeholder, ya sea que el elemento esté asociado o no con una <label> y si este tiene atributos de ARIA, como aria-label y aria-labelledby.

Algunos elementos pueden tener un valor. Por ejemplo, <input type="text"> podría 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 expandido o contraído, según si está abierta o cerrada.

El árbol de accesibilidad

Para cada nodo del DOM, el navegador determina si el nodo es semánticamente "interesante" y lo agrega a la sección de accesibilidad árbol. Cuando la tecnología de accesibilidad, como un lector de pantalla, proporciona una IU alternativa al usuario, a menudo lo hace caminando por este árbol de accesibilidad.

Con las Herramientas para desarrolladores de Chrome, puedes inspeccionar la semántica de un elemento propiedades y explorar su posición en el árbol de accesibilidad.

Próximos pasos

Una vez que sepas un poco sobre semántica y cómo ayudan a navegar por los lectores de pantalla, no puedes evitar mirar las páginas que creas de manera diferente. En la siguiente sección, daremos un paso atrás y consideraremos cómo se puede se transmite con encabezados y puntos de referencia eficaces.