Requisitos de accesibilidad del Kit Digital.
Si cumples con los consejos indispensables e integras nuestro Widget, la plantilla Excel del Informe de Revisión de la Accesibilidad (IRA) que te proponemos te servirá para la justificación.
Ajustes indispensables
1. Todas las páginas tienen que tener un título
Las páginas tienen que tener un título en la sección head, que describa su temática o propósito.
<head> . . <title>Este es el título de mi página</title> . . </head>
2. Idioma predeterminado
Bueno para lectores de pantalla y bueno para motores de búsqueda.
</div> <div><html lang="es"> <head> . .</div> <div>
3. El visitante tiene que poder escalar el contenido
Las personas con baja visión necesitan hacer zoom en el contenido para poder usar la página, no lo debemos bloquear.
El parámetro user-scalable=»no» en el <meta name=»viewport»> no debe usarse ya que evita la escala y el zoom del texto.
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> </div> <div>
4. Debe haber un h1
Se debe informar al visitante del contenido de la página.
<body> <h1>Este es el título</h1> . .
5. Encabezados lógicos
La estructura de encabezados, los h’s, debe seguir una jerarquía lógica. Después de un <h1> debe ir un <h2> y tras este último irá un <h3> y así sucesivamente, no podemos tener un <h3> después del <h1>.
<body> <h1>Este es el título</h1> <p>Párrafo</p> <h2>Subtítulo</h2> <p>Otro párrafo</p> <h2>2º Subtítulo</h2> </body> </div> <div>
6. Enlaces con textos explicativos
Especificar dónde te lleva ese enlace. No usar: “Pincha aquí”, “Ver más”…
</div> <div>Más información sobre el... Leer más sobre cómo ... Compra entradas para ...</div> <div>
7. Las imágenes que son un enlace tienen que tener un texto descriptivo
Si tienes una imágen que es sólo un enlace, como por ejemplo las redes sociales, deben incluir un atributo que explique a dónde lleva el enlace.
</div> <div><a href="https://facebook.com" title="Facebook"> <img src="logo_facebook.png" alt="Ver nuestro Facebook" /> </a></div> <div>
ó
</div> <div> <div><a href="https://facebook.com" aria-label="Ver nuestro Facebook"> <i aria-hidden="true" role="img" /> </a></div> <div>
8. No quitar el marcado del foco
Evita en el CSS quitar el marco de los elementos que reciben el foco con outline: none
MAL
.foco {
outline: none;
}
9. Aumentar hasta el 200% sin que el contenido se solape
Las personas con baja visión necesitan hacer zoom en el contenido para poder usar la página. Si los textos se solapan se hacen imposibles de leer.
10 . Site map
Para que el mapa del sitio esté disponible dentro del sitio, como mínimo cada página que aparece en el mapa del sitio contiene un enlace al mapa del sitio.El mapa del sitio tiene varios propósitos:
- Proporciona una visión general de todo el sitio.
- Ayuda a los usuarios a comprender qué contiene el sitio y cómo está organizado el contenido.
- Ofrece una alternativa a las barras de navegación complejas que pueden ser diferentes en diferentes partes del sitio.
Ajustes realizados por el Widget que utilizamos
- Texto alternativo en las imágenes
- id
- Gestión de destellos
- Personalización de contrastes
- Escalado de contenido
- Navegación por teclado
- Espaciado entre carácteres
- Modo de lectura
- Resalte de enfoque
- Teclado virtual
- Estructura de página
- …
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!