¿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?
Asignaciones y semántica
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:
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.