Lección 10El proceso de diseño: ¿cómo encajar la accesibilidad web?
- Noción 67 - Ten en cuenta la distribución de la página
- Noción 68 - Cómo usar el diseño para optimizar el contenido
- Noción 69 - Crea el primer borrador y maqueta
- Noción 70 - ¡La facilidad de uso es clave!
- Noción 71 - Estructura el HTML correctamente
- Noción 72 - Su uso del lenguaje importa
- Noción 73 - Cómo trabajar con contenido visual
- Noción 74 - La importancia de la navegación con teclado
- Noción 75 - Consejos de diseño útiles para todo el mundo
- Noción 76 - Tipos de contenido que hay que evitar a toda costa
- Noción 77 - Comprobar la conformidad con los estándares de accesibilidad y las mejores prácticas
- Noción 78 - Repaso de los conceptos principales
Noción 73
Cómo trabajar con contenido visual
Competencias objetivo
Las imágenes son realmente buenas para transmitir información en un solo vistazo. Pero tenemos que asegurarnos de que su contenido sea accesible.
Usar texto alternativo
Un lector de pantalla utilizará un texto alternativo de una imagen para proporcionar la información principal de la imagen. Si la imagen es puramente decorativa, el texto alternativo debe estar vacío pero presente, para notificar que no se pierde información importante.
Evitar el texto en las imágenes
El texto de una imagen no es accesible ya que el espectador no podría tener acceso a la imagen, o no podría cambiar los parámetros de fuente que podrían ayudar a su lectura (contraste, tamaño, familia de fuentes...). Si la información se puede transmitir con texto, ¡usa texto directamente! Esto Tendrá beneficios para la accesibilidad, y SEO o peso de la página también. Si se utiliza una imagen, aún puedes proporcionar, además del texto alternativo (alt-text), un campo de subtítulo al que se pueda acceder.
A continuación, se muestra un ejemplo de un texto en una imagen que no es accesible de forma predeterminada: un lector de pantalla necesitaría su texto alternativo para identificar su contenido.
[imagen]https://thegoodmanager.eu/wordpress/wp-content/uploads/2022/01/TEXT-image.jpg[/image]
El tamaño importa
Los visitantes tendrán diferentes tamaños de pantalla: ¡en los móviles el espacio disponible es pequeño! Lo mismo ocurre cuando un visitante utiliza la herramienta de lupa. Asegúrate de que tus imágenes sean comprensibles en diferentes tamaños de pantalla. Si tu imagen requiere ser ampliada para ser comprensible, entonces probablemente haya perdido el punto.
Uso de imágenes para la verificación del usuario
Una imagen se puede utilizar como captcha y, por lo tanto, no es accesible en absoluto, de lo contrario ayudará a los robots a pasar la prueba. Cuando utilices imágenes para la verificación, proporciona siempre una alternativa accesible. Podría ser una versión de audio o cualquier otro sistema no gráfico de los pasos de verificación.
A continuación, se muestra un ejemplo de un captcha de audio de Google. Una voz robótica leerá los números que necesitas reconocer. También puedes descargar la secuencia de audio.
Para conocer más…
- Atributo Alt para imágenes en HTML (Alt attribute for images in HTML): https://www.w3schools.com/TAGS/att_img_alt.asp
- Atributo de descripción larga para imágenes en HTML (- Long description attribute for images in HTML): https://www.w3schools.com/tags/att_img_longdesc.asp
- Subtítulos en HTML (Captions in HTML): https://www.w3schools.com/TAGs/tag_caption.asp
- Más información sobre Audio CAPTCHA (More info about Audio CAPTCHA) : https://captcha.com/articles/audio-captcha.html