Qué es una página accesible
Una página accesible es una página que puede usar cualquiera, también quien no ve la pantalla o no puede usar el ratón. Comprobarlo es parte de acabar bien un sitio.
Piensa en una persona que escucha tu página con un lector de pantalla, un programa que lee en voz alta. Si falta una descripción, ese hueco es un silencio.
Al final de esta lección
Nota
Puedo comprobar que una página funciona para todo el mundo.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Accesibilidad | que una página la pueda usar cualquier persona | |
| Lector de pantalla | un programa que lee la página en voz alta | |
| Texto alternativo | la descripción de una imagen, en el atributo alt | alt="Un pan de masa madre" |
| Encabezado | un título de la página, de h1 a h6 | |
| Etiqueta HTML | una marca entre ángulos que da sentido al contenido | <h1> |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cada imagen necesita un texto alternativo
Una imagen no dice nada a un lector de pantalla. Por eso lleva un atributo alt con una descripción corta.
El texto alternativo también aparece cuando la imagen no carga. Una imagen de adorno puede llevar alt="", vacío, para que el lector la salte.
Ejemplo resuelto: buenos y malos textos alternativos
| Imagen | alt malo | alt bueno |
|---|---|---|
| Foto de un pan | imagen1 | Un pan de masa madre recién hecho |
| Logo de la tienda | logo | Logotipo de la panadería Brillo |
| Línea decorativa | (falta) | (vacío a propósito) |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cuenta las imágenes de la portada
curl -s http://web/ | grep -c '<img'Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Los encabezados dan el esquema de la página
Un lector de pantalla puede saltar de título en título, igual que tú miras los titulares de un periódico. Por eso los títulos deben tener orden.
Una página tiene un solo h1, el título principal. Después vienen los h2, y bajo cada h2 los h3. No se salta ningún nivel hacia abajo.
Ejemplo resuelto: esquemas buenos y malos
| Esquema | Niveles | ¿Es bueno? |
|---|---|---|
| Título, dos apartados, un subapartado | 1, 2, 2, 3 | Sí |
| Dos títulos principales | 1, 1, 2 | No, solo puede haber un h1 |
| Salto de h2 a h4 | 1, 2, 4 | No, falta el nivel 3 |
| Empieza por h2 | 2, 3 | No, falta el h1 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cuenta los títulos principales de la portada
curl -s http://web/ | grep -c '<h1>'Se muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Un error frecuente
Advertencia
Mucha gente cree que la accesibilidad solo importa a las personas ciegas. No es así. Ayuda a quien tiene un brazo escayolado, a quien ve mal por el sol y a quien mira un vídeo sin sonido.
Se prueba con herramientas y con personas
Un programa encuentra fallos fáciles de contar, como imágenes sin alt. Pero solo una persona sabe si la descripción tiene sentido.
Por eso se mezclan las dos pruebas. Primero revisas con un programa. Después navegas con el teclado y escuchas con un lector.
Una lista de comprobación
| Qué compruebas | Quién lo comprueba | Cómo |
|---|---|---|
| Todas las imágenes tienen alt | Un programa | Contar etiquetas |
| Los encabezados van en orden | Un programa | Leer los niveles |
| El alt tiene sentido | Una persona | Leerlo con atención |
| Se puede usar sin ratón | Una persona | Navegar con el teclado |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Para ir más lejos: el idioma
Un lector de pantalla necesita saber en qué idioma está la página. Busca el atributo lang de la etiqueta html.
Escribe qué pasaría si una página en español no lo tuviera. Después añade una función que lo compruebe.