Daily Archives

Es sin duda una de las búsquedas de moda entre programadores y diseñadores que entre otras cosas, deben cumplir la accesibilidad doble A (AA) en los proyectos que van saliendo mediante del famoso Kit Digital. Para mi también está siendo un reto importante por lo que mientras investigo, voy dejando aquí mi granito de arena a lo  que he encontrado..

Qué es la accesibilidad

La accesibilidad se refiere a la facilidad de uso de un producto, servicio o entorno para todas las personas, independientemente de sus características o habilidades. En el contexto de la tecnología, la accesibilidad se refiere a la capacidad de una página web o aplicación sea accesible y utilizable por el máximo número de personas, independientemente de sus conocimientos, capacidades personales o las características técnicas del dispositivo de acceso empleado.

Algunos ejemplos de consideraciones de accesibilidad incluyen la compatibilidad con tecnologías de asistencia, como lectores de pantalla, y la utilización de diseños y contenidos que sean fáciles de leer y navegar para todos los usuarios.

A nivel internacional, el W3C promueve la progresiva adopción de directrices de accesibilidad en la Web, especialmente a través de su grupo de trabajo Iniciativa para la Accesibilidad Web (WAI).

Los niveles de accesibilidad: criterios de conformidad A, AA y AAA

La accesibilidad web se define según tres criterios de conformidad que establecen la norma WCAG 2.1: A, AA y AAA . En esta norma encontraremos cuatro principios fundamentales de la accesibilidad web que fijaran sus niveles: perceptible, operable, comprensible y robusto.

Los niveles de conformidad A, AA y AAA se refieren a diferentes niveles de exigencia en cuanto al cumplimiento de estos principios. El nivel A es el mínimo exigido, mientras que el nivel AAA es el más exigente y ofrece la mayor accesibilidad para todos los usuarios.

• Nivel «A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1;
• Nivel «Doble-A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1 y 2;
• Nivel «Triple-A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1, 2, y 3.

La administración pública en España, al menos un nivel AA

Para obtener al menos un nivel AA hay que cumplir cosas como: subtítulos para audios emitidos en vivo, posibilidad de visualizar el contenido en orientación horizontal y vertical, cambiar el tamaño del texto hasta en un 200 por ciento sin perder el contenido, los encabezados, las etiquetas o proporcionar sugerencias de corrección ante errores de entrada, entre otros, son imprescindibles para obtener una conformidad AA.

Documentación:

• Guías Prácticas Accesibilidad Gob

Directrices de accesibilidad WCAG 2.1

Las directrices de accesibilidad WCAG 2.1 contemplan múltiples recomendaciones que afectan a variados aspectos de la presentación de la información en una Web. Las directrices básicas de estas recomendaciones se recogen en una lista de referencia rápida que incluye las recomendaciones más importantes:

• Alternativas de texto: ofrezca alternativas de texto para cualquier contenido que no sea texto de forma que pueda ser interpretado del modo que precisen otras personas, tal como tamaño de letra extra grande, braille, texto hablado, lenguaje de signos o un lenguaje más sencillo.
• Contenido alternativo al audio o video: ofrezca alternativas para cualquier información presentada exclusivamente a través de audio o vídeo. En el desarrollo Web, ciertos contenidos como las imágenes o los vídeos disponen de la posibilidad de incluir texto alternativo. En el caso de las imágenes, el atributo alt permite incluir una descripción del contenido de la imagen en modo texto, que los navegadores especialmente adaptados para personas con discapacidades visuales puede leer en voz alta. De igual forma, YouTube permite añadir archivos de subtítulos a los vídeos, de forma que las personas con discapacidad auditiva puedan leer sobreimpreso como texto el contenido de audio de los mismos. Amara.org ofrece una plataforma de uso gratuito muy interesante para la generación de archivos de subtitulado de vídeos, incluso en versiones multi-idioma, lo que permite que este contenido sea accesible para personas que no entienden la lengua empleada en la locución del vídeo.
• Adaptable: se debe crear contenido que pueda ser presentado de formas distintas (por ejemplo en una maquetación más sencilla) sin perder la información o su estructura. Establecer tamaños de fuente relativos permite que los usuarios puedan configurar fácilmente el tamaño de letra con que se sienten más cómodos para la lectura, sin afectar a la presentación de los sitios Web.
• Distinguible: haga más fácil para sus usuarios que vean u oigan el contenido, incluyendo el separar mejor la forma del fondo. En este sentido, ciertas tendencias estéticas que favorecen los tamaños de fuente reducidos o el uso de texto en gris sobre fondos blancos dificulta la lectura por parte de ciertas personas.
• Accesible mediante el teclado: implemente las distintas funcionalidades para que se pueda acceder a ellas desde un teclado. Por ejemplo, los formularios pueden estar preparados para poder saltar de campo a campo mediante la tecla de tabulación, lo que hace más fácil su cumplimentación.
• Suficiente tiempo: deje bastante tiempo para que sus usuarios puedan leer o usar adecuadamente el contenido.
• Ataques: no diseñe contenido de tal forma que pueda ocasionar ataques, especialmente por el uso de ciertos contrastes de color en asociación con efectos de flash y parpadeo rápido de las imágenes.
• Navegabilidad: ofrezca formas de ayudar a sus usuarios a navegar, encontrar el contenido y determinar dónde están dentro de su sitio Web. Los rastros de migas de pan, los URL semánticos, los mapas del sitio, etc. facilitan la navegación de los usuarios.
• Entrada de datos: haga posible que sus usuarios puedan usar distintos tipos de dispositivos de entrada además del teclado.
• Legibilidad: asegúrese de que el contenido de texto es legible y fácilmente comprensible para sus usuarios. Aspectos como el contraste y la posibilidad de variar el tamaño de las fuentes de letra, como ya hemos comentado, favorecen la legibilidad de los textos.
• Predictibilidad: haga que sus páginas Web aparezcan y funcionen de una forma predecible por sus usuarios. Use las convenciones establecidas en su página de inicio también en todas las secciones y páginas internas.
• Autocorrección o ayuda en la entrada de datos: ayude a sus usuarios a evitar y corregir los errores que puedan cometer al interactuar con su página Web, rellenar formularios, seleccionar una opción… También hay funcionalidades que pueden ayudar a los usuarios al autorellenado de formularios cuando se detecta que los valores que esperan ciertos campos ya están disponibles en la memoria del navegador.
• Compatibilidad: optimice la compatibilidad con los navegadores actuales y futuros incluyendo tecnologías de ayuda al usuario.

¿Cómo evalúo el nivel de accesibilidad web?

Hay varias herramientas online para poder verificar de un modo rápido, aunque básico, el grado de adecuación de un sitio Web a las directrices de accesibilidad. Aunque cabe decir que ninguna de estas herramientas son 100% certificables, son orientativas. Nos sirven para saber cuáles serían los aspectos básicos para hacer nuestras páginas más accesibles.

• Test de Accesibilidad Web : https://www.tawdis.net
• HERA: Test de Accesibilidad Web: http://www.sidar.org/#probhera

Recomendaciones básicas de accesibilidad Web

El  W3C nos ofrece diez consejos básicos para crear webs accesibles:

• Textos legibles: Usa tipografías que sean fácilmente legibles con un tamaño superior a los 15px.
• Contenido adecuado, el mismo debe ser escaneable, es decir, que a simple vista se sepa que información voy a encontrar en él.
• Evitar grandes párrafos: Los párrafos no deberían tener más de 5 líneas de longitud.
• Texto resaltados no sólo con color: Si queremos resaltar un texto, no usar sólo el color, ya que personas con daltonismo, por ejemplo, no lo verán correctamente. Prueba con letras más grandes, imágenes, iconos…
• Encabezados bien organizados jerárquicamente. Si vas a utilizar encabezados, que no sean simples textos con clase que alterar su diseño, utilizar correctamente los h1, h2…
• Alt en imágenes y animaciones: usa el atributo «Alt» para describir la función de cada elemento visual.
• Mapas de imagen: emplee mapas de imagen del lado del cliente y texto para las zonas activas.
• Multimedia: proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
• Enlaces con texto con sentido: use anchor text que tenga sentido aun leído fuera de contexto. Por ejemplo, evitar etiquetas como por ejemplo: «pincha aquí», «ver más»…
• Organización de las páginas: use encabezamientos, listas y estructura consistente. Use hojas de estilo CSS para la maquetación y el estilo donde sea posible.
• Figuras y diagramas: descríbalos brevemente en la página o use el atributo longdesc.
• Scripts, applets y plug-ins: ofrezca contenido alternativo si las funcionalidades no son accesibles o no se les puede dar soporte.
• Marcos: use el elemento noframes y títulos descriptivos.
• Tablas: facilite la lectura línea a línea. Resuma.
• Formularios: Debes asegurarte que cada elemento del formulario tenga la etiqueta correcta. Donde debe escribir su nombre, el mismo debe tener correctamente escrito la etiqueta (<label>) «Nombre».
• Revise su trabajo: valide su código en W3C. Use las herramientas, puntos de comprobación y directrices de http://www.w3.org/TR/WCAG21/.

Documentación y guías

• Guías y materiales de ayuda para gestionar la accesibilidad web – Portal Administración Electrónica España
• Listado herramientas para la evaluación de accesibilidad
• Listado