Directrices de accesibilidad para el contenido en la Web (WCAG 2.1)

Escrito por Sandra López

¿Qué es la accesibilidad?

La accesibilidad web tiene como objetivo lograr que las páginas web sean accesibles y utilizables 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.

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). Este grupo publicó en 1999 la primera versión de su documento Directrices de Accesibilidad del Contenido Web (Web Content Accessibility Guidelines o WCAG) que se han convertido en una referencia internacionalmente aceptada.

La última versión de este documento, las denominadas WCAG 2.1, fueron publicadas en junio de 2018 y en ellas se explica cómo hacer el contenido Web accesible para personas con discapacidades. Estas directrices están dirigidas a los desarrolladores y diseñadores de sitios Web, a los desarrolladores de herramientas de autor para el diseño y programación de sitios Web, a los desarrolladores de herramientas de evaluación de la accesibilidad Web y para cualquiera que necesite un estándar de referencia con el que comprobar la accesibilidad de un determinado contenido en la Web.

Si está interesado en estas recomendaciones, puede acceder a la traducción de las Directrices de Accesibilidad del Contenido Web 2.0 en castellano.

¿Quiénes deben respetar las directrices de accesibilidad?

Las directrices de accesibilidad Web afectan a distintos colectivos relacionados con el desarrollo y la generación de contenidos para la Web:

• Pautas de accesibilidad para el contenido en la Web (WCAG): enfocadas a los webmasters y diseñadores. Indican cómo se deben diseñar y programar los sitios Web de forma que sean fácilmente accesibles por personas con discapacidad o que puedan integrarse con las ayudas técnicas que estas personas necesitan emplear para navegar por la Red.
• Pautas de accesibilidad para Herramientas de autoría Web (ATAG): dirigidas a los programadores y desarrolladores de los programas de diseño y herramientas de programación que usan los autores de páginas Web, para que faciliten la creación de sitios accesibles.
• Pautas de accesibilidad para agentes de usuario (UAAG): dirigidas a los desarrolladores de navegadores, para que estos programas integren las ayudas y funcionalidades necesarias que faciliten el acceso a los contenidos Web por personas con discapacidades.

Lista de referencia rápida de las directrices WCAG

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.

Criterios de cumplimiento de las directrices de accesibilidad

La Iniciativa para la Accesibilidad Web del W3C establece tres niveles de adecuación o cumplimiento de un sitio Web a las directrices y recomendaciones que establecen las pautas WCAG 2.1: nivel A, nivel AA y nivel AAA.

Una vez implementadas por los desarrolladores las recomendaciones WCAG 2.1 en el sitio Web, una empresa o entidad externa debidamente reconocida puede realizar una auditoría y extender el certificado correspondiente que garantiza dicho nivel de cumplimiento.

En España, la Asociación Española de Normalización y Certificación AENOR ha desarrollado una Certificación de Accesibilidad TIC (Accesibilidad Web) para que las organizaciones que desean avanzar en el ámbito de la gestión de la accesibilidad puedan contar con una marca que acredite su compromiso social: la Marca N de Accesibilidad TIC.

La Certificación de Accesibilidad Web de AENOR sigue las pautas de accesibilidad de la WAI (Web Accesibility Initiative) que han sido incorporadas a la Norma UNE 139803 de «Requisitos de accesibilidad para contenidos Web». En función de dichas pautas AENOR reconoce los niveles de conformidad A, AA y AAA, a pesar de lo cual la certificación de AENOR sólo admite los niveles de conformidad AA y AAA. Además de cubrir la mayoría de las discapacidades y las necesidades de las personas de edad avanzada, la certificación de AENOR indica cuáles son las características de los contenidos Web para ser usados por la mayor parte de estas personas.

El nivel de adecuación habitualmente exigido (es un objetivo que todos los sitios Web de administraciones públicas cumplan con este mínimo) es el nivel AA ya que, según la propia WAI reconoce, el nivel máximo AAA no es recomendable pues muchos contenidos no pueden adecuarse para que cumplan con este nivel de certificación de la accesibilidad.

Las pautas de accesibilidad, una exigencia legal pendiente de aplicación

Las principales leyes españolas relacionadas con la progresiva implementación y adecuación de los contenidos digitales a las pautas de accesibilidad son las siguientes:

• Ley 34/2002, de 11 de julio de 2002, de Servicios de la Sociedad de la Información y Comercio Electrónico (LSSICIE).
• Ley 51/2003, de 2 de diciembre de 2003, de Igualdad de Oportunidades, No Discriminación y Accesibilidad Universal de las personas con discapacidad (LIONDAU).
• Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social.
• Ley 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información (MISI).

Beneficios de respetar las recomendaciones de accesibilidad

