Diseñar una página accesible

Una página accesible la puede usar todo el mundo: personas que usan un lector de pantalla, que ven mal, que evitan el movimiento en pantalla o que simplemente miran el móvil a pleno sol. LinkHarbor se encarga de muchas cosas automáticamente; otras dependen de ti. Este artículo te muestra en qué fijarte.

#Lo que LinkHarbor hace automáticamente

• Si un visitante ha activado «Reducir movimiento» en su sistema, los vídeos de fondo no se reproducen y se desactivan los efectos de desplazamiento y parallax, así como las animaciones al pasar el ratón
• El bloque «Título» se genera como un encabezado real que los lectores de pantalla usan para orientarse
• Las imágenes de los bloques «Imagen» y «Galería» reciben tu texto alternativo como descripción
• Si no has elegido un color de texto propio para los botones, LinkHarbor elige uno que combine con el color del botón

#Textos alternativos para imágenes

Un texto alternativo describe lo que se ve en una imagen. Los lectores de pantalla lo leen en voz alta, y aparece cuando una imagen no se carga.

Bloque «Imagen»

El campo «Texto alternativo» en el editor del bloque.

Bloque «Galería»

Un «Texto alternativo» de hasta 200 caracteres por imagen.

• Describe el contenido, no el archivo: «Capuchino con arte latte sobre una mesa de madera» en lugar de «IMG_2041»
• En las imágenes con texto, ese texto va en el texto alternativo
• Sé breve: normalmente basta con una frase

Dónde están los campos se explica en Los bloques gratuitos en detalle y Modal informativo, cuenta atrás, galería y más.

#Estructura con títulos

Divide las páginas largas con el bloque «Título» en lugar de con texto grande. Quienes usan un lector de pantalla saltan de título en título y así encuentran rápido lo que buscan, como «Horario» o «Contacto».

#Títulos de enlace claros

• Cada enlace debe entenderse por sí solo: «Carta en PDF» en lugar de «Haz clic aquí»
• Evita títulos idénticos para destinos distintos
• Los emojis al principio de un título se leen en voz alta; úsalos con moderación

Más sobre los enlaces en Añadir, ordenar y personalizar enlaces.

#Contraste y legibilidad

• Asegúrate de que haya suficiente contraste entre el texto y el fondo, sobre todo con colores pastel claros
• Si el texto está sobre una imagen o un vídeo de fondo, usa la «Opacidad de la superposición» del tema para que siga siendo legible
• Nada de texto importante solo dentro de una imagen: los visitantes con lector de pantalla no pueden leerlo
• Elige una fuente fácil de leer y un tamaño de letra que no sea demasiado pequeño para los bloques de texto

Los colores, el fondo y la fuente los defines en el tema; consulta Diseño: colores, fondo y fuente.

#Usa el CSS personalizado con cuidado

Con CSS personalizado puedes cambiar casi todo, también cosas importantes para la accesibilidad. No ocultes los contornos de foco, no reduzcas demasiado el texto y, después de hacer cambios, prueba la página también con el teclado. Consulta CSS personalizado para tu página.

#Pruébalo tú mismo

1. Activa el lector de pantalla de tu móvil (VoiceOver en iPhone, TalkBack en Android) y escucha tu página
2. Aumenta el tamaño del texto en los ajustes del sistema y comprueba que todo sigue siendo legible
3. Mira la página con mucha luz y en modo oscuro