Una página que habla
Marta no ve la pantalla. Usa el móvil con una voz que lee en alto lo que hay en la página.
Si una foto no tiene descripción, la voz dice solo "imagen". Marta no sabe qué foto es.
Una página accesible es una que puede usar todo el mundo. Hoy aprendes a hacerlo.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Accesibilidad | Que una página la pueda usar cualquier persona, también con una discapacidad. | |
| Lector de pantalla | Un programa que lee en alto el contenido de la página. | |
| Texto alternativo | La descripción de una imagen, escrita en palabras. | alt="Equipo de baloncesto" |
| Etiqueta de formulario | El texto que dice qué hay que escribir en un campo. | <label> |
| Foco | El elemento que está seleccionado ahora, por ejemplo con la tecla Tab. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
No es solo para unos pocos
Alguien ciego usa un lector de pantalla. Alguien con una mano rota usa solo el teclado.
Alguien que no distingue el rojo del verde necesita algo más que el color. Una abuela necesita letras grandes.
Y todos hemos mirado el móvil al sol, sin ver nada. Lo accesible ayuda a todo el mundo.
Pruébalo: el texto alternativo
<img src="no-existe.jpg" alt="Equipo de baloncesto del instituto celebrando la victoria">
<p>La imagen de arriba no carga a propósito.</p>
<p>Mira cómo se ve la descripción en su lugar.</p>
Cómo escribir un buen alt
Di lo que se ve y lo que importa. Un buen alt es corto: una frase.
No empieces por "imagen de". El lector ya dice que es una imagen.
Si la imagen solo decora, escribe alt="" vacío. El lector la salta.
Fallos comunes y su arreglo
| Fallo | Quién se pierde | Arreglo |
|---|---|---|
| Imagen sin alt | Quien usa lector de pantalla | Escribir el alt |
| Campo sin etiqueta | Lector de pantalla y quien toca poco | Usar label con for |
| El error solo se marca en rojo | Quien no distingue el rojo | Añadir una frase |
| Letras grises muy claras | Casi todos, al sol | Contraste de 4,5 o más |
| Un botón que solo funciona con ratón | Quien usa el teclado | Usar button y enlaces de verdad |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Etiquetas que se pueden pulsar
La etiqueta label se une a su campo con el mismo nombre. El for de la etiqueta es el id del campo.
El lector de pantalla dice "Tu nombre" al entrar en el campo. Y si pulsas la etiqueta, el cursor salta al campo.
Pruébalo: pulsa una etiqueta
<h1>Apúntate al torneo</h1>
<form>
<p>
<label for="name">Tu nombre</label>
<input id="name" type="text">
</p>
<p>
<label for="team">Tu equipo</label>
<input id="team" type="text">
</p>
<button type="submit">Apuntarme</button>
</form>
Repaso rápido: alt y etiquetas
Inténtalo
Repaso rápido: alt y etiquetas
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.