Sin resumen de edición |
|||
| Línea 76: | Línea 76: | ||
==== Importancia de cumplir el criterio ==== | ==== Importancia de cumplir el criterio ==== | ||
<span class="wcag-info-criterio"> | <span class="wcag-info-criterio"> | ||
Si una persona no puede ver la página, un lector de pantalla solo leerá lo que esté escrito en el código. Por ejemplo, un botón con un icono de carrito solo funcionará si tiene un texto alternativo como "Botón Comprar". | Si una persona no puede ver la página, un lector de pantalla solo leerá lo que esté escrito en el código. | ||
Por ejemplo, un botón con un icono de carrito solo funcionará si tiene un texto alternativo como "Botón Comprar". | |||
El texto alternativo funciona como los ojos del lector de pantalla y debe describir la información o función de manera clara. | El texto alternativo funciona como los ojos del lector de pantalla y debe describir la información o función de manera clara. | ||
</span> | </span> | ||
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Personas con baja visión – Barrera moderada
Personas con discapacidad cognitiva – Barrera leve
Todo contenido que no sea texto (como imágenes, gráficos o iconos) debe tener un texto que explique su información o función. Esto permite que cualquier persona pueda entenderlo, incluso si no puede verlo.
Hacer que toda la información sea comprensible para personas que usan lectores de pantalla o tecnologías de apoyo, transformando el contenido visual en voz, braille o texto ampliado.
Si una persona no puede ver la página, un lector de pantalla solo leerá lo que esté escrito en el código.
Por ejemplo, un botón con un icono de carrito solo funcionará si tiene un texto alternativo como "Botón Comprar".
El texto alternativo funciona como los ojos del lector de pantalla y debe describir la información o función de manera clara.
alt para describir la imagen o su función. * **Imágenes decorativas:** usar alt="" o CSS, para que los lectores de pantalla las ignoren. * **Botones y formularios:** los elementos interactivos deben tener nombres claros que expliquen su función. * **Contenido complejo:** diagramas o mapas necesitan un texto largo que explique toda la información, mediante un enlace cercano al contenido. * Using alt attributes on img elements
ELIMINAR
El propósito principal de este criterio es asegurar que la información sea **perceptible** por todas las personas, sin importar cómo accedan a la página [4].
Queremos que el contenido no textual pueda ser "traducido" por el software (como un lector de pantalla) a otros formatos que la persona necesite, ya sea voz, braille, o texto ampliado [3]. Si la información se ofrece solo visualmente, una persona ciega o con baja visión se perdería ese contenido por completo [4].
Este es uno de los requisitos más importantes de la accesibilidad porque afecta a la capacidad de las personas para comprender y operar el contenido.
El texto alternativo actúa como **los ojos** para el lector de pantalla [4]. Debe ser una descripción concisa que entregue la **misma información** o tenga el **mismo propósito** que el elemento visual.
Por ejemplo:
Para proporcionar estas alternativas textuales, se utilizan diferentes técnicas de implementación:
alt para ofrecer una descripción corta que transmita la misma información o propósito que el contenido visual [6, 7]. * Using alt attributes on img elements (en inglés)
alt="" vacío, o bien implementarse mediante CSS, para que los lectores de pantalla la ignoren y no molesten al usuario con información irrelevante [6, 8, 9].Si tiene dudas sobre cómo describir correctamente una imagen, puede consultar guías especializadas para generar textos alternativos adecuados. Por ejemplo, Olga Carreras ha desarrollado una guía y un mapa de decisión para ayudar en este proceso [8, 12].
Herramientas como la **Web Developer Toolbar** permiten revisar la página para:
Nombre de la herramienta: Web Developer Toolbar
1. Seleccionar “Images – Outline images without alt attributes” y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo “alt”.
2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.
Se listan diferentes ejemplos
Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido
alt="Atributo alt con un texto descriptivo y adecuado a la imagen"
Exemple NO accesible 1
Falta etiqueta alt en la imagen
alt=""
Exemple NO accesible 2
El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen
alt=""
En esta imagen se puede observar como correctamente hay un atributo alt
{{sust:discutido}}
<ref>Plantilla:Cita web</ref>
