Para eliminar la semántica nativa de elementos. Por ejemplo una tabla usada para estructurar contenidos o una imagen decorativa que no queramos que sea percibida por los lectores de pantalla.
Indicar cuando un contenido se ha actualizado mediante un aviso al usuario, pero sin interrumpir su actividad dentro del sitio. Regiones activas como widgets de redes sociales.
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.
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.
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:
<img src=»coche.jpg» alt=»»>
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.
Aunque existen muchas ofertas de menús responsive, os quería compartir este que me ha parecido muy completo, fácil de implementar y que, además, cumple con las pautas de accesibilidad AA, tanto para desktop como para móvil.
El recurso original lo podéis encontrar en http://www.smartmenus.org/ pero en la carpeta de recursos de Babel Creativa podéis encontrar una adaptación simplificada muy fácil de integrar.
Podéis acceder a él en esta ruta: @RECURSOS\MENUS\Menú responsive accesible
Las características que cumple son:
Menú basado en listados anidados.
Toggle en el botón del menú en versión responsive.
Adaptativo, manteniendo el cumplimiento de las pautas de accesibilidad:
WAI-ARIA y roles dinámicos.
Foco visible.
Se proporciona acceso a toda la funcionalidad mediante el teclado en desktop y móvil.
Pasos para implementar en el HTML:
Enlace a menu.css
Incluir las siguientes clases / id en el <ul> principal: <ul id=»main-menu» class=»sm menu collapsed» role=»menubar»>
Enlaces a los ficheros js<!–Código JS–> <script src=»../js/jquery-1.11.3.js» type=»text/javascript»></script> <!– SmartMenus jQuery plugin –> <script src=»../js/jquery.smartmenus.js» type=»text/javascript»></script> <script> $(function() { $(‘#main-menu’).smartmenus(); }); </script>
WAI-ARIA es una especificación del W3C, recomendación desde el 20 de marzo de 2014, pensada para hacer más accesible el contenido dinámico y los controles desarrollados con Ajax, HTML, Javascript y sus tecnologías relacionadas. Si todavía no estás al tanto de ello va siendo hora de ponerte las pilas
Utilizamos cookies propias y de terceros para obtener datos estadísticos de la navegación de nuestros usuarios y mejorar nuestros servicios ofreciendo una experiencia de navegación personalizada. Si aceptas o continúas navegando, consideramos que apruebas su uso. Puedes obtener más información sobre nuestra política de cookies.AceptoPolítica de Cookies