Qué es el diseño accesible en la web
El diseño accesible hace que una página funcione para personas con necesidades distintas: poca vista, un lector de pantalla, solo teclado o un móvil pequeño. Quien lo practica comprueba cosas concretas: contraste, textos alternativos, etiquetas y foco.
Una página accesible la usa más gente, y también es más cómoda para quien tiene prisa o mucho sol en la pantalla.
Al terminar esta lección
Nota
Puedo comprobar que una página funciona para personas con necesidades distintas.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Accesibilidad | que la usen personas con necesidades distintas | |
| Contraste | cuánto se distingue el texto del fondo | |
| Texto alternativo | palabras que sustituyen a una imagen que no se ve | |
| Etiqueta | el nombre de una casilla de un formulario | Código postal |
| Foco | el elemento que recibe las teclas en ese momento | |
| Lector de pantalla | un programa que lee la página en voz alta |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
El contraste mide cuánto se lee el texto
El contraste es la diferencia entre el color del texto y el color del fondo. Se mide con una razón que va de 1, colores iguales, a 21, negro sobre blanco.
La pauta habitual pide una razón de 4,5 o más para el texto normal. Para el texto grande pide 3 o más. Un gris claro sobre blanco se lee mal, sobre todo con sol.
Ejemplo resuelto: contraste de un gris sobre blanco
| Paso | Gris 999999 sobre blanco |
|---|---|
| 1. Cada canal pasa a una escala de 0 a 1 | 153 entre 255 da 0,6 |
| 2. Se corrige el canal | 0,6 pasa a 0,3186 |
| 3. Se mide la luz del gris | Los tres canales pesan igual y suman 0,3186 |
| 4. La luz del blanco es 1 | Mayor 1 y menor 0,3186 |
| 5. Razón = (1 + 0,05) entre (0,3186 + 0,05) | 1,05 entre 0,3686 da 2,85 |
| 6. Se compara con 4,5 | 2,85 es menos de 4,5, no se lee bien |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Las imágenes y las casillas necesitan palabras
Un texto alternativo es una frase en la imagen, alt="Tetera azul", que un lector de pantalla lee en voz alta. Sin ella, la imagen es un hueco.
Una etiqueta es el nombre de una casilla. Un placeholder desaparece al escribir y no siempre lo lee el lector de pantalla. La etiqueta se queda y sirve a todos.
El foco muestra dónde está el teclado
Quien no puede usar un ratón recorre la página con la tecla Tab. El foco es el elemento que recibe las teclas, y la página lo marca con un contorno.
Si una regla de estilo quita ese contorno, con outline: none, la persona pierde el sitio. Si quitas el contorno, pon otro en su lugar.
Un error frecuente
Advertencia
Mucha gente cree que la accesibilidad es solo para personas con una discapacidad. No es así: sirve también a quien va con prisa, con sol en la pantalla o con una mano ocupada. Un buen contraste ayuda a todas las personas.
Mirar la página con estos cuatro puntos
La tienda del laboratorio tiene fallos de los cuatro tipos. El primer comando mide el contraste de cada pareja de colores de la hoja de estilo. Los otros tres solo cuentan líneas del código de la página.
El guion escribe palabras en inglés: on, ratio, too low y enough. Aquí solo miras: arreglar la página es la tarea del laboratorio.
Medir el contraste de la hoja de estilo
docker exec jupyter python3 steps/contrast.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Buscar la regla que quita el contorno
docker exec jupyter grep -n "outline" shop/style.cssSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Contar las líneas con una imagen
docker exec jupyter grep -c "<img" shop/index.htmlSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Contar las líneas con texto alternativo
docker exec jupyter grep -c "alt=" shop/index.htmlSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Ejemplo resuelto: lo que dicen los comandos
| Comando | Qué escribe | Qué significa |
|---|---|---|
| contrast.py | body ... ratio 2.85 too low | El texto normal, gris sobre blanco, no se lee bien |
| grep -n outline | 30: outline: none; | La línea 30 quita el contorno del foco |
| grep -c "<img" | 4 | Cuatro líneas de la página llevan una imagen |
| grep -c "alt=" | 1 | Solo una línea tiene texto alternativo |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.