Para que un lector de pantalla presente una IU hablada al usuario, los elementos significativos deben tener etiquetas o alternativas de texto adecuadas. Una etiqueta o una alternativa de texto le dan a un elemento su nombre accesible, una de las propiedades clave para expresar la semántica del elemento en el árbol de accesibilidad.
Cuando el nombre de un elemento se combina con su rol, se le proporciona al usuario contexto para que pueda comprender con qué tipo de elemento está interactuando y cómo se representa en la página. Si no hay un nombre, el lector de pantalla solo anuncia el rol del elemento. Imagina que intentas navegar por una página y escuchas “botón”, “casilla de verificación” o “imagen” sin ningún contexto adicional. Por eso, el etiquetado y las alternativas de texto son fundamentales para brindar una experiencia accesible y de calidad.
Cómo inspeccionar el nombre de un elemento
Puedes verificar el nombre accesible de un elemento en las Herramientas para desarrolladores de Chrome:
- Haz clic con el botón derecho en un elemento y elige Inspeccionar. Se abrirá el panel Elements de Herramientas para desarrolladores.
- En el panel Elementos, busca el panel Accesibilidad. Puede estar oculta detrás de un símbolo
». - En el menú desplegable Propiedades computadas, busca la propiedad Nombre.
Ya sea que mires un img con texto alt o un input con un label, todos estos casos generan el mismo resultado: darle a un elemento su nombre accesible.
Verifica 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 necesitan nombres accesibles y se incluyen vínculos a explicaciones sobre cómo agregarlos.
| Tipo de elemento | Cómo agregar un nombre |
|---|---|
| Documento HTML | Cómo etiquetar documentos y fotogramas |
Elementos <frame> o <iframe>
|
Cómo etiquetar documentos y fotogramas |
| 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 | Etiqueta botones y vínculos |
| Vínculos | Etiqueta botones y vínculos |
| Elementos de formulario | Etiqueta los elementos del formulario |
Etiqueta documentos y fotogramas
Todas las páginas deben tener un elemento title que explique brevemente de qué se trata la página. El elemento title le da a la página su nombre accesible. Cuando un lector de pantalla ingresa a la página, este es el primer texto que se anuncia.
Por ejemplo, la siguiente página tiene el título "Receta de pastel de arce de Mary para hornear rápido":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Del mismo modo, todos los elementos frame o iframe deben tener atributos title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Si bien el contenido de un iframe puede contener su propio elemento title interno, un lector de pantalla suele detenerse en el límite del marco y anunciar el rol del elemento ("marco") y su nombre accesible, proporcionado por el atributo title. Esto permite que el usuario decida si quiere entrar en el encuadre o evitarlo.
Incluye alternativas de texto para imágenes y objetos
Un img siempre debe ir acompañado de un atributo alt para darle a la imagen su nombre accesible. Si no se carga la imagen, se usa el texto alt como marcador de posición para que los usuarios tengan una idea de lo que la imagen intentaba transmitir.
Escribir un buen texto de alt es un arte, pero hay algunas pautas que puedes seguir:
- Determina si la imagen proporciona contenido que, de otro modo, sería difícil de obtener a partir de la lectura del texto circundante.
- Si es así, transmite el contenido de la manera 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 quitarla del árbol de accesibilidad.
Imágenes como vínculos y entradas
Una imagen incluida en un vínculo debe usar el atributo alt de img para describir a dónde 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 un botón de imagen, debe contener 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
Los elementos <object>, que suelen usarse para elementos incorporados como Flash, PDFs o ActiveX, también deben contener texto alternativo. Al igual que con las imágenes, este texto se muestra si el elemento no se renderiza. El texto alternativo va dentro del elemento object como texto normal, como "Informe anual" a continuación:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etiqueta los botones y los vínculos
Los botones y los vínculos suelen ser fundamentales para la experiencia de un sitio, y es importante que ambos tengan nombres accesibles adecuados.
Botones
Un elemento button siempre intenta calcular su nombre accesible usando su contenido de texto. En el caso de los botones que no forman parte de un form, escribir una acción clara como contenido de texto puede ser todo lo que necesitas para crear un buen nombre accesible.
<button>Book Room</button>
Una excepción común a esta regla son los botones de ícono. Un botón de ícono puede usar una imagen o una fuente de ícono para proporcionar el contenido de texto del botón. Por ejemplo, los botones que se usan en un editor WYSIWYG (lo que ves es lo que obtienes) para darle formato al texto suelen ser solo símbolos gráficos:
Cuando trabajes con botones de ícono, puede ser útil darles un nombre accesible explícito con el atributo aria-label. aria-label anula cualquier 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 principalmente su nombre accesible del contenido de texto. Un buen truco cuando creas un vínculo es colocar la parte más significativa del 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 atajos para enumerar todos los vínculos de la página. Si los vínculos están llenos de texto de relleno repetitivo, estos atajos se vuelven mucho menos útiles:
Etiqueta los elementos del formulario
Existen dos formas 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 clic para la casilla de verificación, lo que también es útil para los usuarios de mouse o pantalla táctil. Para asociar una etiqueta a un elemento, haz una de las siguientes acciones:
- Coloca el elemento de entrada dentro de un elemento de etiqueta.
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- O bien usa el atributo
forde la etiqueta y haz 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 el rol de casilla de verificación, está en estado marcado y se llama "¿Desea recibir ofertas promocionales?", como en este ejemplo de VoiceOver:
