Las Pautas de Accesibilidad son las establecidas por las Web Accessibility Initiative (WAI), perteneciente al World Wide Web Consortium (W3C). Siguiendo las recomendación de las normas Web Content Accessibility Guidelines 2.0 (WCAG 2.0).
Código HTML 5 valido W3C
Para cumplir con las exigencias de validación de código html usado en el desarrollo se ha optado por usar este estándar que permite la utilización de elementos de marcado adecuados a las necesidades de estructuración de los contenidos que conforman el sitio web a la par que es aceptado por todos los navegadores de sobremesa disponibles en el mercado y por las herramientas de apoyo utilizados por personas con problemas de accesibilidad.
Hojas de estilo CSS no intrusivas
Un punto importante para el desarrollo de páginas web accesibles es la separación de la capa de contenidos de la capa de presentación, para lograr esto usamos hojas de estilos que nos permiten definir toda la presentación visual. Estas hojas de estilos están validadas para evitar el uso de definiciones incorrectas que al generar errores de presentación pudieran afectar a la comprensión del mensaje.
Uso de medidas relativas (em, %) para la definición de tamaños de cajas y texto
Dentro de las definiciones de los estilos se han utilizado medidas relativas para mejorar la gestión de la presentación por parte de herramientas de apoyo para los usuarios, de esta manera todos los elementos se escalan de manera equilibrada en dispositivos que amplíen los contenidos para personas con visibilidad reducida.
Enlaces con títulos definidos y advertencia de cambio de pantalla
Todos los enlaces que se usan en el sitio web disponen de información alternativa mediante el uso del atributo «title», en el que se incluyen textos descriptivos del destino al que se accede mediante el enlace. En aquellos casos en los que el enlace lleva a nuevas ventanas de navegador se usa este recurso para informar de esta acción al usuario.
Imágenes con contenido alternativo definido
Es fundamental para facilitar la accesibilidad a los recursos gráficos presentados en el sitio web que estos dispongan de textos alternativos descriptivos del contenido mostrado en las imágenes. Para evitar problemas con las imágenes usadas como recurso decorativo se gestionan desde las hojas de estilos y no necesitan de este recurso.
Listas de elementos definidas como listas
En los casos en los que se presenten elementos que son susceptibles de agruparse por su entidad o funcionalidad se usan listados mediante código html (uso de etiquetas <ul> o <ol>) facilitando al usuario la comprensión de estos elementos como un bloque compacto compuesto por varios elementos y el acceso ordenado a cada uno de ellos. Podemos destacar el uso de este recurso en el caso de los menús de navegación, que engloban las diferentes categorías de contenidos del sitio web o las secciones principales atendiendo a su funcionalidad.
Encabezados (H1 > H6 ) siguiendo una estructura lógica
La estructuración semántica de los contenidos presentados en la página web es una parte importante para facilitar el acceso a los mismos. Con este recurso mostramos al usuario la estructura de la información presentada, marcando el nivel de importancia de cada bloque de contenido dentro del conjunto presentado y facilitamos la navegación por la misma mediante las herramientas de apoyo.
Visibilidad total del site sin javascript ( excepto bloque de vídeos con alternativa textual )
A excepción de los vídeos presentados en el sitio web todo el contenido de la página es accesible sin necesidad de que el navegador del usuario tenga activado javascript. En el caso de los vídeos se facilita una transcripción textual de los mismos.
Estructura de código simple para mejorar la lectura de los lectores de pantalla.
Se ha evitado un uso estructural complejo que cree dificultades a los usuario de herramientas de apoyo. Para lograr este fin se han usado todas las opciones reseñadas con anterioridad.
Uso optimizado de imágenes
Se hace diferencia entre imagen de contenido y las imágenes de fondo que son meramente decorativas y no añaden información
El trabajo de validación se ha hecho usando las herramientas:
TAW (www.tawdis.net)
TAW es una aplicación que nos permite analizar la accesibilidad de cualquier sitio web. Analiza una página basándose en la WCAG 2.0
En el caso del proyecto se ha realizado una validación nivel AA (automática) y completado por una revisión manual de las páginas
Validador de hojas de estilos
http://jigsaw.w3.org/css-
- Herramienta oficial de la W3C para validar la gramática de las hojas de estilos de una página web.
- Revisión CSS3
Validador de codigo HTML
- Herramienta oficial de la W3C para validar la gramática html de una página web.
- Revisión HTML5
NonVisual desktop Access (NVDA)
Herramienta de lectura de pantalla libre
Se ha usado para verificar la lectura del site usando tecnologías de lectura de pantalla.