Para que un lector de pantalla presente una IU hablada al usuario, los elementos significativos deben tener las etiquetas o las alternativas de texto adecuadas. Una etiqueta o una alternativa de texto le otorga 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 la función del elemento, le brinda 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, un lector de pantalla solo anuncia el rol del elemento. Imagina que intentas navegar por una página y escuchas las palabras "botón", "casilla de verificación" e "imagen" sin ningún contexto adicional. Es por eso que las alternativas de etiquetado y texto son cruciales para una experiencia buena y accesible.
Cómo inspeccionar el nombre de un elemento
Es fácil verificar el nombre de accesibilidad de un elemento usando las Herramientas para desarrolladores de Chrome:
- Haz clic con el botón derecho en un elemento y selecciona Inspeccionar. Se abrirá el panel Elementos de Herramientas para desarrolladores.
- En el panel Elementos, busca el panel de Accesibilidad. Puede estar escondida detrás de un símbolo
». - En el menú desplegable Propiedades computadas, busca la propiedad Nombre.
Ya sea que estés viendo un objeto img con texto alt o un elemento input con un label, todas estas situaciones dan el mismo resultado: le da a un elemento su nombre de accesibilidad.
Cómo buscar 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 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 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 ingresa a la página, este es el primer texto que se anuncia.
Por ejemplo, la siguiente página tiene el título "Receta para hornear rápido en 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>
De manera similar, 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. De esta manera, el usuario puede decidir si desea ingresar al fotograma o omitirlo.
Cómo incluir alternativas de texto para imágenes y objetos
Un img siempre debe estar acompañado de un atributo alt para darle a la imagen su nombre de accesibilidad. 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 puedes seguir algunos lineamientos:
- Determina si la imagen proporciona contenido que, de otro modo, sería difícil de obtener al leer el texto que lo rodea.
- Si es así, transmite el contenido de la manera más breve 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 unida en 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 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 se usan normalmente para incorporaciones como Flash, PDF o ActiveX, también deben contener texto alternativo. Al igual que las imágenes, este texto se muestra si el elemento no se renderiza. El texto alternativo se encuentra dentro del elemento object como texto normal, como "Informe anual", que se muestra a continuación:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etiquetar botones y vínculos
Los botones y vínculos suelen ser fundamentales para la experiencia de un sitio, y es importante que ambos tengan buenos nombres de accesibilidad.
Botones
Un elemento button siempre intenta calcular su nombre de accesibilidad con su contenido de texto. En el caso de los botones que no forman parte de un form, escribir una acción clara, ya que 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 suelen ser solo símbolos gráficos:
Cuando trabajas con botones de íconos, puede ser útil darles un nombre explícito accesible mediante el atributo aria-label. aria-label anula cualquier contenido de texto dentro del botón, lo que te permite describir la acción claramente para 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 de accesibilidad principalmente a partir del contenido de texto. Un buen truco para crear un vínculo es colocar el texto más significativo en el vínculo en sí, en lugar de usar 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 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 elementos de formularios
Hay 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 clics 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>
- También puedes 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 el rol de casilla de verificación, que está marcado y se llama “¿Recibir ofertas promocionales?”, como en el siguiente ejemplo de VoiceOver:
PENDIENTE: DevSite: evaluación de Think and Check