Para que un lector de pantalla le presente al usuario una IU hablada, los elementos significativos deben tener etiquetas o alternativas de texto adecuadas. Una etiqueta o una alternativa de texto le asignan 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, le brinda al usuario contexto para que pueda comprender con qué tipo de elemento interactúa y cómo se representa en la página. Si no hay un nombre, un lector de pantalla solo anuncia el rol del elemento. Imagina que intentas navegar por una página y escuchar “botón”, “casilla de verificación”, “imagen” sin ningún contexto adicional. Por eso, las alternativas de etiquetado y texto son fundamentales para brindar una buena experiencia accesible.
Inspecciona el nombre de un elemento
Es fácil verificar el nombre accesible de un elemento con las Herramientas para desarrolladores de Chrome:
- Haz clic con el botón derecho en un elemento y elige Inspeccionar. Se abrirá el panel Elementos de DevTools.
- En el panel Elementos, busca el panel Accesibilidad. Es posible que esté oculto detrás de un símbolo
». - En el menú desplegable Computed Properties, busca la propiedad Name.
Ya sea que mires un img con texto alt o un input con un label, todas estas situaciones tienen el mismo resultado: asignarle un nombre accesible a un elemento.
Verifica si hay nombres faltantes
Existen diferentes maneras 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 vínculos a explicaciones para 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 | Etiqueta botones y vínculos |
| Vínculos | Etiqueta botones y vínculos |
| Elementos de formulario | Cómo etiquetar elementos del formulario |
Etiqueta documentos y marcos
Cada página debe tener un elemento title que explique brevemente de qué se trata. El elemento title le da a la página su nombre accesible. Cuando un lector de pantalla entra a la página, este es el primer texto que se anuncia.
Por ejemplo, la siguiente página tiene el título "Receta de pan rápido 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 una iframe puede incluir su propio elemento title interno, un lector de pantalla por lo general se detiene en el límite del fotograma y anuncia la función del elemento ("marco") y su nombre accesible, proporcionado por el atributo title. Esto permite al usuario decidir si desea ingresar al fotograma o omitirlo.
Incluir 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 la imagen no se carga, el texto alt se usa como marcador de posición para que los usuarios tengan una idea de lo que la imagen intentaba transmitir.
Escribir un buen texto en alt es una especie de arte, pero hay algunos lineamientos que puedes seguir:
- Determina si la imagen proporciona contenido que, de otro modo, sería difícil obtener a partir de la lectura del texto circundante.
- Si es así, transmite el contenido de la forma más concisa posible.
Si la imagen actúa como decoración y no proporciona ningún contenido útil, puedes asignarle un atributo alt="" vacío para quitarla del árbol de accesibilidad.
Imágenes como vínculos y entradas
Una imagen unida a 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>
De manera similar, 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 se produce 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 incorporaciones como Flash, PDF 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 se coloca dentro del elemento object como texto normal, como "Informe anual" a continuación:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etiqueta botones y 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.
Botones
Un elemento button siempre intenta calcular su nombre accesible con su contenido de texto. En el caso de los botones que no forman parte de un form, escribir una acción clara como el 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 íconos. 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 el editor What You See Is What You Get (WYSIWYG) para darle formato al texto, por lo general, son solo símbolos gráficos:
Cuando trabajas con botones de íconos, puede ser útil asignarles 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 su nombre accesible principalmente de su contenido de texto. Un buen truco a la hora de crear un vínculo es colocar el texto más significativo en el vínculo, en lugar de usar 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 los vínculos de la página. Si los vínculos están llenos de texto de relleno repetitivo, estas combinaciones de teclas 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 lo siguiente:
- 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 se etiqueta correctamente la casilla de verificación, el lector de pantalla puede informar que el elemento tiene un rol de casilla de verificación, se encuentra en un estado de verificación y se llama "Receive promotional offers?", como en el siguiente ejemplo de VoiceOver:
TODO: DevSite: Evaluación de Piensa y verifica