Hacer legible el texto
Sube el contraste del texto principal, olvídate de las letras demasiado pequeñas y comprueba que la página no se rompe al ampliarla.
Guías
Guías prácticas
La mayor parte del trabajo de accesibilidad no requiere a un programador. Basta con saber qué les estorba a las personas y cómo comprobarlo en tu propia página. Aquí reunimos guías para los problemas con los que se encuentra casi cualquier web pequeña, desde un texto demasiado pálido hasta un formulario imposible de rellenar sin ratón.
Cada etiqueta en un campo y cada descripción de una imagen es un pequeño cambio que, para alguien, abre la web entera.
Cómo funciona esta sección: las guías están escritas en términos generales y no dependen de ningún creador de webs ni gestor de contenidos concreto. Los nombres de los ajustes cambian de uno a otro, así que consulta la documentación de tu herramienta; el sentido de cada paso es el mismo.
Guías
Tareas por las que conviene empezar si tu web ya está en marcha y no quieres rehacerla entera.
Describir las imágenes
Da a cada imagen con contenido una descripción breve y deja vacío el texto alternativo de las decorativas para que el lector de pantalla se las salte.
Describir fotos (en ruso)
Ordenar los encabezados
Un único encabezado principal por página, las secciones un nivel por debajo y las subsecciones, otro más. El encabezado se elige por su sentido, no por tener letras grandes.
Recuperar el foco visible
Si al moverte con el tabulador no se ve dónde estás, recupera el recuadro de selección o hazlo más visible.
Poner subtítulos a los vídeos
Empieza por los vídeos que cuentan lo más importante. Los subtítulos no solo ayudan a quien no oye, sino también a quien mira sin sonido.
Catálogo de artículos para lectores en español
Con el tiempo, en esta sección aparecerán artículos propios de Wpget escritos expresamente para la versión en español de esta referencia.
De momento el catálogo está vacío. Iremos añadiendo artículos nuevos a medida que estén listos.
Lo que tenemos previsto tratar
- Cómo escribir los textos de la web de un pequeño negocio en lenguaje claro sin dejar fuera información importante
- Cómo publicar horarios, cartas y folletos de forma que todo el mundo pueda leerlos, también con lector de pantalla
- Cómo organizar una web en varias lenguas para que cada persona encuentre la suya sin perderse
- Qué revisar en la web de una asociación o un club antes de anunciar sus actividades
Normas editoriales
- Los artículos de este catálogo se escriben por separado para cada versión lingüística y no son traducciones.
- Algunos artículos enlazan a sitios de terceros, incluidos servicios de videojuegos; no controlamos su contenido, precios ni condiciones.
- No hacemos sitios web por encargo ni publicamos publicidad de estudios, proveedores de alojamiento o servicios, clasificaciones, precios ni opiniones.
Cómo hacer un formulario de contacto claro
Deja solo los campos necesarios
Pregúntate sin qué datos de verdad no podrías responder. Cada campo de más es otra ocasión de equivocarse y otro motivo para abandonar el formulario.
Pon una etiqueta a cada campo
Cada campo necesita una etiqueta visible asociada a él en el código. El texto gris de ejemplo dentro del campo no cuenta como etiqueta: desaparece al escribir y la persona olvida qué se le pedía.
Indica con palabras los campos obligatorios
Escribe «obligatorio» junto a la etiqueta o explica el símbolo que uses antes del formulario. Un color o un icono sin explicación no lo entiende todo el mundo.
Ejemplo orientativo: «Correo electrónico (obligatorio)» se entiende mejor que un asterisco rojo cuyo significado no se explica en ningún sitio.
Explica el formato de antemano
Si un campo espera los datos de una forma concreta, dilo en la etiqueta o justo debajo, antes de que la persona escriba. Lo ideal es aceptar distintas formas de escribirlo y no obligar a nadie a adivinar.
Haz que los errores se entiendan
El mensaje de error debe decir qué falla y cómo arreglarlo, y aparecer junto al campo. Un simple borde rojo sin texto no le explica nada a quien no distingue los colores o no ve la pantalla.
Prueba el formulario con el teclado
Recorre todos los campos con el tabulador, rellénalos y envía el formulario sin tocar el ratón. El orden de recorrido debe coincidir con el de la pantalla y el foco tiene que verse en todo momento.
Confirma el envío
Después del envío, muestra un mensaje claro de que el mensaje se ha recibido y de qué pasará a continuación. No lo quites a los pocos segundos: puede que alguien necesite tiempo para leerlo.
Te puede interesar
- Herramientas
Cómo revisar tu web por tu cuenta: zoom del navegador, teclado, modo de alto contraste, lector de pantalla integrado, comprobación de colores y validador de código.
- Comparativas
Niveles de conformidad A, AA y AAA; texto alternativo, pie de foto y transcripción; subtítulos, transcripción y lengua de signos, en tablas comparativas.
- Soluciones
Qué hacer si no se ve el foco, el texto no cabe al ampliar, un botón no tiene nombre, los errores del formulario no se entienden o un vídeo no tiene subtítulos.
- Riesgos
Trampas de accesibilidad: captchas imposibles, mensajes que desaparecen, parpadeos, tiempos de espera cortos, documentos escaneados y «superposiciones» que prometen arreglarlo todo.
- Glosario
Glosario de términos: accesibilidad, WCAG, GOST R 52872-2019, contraste, texto alternativo, foco, lector de pantalla, subtítulos y lenguaje sencillo.
Fuentes
- W3C: pautas WCAG 2.2
- GOST R 52872-2019 (norma rusa)
- Materiales editoriales de Wpget
La información se presenta en términos generales y a fecha de elaboración. Las pautas, los navegadores y los hábitos de los lectores cambian poco a poco, así que, ante cualquier duda, consulta las fuentes originales: el texto de las pautas WCAG y la norma rusa vigente GOST R 52872-2019.