Para que un lector de pantalla presente una IU hablada al usuario, la información los elementos deben tener etiquetas o alternativas de texto adecuadas. Una etiqueta o texto le da a un elemento su name accesible, una de las propiedades clave para expresar la semántica de los elementos en el árbol de accesibilidad.
Cuando se combina el nombre de un elemento con el role de este, le da al elemento el contexto del usuario para que puedan entender con qué tipo de elemento está interactuando. y cómo se representa en la página. Si no hay un nombre, entonces el lector de pantalla solo anuncia el rol del elemento. Imagina que intentas navegar una página y oíste: «botón», "casilla de verificación", “imagen” sin ninguna información adicional. Por eso el etiquetado y las alternativas de texto son cruciales y accesible.
Cómo inspeccionar el nombre de un elemento
Es fácil verificar el nombre de acceso de un elemento con las Herramientas para desarrolladores de Chrome:
- Haz clic con el botón derecho en un elemento y selecciona Inspeccionar. Se abrirá Herramientas para desarrolladores Panel de elementos.
- En el panel Elements, busca el panel Accesibilidad. Es posible que esté oculta
detrás de un símbolo
». - En el menú desplegable Propiedades computadas, busca la propiedad Nombre.
Ya sea que estés mirando una img con texto alt o una input con una
label, todas estas situaciones dan como resultado el mismo resultado: otorgar un
su nombre accesible.
Cómo comprobar si faltan nombres
Existen diferentes formas de agregar un nombre accesible a un elemento, según su tipo. En la siguiente tabla, se enumeran los tipos de elementos más comunes que requieran nombres accesibles y vínculos a explicaciones sobre cómo agregarlos.
| Tipo de elemento | Cómo agregar un nombre |
|---|---|
| Documento HTML | Cómo etiquetar documentos y marcos |
Elementos <frame> o <iframe>
|
Cómo etiquetar documentos y marcos |
| Elementos de imagen | Incluye alternativas de texto para imágenes y objetos |
Elementos <input type="image">
|
Incluye alternativas de texto para imágenes y objetos |
Elementos <object>
|
Incluye alternativas de texto para imágenes y objetos |
| Botones | Cómo etiquetar botones y vínculos |
| Vínculos | Cómo etiquetar botones y vínculos |
| Elementos del formulario | Cómo etiquetar elementos del formulario |
Etiqueta documentos y marcos
Todas las páginas deben tener una
title
que explique brevemente de qué se trata la página. El elemento title ofrece
la página su nombre accesible. Cuando un lector de pantalla entra a la página, esta
el primer texto que se anuncia.
Por ejemplo, la siguiente página tiene el título "Receta para hornear rápidamente de la barra de arce de Mary":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Del mismo modo, cualquier elemento frame o iframe debe tener atributos title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Si bien el contenido de un iframe puede incluir su propio elemento title interno, un elemento
el lector de pantalla suele detenerse en el límite del fotograma y anuncia la
rol, “marco”, y su nombre accesible, proporcionado por el atributo title. Esta
le permite al usuario decidir si desea ingresar al marco u omitirlo.
Incluir alternativas de texto para imágenes y objetos
Un elemento img siempre debe estar acompañado de un elemento
alt
para darle a la imagen un nombre accesible. Si la imagen no se carga,
El texto alt se usa como marcador de posición para que los usuarios tengan una idea de cómo era la imagen
tratar de transmitir.
Escribir un buen texto en alt es como una obra de arte, pero hay algunos lineamientos
que puedes seguir:
- Determine si la imagen proporciona contenido que, de otro modo, sería difícil de de la lectura del texto que lo rodea.
- Si es así, transmite el contenido de la forma más concisa posible.
Si la imagen actúa como decoración y no proporciona contenido útil
puedes asignarle un atributo alt="" vacío para quitarlo de la accesibilidad.
de imágenes.
Imágenes como vínculos y entradas
Una imagen unida a un vínculo debe usar el atributo alt de img para describir
a la que navegará el usuario si hace clic en el vínculo:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Del mismo modo, si se usa un elemento <input type="image"> para crear una imagen
debe contener el texto alt que describa la acción que ocurre cuando
el usuario hace clic en el botón:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Objetos incorporados
<object>, que suelen usarse para incorporaciones como Flash, PDF o
ActiveX también debe contener texto alternativo. Similar a las imágenes, este texto es
se muestra si el elemento no se renderiza. El texto alternativo se encuentra
elemento object como texto normal, por ejemplo, "Informe anual" a continuación:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etiquetar botones y vínculos
Los botones y vínculos a menudo son cruciales para la experiencia en un sitio es importante que ambas tengan nombres de accesibilidad correctos.
Botones
Un elemento button siempre intenta calcular su nombre accesible mediante el
contenido de texto. Para los botones que no forman parte de un form, escribe un
acción, ya que el contenido de texto puede ser todo lo que necesitas para crear un buen
de la fuente de datos.
<button>Book Room</button>
Una excepción común a esta regla son los botones de íconos. Un botón de ícono puede usar una o una fuente de ícono para proporcionar el contenido de texto del botón. Por ejemplo: los botones que se usan en el editor What You See Is What You Get (WYSIWYG) para darle formato el texto, por lo general, son solo símbolos gráficos:
Cuando trabajes con botones de íconos, puede ser útil brindarles
nombre accesible con el atributo aria-label. aria-label anula cualquiera
contenido de texto dentro del botón, lo que te permite describir claramente la acción a
cualquier persona que use un lector de pantalla.
<button aria-label="Left align"></button>
Vínculos
Al igual que los botones, los vínculos obtienen su nombre accesible principalmente de su texto. contenido. Un buen truco al crear un enlace es colocar la parte más significativa de texto en el vínculo en sí, en lugar de palabras de relleno como "Aquí" o "Leer Más".
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Esto es especialmente útil para los lectores de pantalla que ofrecen combinaciones de teclas para enumerar todos de los vínculos de la página. Si los vínculos están llenos de texto de relleno repetitivo, estos las combinaciones de teclas se vuelven mucho menos útiles:
Etiqueta los elementos del formulario
Existen dos maneras de asociar una etiqueta a un elemento de formulario, como una casilla de verificación. Cualquiera de los métodos hace que el texto de la etiqueta también se convierta en un objetivo de clics para la casilla de verificación, lo cual también es útil para los usuarios de mouse o pantalla táctil. Para asociar una etiqueta con un elemento:
- Coloca el elemento de entrada dentro de un elemento de etiqueta
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- O usar el atributo
forde la etiqueta y hacer referencia aliddel elemento
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Cuando la casilla de verificación se etiquetó correctamente, el lector de pantalla puede informar que el elemento tiene un rol de casilla de verificación, está en estado marcado y se llama "Recibir ofertas promocionales?". como en el ejemplo de VoiceOver a continuación:
TODO: DevSite: Evaluación de Think and Check