10 criterios fundamentales a cumplir para crear una web accesible

1. ESTÁNDARES Y SEMÁNTICA APROPIADOS

Hay que maquetar los elementos siguiendo un etiquetado válido y una semántica correcta. Maximizaremos la compatibilidad con las aplicaciones de usuario y obtendremos un código robusto.

No hagas de un span un botón pudiendo incluir un button o un input type=”button”. Evitarás tener que forzar el foco y describir la semántica del elemento.
EVITAR:

<span tabindex=”0” role=”button”> </span>

USO APROPIADO:

<button></button>

<input type=”button”>

2. ACCESIBLE MEDIANTE TECLADO

El sitio debe ser accesible mediante el teclado. El usuario debe poder tabular entre enlaces e inputs.

¿Qué hacemos si un elemento no adquiere el foco de manera natural?

Podemos forzarlo incluyendo el atributo tabindex=”0″, directamente en el código o dinámicamente.
Ejemplo de un foco forzado con tabindex:

<span tabindex=”0” role=”button”> Cerrar menú </span>

3. ORDEN DEL FOCO

El foco debe mantener un orden coherente cuando tabulamos por sus enlaces e inputs. El orden es de izquierda a derecha y de arriba hacia abajo.

Para no tener que forzar el orden natural se debe maquetar con coherencia organizando los elementos en el html en el mismo orden en el que se van a tabular.

4.VISIBILIDAD DE FOCO

El foco debe ser visible.

Incluir en la hoja de estilos la clase: focus para hacer visibles enlaces e inputs.
Ejemplo muy visual de esta pauta: https://www.gov.uk/

5. PLAY / PAUSE

Todo el contenido dinámico debe poder pararse. Hay que incluir un play / pause en slider, carruseles o contenido multimedia. No olvidemos que esos botones deben poder activarse o desactivarse con teclado y adquirir el foco.

6. DESCRIBIR IMÁGENES... O NO

Es bien sabido que las imágenes en una web deben contener una etiqueta alt descriptiva pero, si dicha imagen tiene una finalidad puramente decorativa, no tiene por qué describirse y será ignorada por los lectores de pantalla . En este caso la etiqueta alt se mantendría, pero vacía.

Ejemplo:

7. NUEVA VENTANA

Si una página o un documento se abre en una nueva ventana hay que indicarlo, o con texto, o visualmente con un icono y un alt.

Ejemplo con texto:

<a href=””>

Ver enlace (Nueva ventana)

</a>

Ejemplo con imagen:

<a href=””>

Ver enlace <img src=”nueva.png” alt=”Nueva ventana” />

</a>

8. FORMATO DE UN FICHERO

Es importante informar adecuadamente sobre los ficheros alojados en el portal. Indicar el formato, el tamaño y si se va abrir en una ventana nueva.

Se debe incluir como texto y visible o con imágenes en el alt. Evitar dar la información únicamente en el title.

También deberíamos indicar un enlace a un software gratuito que permita visualizar los archivos (por ejemplo Adobe Reader para formatos PDF). Podemos añadirlo en la misma página donde se descargan los documentos o en la sección de accesibilidad.

Ejemplo:

Nombre del fichero. Formato PDF, 161 KB (Nueva ventana)

9. OCULTAR CON CSS

Usar display y visibility en la clase para ocultar visualmente y a los lectores de pantalla.

.none{

display:none;
visibility:hidden;

}

Ocultar desplazando el elemento fuera de pantalla para ocultar visualmente pero NO a los lectores de pantalla.

Ejemplo:

.oculto {

clear: none !important;
float: none !important;
font-size: 0em;
left: -999999px !important;
line-height: 0px;
margin: 0px !important;
padding: 0px !important;
position: fixed !important;
width: 100%;

}

Ejemplo con la clase de Bootstrap

.sr_only {

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

10. LABEL O TITLE

Relacionar label y su campo mediante for e id.

Si no existen labels, sustituirlo por un atributo title descriptivo dentro del campo.
Ejemplo:

<select title=”Idiomas”></select>