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 escuchas “botón”, “casilla de verificación” o “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 estés viendo 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 | Etiqueta los elementos del formulario |
Etiqueta documentos y marcos
Cada página debe tener un elemento title
que explique de forma breve de qué se trata. El elemento title
le asigna 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 horneado rápido de barras 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 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, que proporciona el atributo title
. Esto permite que el usuario decida si desea ingresar al marco o pasarlo por alto.
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 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 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 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 darle 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 adó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 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 un editor de texto “lo que ves es lo que obtienes” (WYSIWYG) para dar formato al texto suelen ser 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 cuando creas un vínculo es colocar el texto más significativo en el vínculo en sí, en lugar de palabras de relleno como "Aquí" o "Más información".
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 mostrar 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 cual también es útil para 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
for
de la etiqueta y haz referencia alid
del 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