• Éticos: diseñar sitios Web accesibles es respetar el derecho de todas las personas a disfrutar de igualdad de oportunidades y acceso a la información.
• Sociales: un sitio Web accesible podrá ser visitado por usuarios con discapacidades o necesidades específicas, con conexiones lentas o equipamiento informático obsoleto. En España, un 9 por 100 de personas tienen algún tipo de discapacidad y alrededor del 21 por 100 de toda la población es mayor de 60 años. Esto significa que con un sitio accesible, su Web puede llegar hasta a un 30 por 100 más de personas.
• Económicas: más usuarios significan más ventas. Montar un sitio Web implica tiempo y dinero y si el potencial cliente que lo visita se encuentra con problemas para acceder a la información (productos) es muy probable que deje de visitarlo. Además, ciertos segmentos de población con necesidades específicas o mayores de 60 años cuentan con una renta disponible que los convierte en un público muy atractivo.
• Compatibilidad: al respetar los estándares Web y separar el contenido del diseño (hojas de estilo CSS), los sitios Web accesibles son más compatibles con una mayor variedad de terminales de sobremesa, móviles y resoluciones de pantalla.
• Mejora en los tiempos de descarga: la maquetación con hojas de estilo CSS aligera el peso total de la página y hace el proceso de descarga y presentación del contenido mucho más eficiente que el de las páginas maquetadas mediante tablas o con la definición de estilos incluida en HTML.
• Ahorro en el uso de ancho de banda: al emplear hojas de estilo CSS, el tamaño de los archivos puede reducirse hasta a la mitad, con el consiguiente ahorro de ancho de banda y de energía.
• Mejora en el posicionamiento: el uso de hojas de estilo CSS permite situar el contenido más importante de la página entre los primeros elementos a descargar. Adicionalmente, la maquetación con estilos CSS mejora el ratio código/texto de la página. Además, desde la actualización del algoritmo Google Caffeine, la velocidad de descarga de los archivos se pondera con un mayor peso en el cálculo de relevancia. Muchas de las recomendaciones de accesibilidad mejoran igualmente la relevancia de la página, como emplear los atributos alt y title en imágenes y enlaces o la de emplear texto descriptivo en los enlaces.
• Mejora en el nivel de popularidad y autoridad: alcanzar un cierto nivel de certificación de accesibilidad puede conllevar que nuestra Web aparezca listada en algunos sitios Web de alta credibilidad (TrustRank). Esto podría implicar una autoridad de dominio más alta.
• Legales: en algunos países, ciertos tipos de sitios Web deben cumplir por ley con los requisitos de la certificación de accesibilidad de un cierto nivel, generalmente la doble AA.
• Responsabilidad social corporativa: incluir requisitos de usabilidad a la hora de solicitar el diseño de un nuevo sitio Web significa apostar por una mayor responsabilidad social en la propia cultura de la empresa.

Herramientas de comprobación de la accesibilidad Web

Hay varias herramientas online a nuestra disposición 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 ninguna de estas herramientas nos sirve para poder exhibir una marca de cumplimiento de un cierto nivel de accesibilidad en nuestro sitio Web, sí que revelan cuáles serían los aspectos básicos sobre los que deberíamos trabajar para hacer nuestras páginas más accesibles.

Si quieres conseguir que tu web sea completamente accesible y conseguir así el certificado de accesibilidad que acredite el cumplimiento de estas directrices, desde Human Level te ofrecemos nuestro servicio de auditoría de accesibilidad web.

Test de Accesibilidad Web

El Test de Accesibilidad Web (TAW) es una herramienta desarrollada por la Fundación CTIC que permite comprobar de forma automática distintos aspectos de las accesibilidad Web. La herramienta puede funcionar directamente online o bien podemos descargar de forma gratuita una aplicación de escritorio para emplearla en nuestro entorno de trabajo o desarrollo.

Esta herramienta puede identificar los principales problemas de accesibilidad de prioridad 1, 2 y 3 encontrados en un sitio Web de acuerdo con la versión 2.0 de las directrices WCAG.

TAW es capaz de identificar el cumplimiento de las pautas con un total de 65 puntos de verificación que divide en las tres prioridades mencionadas. Tras introducir el URL de la página que deseamos comprobar, la herramienta genera un informe que envía al mail que le facilitemos en el que presenta el resultado del análisis con puntos para comprobar identificados como pertenecientes al tipo 1, 2 y 3 y recomendaciones adicionales de comprobación que deben ser llevadas a cabo de forma manual.

La herramienta TAW está disponible en la Web https://www.tawdis.net

HERA: Test de Accesibilidad Web

HERA es una utilidad para revisar la accesibilidad de las páginas Web de acuerdo con las recomendaciones de las directrices WCAG 1.0. HERA realiza un análisis automático de la página e informa si se encuentran errores (detectables en forma automática) y qué puntos de verificación de las pautas deben ser revisados manualmente.

Al igual que con la herramienta TAW, la revisión manual es imprescindible para comprobar realmente si la página es accesible. Para poder llevar a cabo esta verificación manual es necesario conocer las directrices de accesibilidad, saber cómo utilizan los usuarios las ayudas técnicas y tener alguna experiencia en diseño y desarrollo de páginas Web.

También está disponible una versión evolucionada de HERA-FFX que funciona como extensión del navegador Firefox.

Recomendaciones básicas de accesibilidad Web

El World Wide Web Consortium (W3C) ha recogido en su Guía breve para crear sitios web accesibles, diez consejos básicos para crear sitios Web accesibles:

• Imágenes y animaciones: use 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 de hipertexto: use texto que tenga sentido aun leído fuera de contexto. Por ejemplo, evite «Clic aquí».
• 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.
• Revise su trabajo: valide su código en W3C. Use las herramientas, puntos de comprobación y directrices de https://www.w3.org/TR/WCAG21/

Atención: esta guía recopila únicamente consejos de accesibilidad básicos, pero no garantiza que con su cumplimiento se alcance algún nivel de adecuación.

Referencias adicionales sobre accesibilidad web

• Referencia rápida de las directrices WCAG 2
• Guía de referencia rápida sobre accesibilidad de la Fundación SIDAR
• Guía de validación de accesibilidad Web
• Fundamentos de accesibilidad para desarrolladores (Google)
• Herramienta de validación de accesiblidad Web (WAVE)
• Herramienta de validación Total Validator
• Requisitos de accesibilidad Web de la Comisión Europea