Si nos paramos a analizar una web, nos damos cuenta que realmente siempre tenemos los mismos elementos que se repiten constantemente: textos, enlaces, encabezados, listas, menús, imágenes, vídeos, tablas y formularios.
Pues bien, para mejorar la accesibilidad de tu web simplemente tenemos que tratar a esos elementos de una manera especial, que además suele ser la mejor.
TEXTOS
Lo primero que tenemos hacer es establecer el idioma de la página globalmente a través del atributo lang <html lang="es" dir="LTR"> con ello establecemos el idioma de la página que en nuestro caso es español a continuación le decimos la dirección de lectura del idioma que puede ser LTR (left to right) o RTL (right to left).
Si tenemos partes de la web en otro idioma aplicamos el atributo lang en ese elemento <p lang="en-us">
Para identificar los idiomas principales del mundo consultar el listado de códigos ISO 639-1
A continuación pasaremos al título de la web, el cual contendrá entre 5 y 10 palabras (un total de entre 70 y 80 caracteres), al ser lo primero que se lee cuando usamos un lector de pantalla, no deberemos de hacer miga de pan en él, ya que resulta muy repetitivo.
Con respecto a la descripción decir que deberá estar entre los 150 y 160 caracteres, ya que los buscadores lo suelen restringir a ese numero de caracteres.
Encabezados, es de las etiquetas más importantes en accesibilidad, ya que podemos navegar a través de ellos con un lector de pantalla.
Para facilitar la navegación a gente que use lectores de pantallas vamos a nombrar las partes más importantes de la web con H2. Para que no interfieran en el diseño se usa la técnica de desplazar estos H2 a través de CSS con una clase del tipo .FueraIzq{position:absolute;margin-left:-9000px;}
Hay que usarlos de manera lógica, por ejemplo, no podemos usar un H3 sin tener en la misma página un H2.
Por otro lado tendremos que mejorar el visualizado del texto. Lo primero que tenemos que hacer es usar EM como medida. Pero ¿qué es un EM? No os asustéis, un EM es simplemente un carácter. Si tenemos en cuenta que todos los navegadores muestran por defecto el contenido con la font Times New Roman a un tamaño de 16 píxeles, podemos asegurar que 1 EM = 16 px, a no ser que le digamos lo contrario.
Al usar EM nos aseguramos de que los usuarios pueden aumentar el tamaño del texto sin problemas, también en dispositivos móviles o táctiles.
Para mejorar la lectura deberemos de aumentar el interlineado del texto. Un valor aceptable es line-height = 1.6 (aumentamos el interlineado en 1.6 veces del tamaño que viene por defecto, mas o menos 26 px).
A la hora de resaltar texto usaremos las etiquetas <strong> y <em>, al usar por ejemplo <strong> el lector de pantalla dará una entonación mas potente.
También deberemos asegurarnos de que exite un buen contraste entre el color del texto y el fondo, lo cual va ayudar mucho a personas que tienen mala visibilidad. Para ello podemos ayudarnos de herramientas como Colour Contrast Analyzer o el plugin de Firefox Wcag Contrast Checker.
ENLACES - LINKS
Tenemos que dotarlos de la mayor coherencia que podamos, para ello tenemos que evitar links del tipo "Leer más" y "Pulsa aquí", e indicar hacia donde va el enlace con la etiqueta title.
Debemos también evitar abrir enlaces en nuevas ventanas, ya que se desactiva el botón Back, y es muy problemático para gente que usa lectores de pantallas, si no hay otra opción, siempre advertiremos al usuario indicándolo en la etiqueta title.
Para evitar que nuestra web resulte pesada y repetitiva, si tenemos una sección en la que todos los enlaces abren en nueva pantalla, lo indicamos a través de un texto del tipo -los enlaces de la sección "Noticias" se abren en una nueva ventana- y lo sacamos de la pantalla.
Por último es muy importante añadir clases al pseudoelemento focus para ver dónde está el cursor cuando navegamos con el tabulador. a:focus{oultine:#f00 solid 2px;}
MENÚS
Tienen que funcionar con el Tabulador y con el Javascript desactivado como en los ejemplos de simplyaccesible.com en la sección CSS Dropdown Menus.
IMÁGENES
- Hay que usar la etiqueta alt para que la gente que no las pueda ver se entere de lo que es.
- Si la imagen contiene texto, pondremos el mismo texto en la etiqueta alt.
- Si la imagen contiene un enlace, se explica a dónde va ese enlace.
- Si tenemos una imagen que ya contiene una explicación en el pie de foto, no hay que poner la etiqueta alt, ya que sino lo leería dos veces.
- Si la imagen es puramente decorativa hay que dejar la etiqueta alt vacía alt=""
TABLAS
No podemos dejar TH vacíos y hay que usar las etiquetas:
- SCOPE, indica el sentido que tiene la tabla. Puede tomar los valores row, col, rowgroup y colgroup.
- SUMARY, la usamos para poner una descripción de lo que contiene la tabla, y si por ejemplo contiene links, indicamos a dónde nos llevan.
- CAPTION, es el encabezado.
Si tenemos tablas muy largas o con textos muy largos, el lector de pantalla siempre va a leer la etiqueta scope. Para que no sea tan repetitivo, si el texto es mas grande que 15 caracteres, podemos usar ABBR <th scope="col" abbr="tipo">
Os recomendamos este guía acerca de cómo crear tablas accesibles WCAG
FORMULARIOS
Tienen que ir maquetados como listas <ul> ya que rellenamos una serie de pasos.
Lo primero que tenemos que hacer es asociar cada título con su campo, para ello usaremos la etiqueta <label> para el título del campo y pondremos el mismo valor a los atributos for del label e id del input.
<label for="nombre">Nombre</label><input type="text" id="nombre">
Si hay campos que estén relacionados, como por ejemplo en el típico formulario de información de contacto (nombre, dirección, teléfono) usaremos <legend> para el título y agruparemos los campos con <fieldset>.
Con respecto a indicar qué campos son obligatorios tenemos que tener en cuenta los siguientes factores:
- Evitar indicarlos solamente con color o con formatos como la negrita (los ciegos no lo pueden ver y los lectores de pantalla no los distinguen).
- Notificar al usuario que ese campo es obligatorio por ejemplo con un texto aunque lo saquemos de la pantalla, ya que los lectores de pantalla leen en orden.
- Poner un * después del texto, pero ponerlos grandes para facilitar su visualización a gente que tenga problemas visuales.
TÉCNICAS EN DESUSO
- Hacer una versión solo texto de la web: es muy costoso y ya no es necesario.
- Teclas de acceso: pueden interferir con las del lector de pantalla.
PROGRAMAS Y PLUGINS RECOMENDADOS
t.a.w > Muy recomendable, actualmente el mejor validador de accesibilidad, tiene una versión online, pero recomiendo la versión de escritorio , ya que es mucho mas potente y sencilla.
Fangs Screen Reader Emulator > Extensión para Firefox que renderiza una versión de texto de cómo interpretaría un lector de pantalla nuestra web.
Juicy Studio Accessibility Toolbar > Barra para Firefox con diferentes ayudas centradas en Accesibilidad.
WCAG Contrast checker > Extensión que permite comprobar el grado de cumplimiento de los niveles de contraste, luminosidad y brillo en la combinación de colores de los contenidos textuales en base a los requerimientos de las WCAG 1 y WCAG 2.
Colour Contrast Analyser > Aplicación para PC y MAC que nos ayuda a determinar la legibilidad y el contraste de elementos visuales, como gráficos, textos e indicadores visuales.
Entradas
No hay comentarios:
Publicar un comentario