Asegurarse de que los vínculos e imágenes sean accesibles
Dos de los componentes más comunes de cualquier página web son los vínculos y las imágenes. Estos elementos tienen un fuerte impacto en la accesibilidad. Garantizar un buen texto alternativo y de vínculo es uno de los primeros pasos que puede realizar para mejorar las páginas para todos los usuarios.
Texto del vínculo
Los hipervínculos son fundamentales para navegar por la Web. Asegurarse de que un lector de pantalla pueda leer correctamente los vínculos permite a todos los usuarios examinar el sitio.
Observe los dos vínculos del texto de ejemplo siguiente:
- "El pingüino pequeño, a veces conocido como 'pingüino del hada', es el pingüino más pequeño del mundo. Haga clic aquí para obtener más información".
- "El pingüino pequeño, a veces conocido como 'pingüino del hada', es el pingüino más pequeño del mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para obtener más información".
Nota:
Los dos ejemplos muestran lo que no debe hacer como desarrollador web.
Aunque estos vínculos pueden parecer buenos para alguien sin discapacidad visual, un lector de pantalla no podrá procesarlos correctamente. Recuerde que los lectores de pantalla leen el texto. Si aparece una dirección URL en el texto, el lector de pantalla leerá la dirección URL. En general, la dirección URL no transmite información significativa y puede molestar. Es posible que haya experimentado este problema si el teléfono le ha leído un mensaje de texto con una dirección URL.
Los lectores de pantalla también tienen pueden leer solo los hipervínculos de una página, de la misma manera que una persona sin discapacidad visual examinaría una página en busca de vínculos. Si el texto del vínculo siempre es "haga clic aquí", el usuario escuchará "haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí..." Ahora, todos los vínculos son indistinguibles entre sí, por lo que genera una experiencia frustrante.
La palabra "clic" también es un problema, porque no todos los usuarios harán clic. Los usuarios de teléfono pulsan, los usuarios del teclado pueden presionar la tecla Entrar o la barra espaciadora, y otros clientes usarán otros medios.
Siempre es necesario usar textos de vínculo que sean significativos. Un texto de vínculo bueno describe brevemente lo que hay en el otro lado del vínculo. En el ejemplo anterior sobre pingüinos pequeños, el vínculo redirige a la página de Wikipedia sobre la especie. La frase pingüinos pequeños sería un texto de vínculo perfecto porque deja claro lo que alguien aprenderá si selecciona el vínculo:
- "El pingüino pequeño, a veces conocido como 'pingüino del hada', es el pingüino más pequeño del mundo".
Nota:
Y como ventaja para garantizar que el sitio sea accesible para todos los usuarios, también ayudará a los motores de búsqueda a examinar el sitio. Los motores de búsqueda usan texto de vínculo para aprender los temas de las páginas. Por lo tanto, usar un buen texto de vínculo ayuda a todos los usuarios.
Atributos ARIA
Imagínese la siguiente página de un producto:
| Producto | Descripción | Ordenar |
|---|---|---|
| Widget | [Description]('#') |
[Order]('#') |
| Superwidget | [Description]('#') |
[Order]('#') |
Se trata de un diseño común para una página que muestra información sobre varios elementos de una tabla, con vínculos a la descripción y el pedido. Duplicar el texto de la descripción y el pedido tiene sentido para alguien que usa un explorador. Sin embargo, una persona que usa un lector de pantalla solo escucharía las palabras descripción y pedido repetidos sin contexto.
Para admitir estos tipos de escenarios, HTML admite un conjunto de atributos conocidos como aplicaciones de Internet enriquecidas y accesibles (ARIA). Puede usar estos atributos para proporcionar más información a los lectores de pantalla.
Por ejemplo, puede usar aria-label para describir un vínculo cuando el formato de la página no se lo permite. La descripción del widget podría establecerse de esta forma:
<a href="#" aria-label="Widget description">description</a>
ARIA puede usarse para muchas más cosas que agregar texto para que los lectores de pantalla lean los vínculos. Puede usarse para describir los roles que determinados elementos desempeñan cuando el código HTML semántico no está disponible. Al crear un árbol, por ejemplo, puede usar roles de ARIA para describir la interfaz a un lector de pantalla:
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Importante
El uso de marcado semántico y texto de vínculo bueno como se describió anteriormente suele sustituir el uso de ARIA. Los exploradores y los lectores de pantalla no son los únicos clientes que un usuario podría usar, y diseñar la página para que funcione bien para todos los clientes y usuarios debe ser el objetivo principal.
Texto alternativo para imágenes
Como regla general, los lectores de pantalla no pueden leer el contenido de una imagen. Aunque algunos podrían usar inteligencia artificial, es posible que los resultados generados no sean precisos contextualmente. Afortunadamente, asegurarse de que las imágenes son accesibles no lleva mucho trabajo; de eso trata el atributo alt. Todas las imágenes significativas deben tener un atributo alt (conocido ocasionalmente como texto alternativo) para describir lo que son o la información que intentan transmitir.
Las imágenes que son puramente decorativas deben tener su atributo alt establecido en una cadena vacía: alt="". Esta configuración evita que los lectores de pantalla anuncien innecesariamente la imagen interior.
Nota:
Como es de esperar, los motores de búsqueda no pueden entender lo que hay en una imagen, ya que se basan en texto alternativo. Por lo tanto, una vez más, asegurarse de que la página es accesible proporciona ventajas.