Hacía aproximadamente un año y medio que no se publicaba nada nuevo en las Guías Prácticas para Profesionales Web. Ya iba siendo hora y, esta vez, nos toca ponernos un poco al día y hablar de los checklists (puntos de verificación) de las recientes WCAG 2.0.
Notas importantes:
- El siguiente contenido no son las Web Content Accessibility Guidelines (WCAG) 2.0. Es una simple lista que presenta los principios y técnicas de las WCAG 2.0 en un formato más amigable y comprensible. El lenguaje utilizado ha sido modificado y simplificado de manera significativa respecto a la especificación oficial WCAG 2.0 para permitir comprobar y verificar las páginas web de una forma más sencilla. Si bien esta lista puede resultar muy útil para comprobar la accesibilidad y conformidad con respecto a las WCAG, utilice la documentación oficial para verificar la conformidad real.
- Si ya está acostumbrado a las anteriores Pautas de Accesibilidad al Contenido Web (recomendación del 5 de mayo de 1999), puede comparar los puntos de verificación de WCAG 1.0 con los de WCAG 2.0 (en inglés)
- Hasta que la traducción española oficial de las Pautas de Accesibilidad al Contenido Web 2.0 esté disponible (la única disponible en el momento de escribir este artículo es una obsoleta traducción del Borrador de Trabajo del W3C del 30 de julio de 2004), las referencias se enlazarán a la correspondiente especificación en inglés.
- Este documento, en constante mejora y revisión, es una traducción libre, ligeramente modificada y autorizada del publicado en inglés bajo el título WCAG 2.0 Checklist, propiedad de WebAIM (Web Accessibility in Mind).
- Se permite la reproducción de este artículo citando a los autores y enlazando a sus correspondientes versiones originales (en ambos casos, tanto de la versión original como de la traducida).
- Si encuentra algún fallo (algo bastante posible), estaría muy agradecido de que me lo comunicara. Espero que les sea de utilidad.
Principios de fundamentales de accesibilidad (sumario)
Las WCAG 2.0, recomendación oficial desde el 11 de diciembre de 2008, como comentábamos hace mucho tiempo atrás, se organizan en 4 principios fundamentales para la accesibilidad del contenido:
En total conforman 12 pautas o directrices (guidelines); los dos primeros principios tienen cuatro pautas asociadas, el tercero tiene tres y el último una pauta. Estas pautas proporcionan los objetivos básicos para hacer el contenido accesible, y sirven para comprender los criterios de éxito e implementarlos (Olga Carreras). Se han definido 60 criterios de éxito o puntos de comprobación que definen el nivel de accesibilidad (A, AA o AAA).
Perceptible
El contenido web debe estar disponible (ser perceptible) para los sentidos - vista, audición, y/o tacto.
Pauta 1.1. Alternativas textuales. Ofrezca alternativas en forma de texto para todo el contenido no textual.
| Criterios de éxito |
Nivel |
Recomendaciones |
| 1.1.1 Contenido no textual |
A |
- Todas las imágenes, botones de imagen de los formularios y las zonas activas de los mapas de imagen, tendrán un texto alternativo adecuado.
- Las imágenes que no transmitan contenidos, sean decorativas o con el contenido ya presente como texto se ofrecerán con el texto alternativo vacío (
alt="") o aplicadas como fondos de imagen CSS. Todas las imágenes enlazadas contarán con un texto descriptivo alternativo.
- El contenido equivalente alternativo para las imágenes complejas se ofrecerá en una página (enlazada o referenciada mediante
longdesc) aparte.
- Los botones de los formularios tendrán nombres (
value) descriptivos.
- Los campos (
inputs) de los formularios tendrán etiquetas de texto (label) asociadas o, si éstas no pueden utilizarse, un título (title) descriptivo.
- Los elementos multimedia incrustados (embedded) se identificarán mediante textos accesibles.
- Los marcos (frames) tendrán un título apropiado.
|
Pauta 1.2. Contenido dependiente del tiempo: ofrezca alternativas para los contenidos que dependan del tiempo.
Nota: si el audio o vídeo ha sido designado como una alternativa al contenido web (por ejemplo, una versión sonora o en lengua de signos de la página web), entonces, el contenido web por sí mismo funciona como la alternativa.
| Criterios de éxito |
Nivel |
Recomendaciones |
| 1.2.1 Sólo audio y sólo vídeo pregrabado |
A |
- Se ofrecerá una transcripción descriptiva (incluyendo todas las pistas e indicadores visuales y auditivos) para el audio grabado (no en directo) basado en web (podcast de audio, archivos MP3, etc.)
- Se ofrecerá una descripción auditiva o textual para los vídeos grabados (no en directo) sin audio basados en web (por ejemplo, vídeos que no incluyen pistas de audio)
|
| 1.2.2 Subtítulos (Pregrabados) |
A |
- Se ofrecerán subtítulos para los vídeos grabados (no en directo) basados en web (vídeos de YouTube, etc.)
|
| 1.2.3 Audio descripciones o Contenidos “media” alternativos (Pregrabados) |
A |
- Se ofrecerá una transcripción O audio descripción de los vídeos basados en web grabados (no en directo)
|
| 1.2.4 Subtitulado (En directo) |
AA |
- Se ofrecerán subtítulos sincronizados con el audio para todo el contenido multimedia ofrecido en directo (emisiones sólo audio, web cast, videoconferencias, animaciones Flash, etc.)
|
| 1.2.5 Audio descripción (Pregrabado) |
AA |
- Se ofrecerán audio descripciones para todo el contenido de vídeo. Nota: sólo será necesario si el vídeo transmite contenido visual que no está disponible por defecto en la pista de audio.
|
| 1.2.6 Lengua de signos (Pregrabada) |
AAA |
- Se ofrecerá un vídeo en lengua de signos para todo el contenido “media” que contenga audio.
|
| 1.2.7 Audio descripción extendida (Pregrabada) |
AAA |
- Cuando una pista de audio descripción no se pueda añadir al vídeo debido a la sincronización del audio (por ejemplo, no existen pausas en el audio), se proporcionarán una versión alternativa del vídeo con pausas que permitan las descripciones de audio.
|
| 1.2.8 Alternativas “media” (Pregrabado) |
AAA |
- Se ofrecerá una transcripción descriptiva para todos los medios pregrabados que contengan una pista de vídeo.
|
| 1.2.9 Sólo audio (En directo) |
AAA |
- Se ofrecerá una transcripción descriptiva (por ejemplo, el guión de una presentación en vivo de audio) para todos los contenidos en directo que contengan audio.
|
Pauta 1.3. Adaptable: crea contenido que pueda presentarse de diferentes maneras (por ejemplo, un diseño simplificado) sin perder la información o estructura.
| Criterios de éxito |
Nivel |
Recomendaciones |
| 1.3.1 Información y sus relaciones |
A |
- El marcado semántico se usará para designar los encabezados (
<h1>), listas (<ul>, <ol>, and <dl>), texto especial o enfatizado (<strong>, <code>, <abbr>, <blockquote>, por ejemplo), etc. El marcado semándito deberá usarse apropiadamente.
- Las tablas se usarán para marcar los datos tabulados. Las celdas de datos (
<td>) se asociarán con sus encabezados (<th>) donde sea necesario. Los títulos de las tablas (caption) y sus resúmenes (summary) se usarán de forma apropiada.
- Las etiquetas (
label) textuales se asociarán con sus campos (input) correspondientes en los formularios. Los elementos de los formularios que estén relacionados se agruparán mediante fieldset/legend.
|
| 1.3.2 Secuencia con significado |
A |
- El orden de navegación y lectura (determinado por el orden en el código fuente) será lógica e intuitiva.
|
1.3.3
Características sensoriales |
A |
- Las instrucciones no dependerán de la forma, tamaño o ubicación visual (por ejemplo, “Haga clic en el icono cuadrado para continuar” o “Las instrucciones están en la columna de la derecha”).
- Las instrucciones no dependerán del sonido (por ejemplo, “Un sonido beep le indica que puede continuar”).
|
Pauta 1.4. Distingible: facilite a los usuarios el ver y escuchar el contenido, incluyendo la separación entre el primer plano y el fondo.
| Criterios de éxito |
Nivel |
Recomendaciones |
| 1.4.1 Uso del color |
A |
- No use el color como el único método para transmitir el contenido o distinguir elementos visuales.
- Los enlaces deben distinguirse de los elementos y texto que les rodean. Si utiliza el color para diferenciar los enlaces, use una forma adicional para distinguirlos. (por ejemplo, se subrayan cuando reciben el foco).
|
| 1.4.2 Control del audio |
A |
- Se debe ofrecer un mecanismo para poder parar, pausar, silenciar o ajustar el volumen de cualquier sonido que se reproduzca automáticamente en la página más de tres segundos.
|
| 1.4.3 Contraste (mínimo) |
AA |
- El texto o las imágenes de texto deben tener una relación de contraste de al menos 4.5:1.
- Los textos grandes (de más de 18 puntos o 14 puntos en negrita) deben tener una relación de contraste de al menos 3:1.
- Nota del traductor: utilice las herramientas de comprobación del contraste existentes para verificar esos valores, por ejemplo, Color Contrast Checker.
|
| 1.4.4 Tamaño del texto |
AA |
- La página deberá ser legible y funcional cuando se doble el tamaño del texto.
|
| 1.4.5 Imágenes de texto |
AA |
- Si la misma representación visual puede realizarse usando sólo texto, no deben usarse imágenes para representar ese texto.
|
| 1.4.6 Contraste (aumentado) |
AAA |
- El texto o las imágenes de texto deben tener una relación de contraste de al menos 7:1.
- Los textos grandes (de más de 18 puntos o 14 puntos en negrita) deben tener una relación de contraste de al menos 4.5:1.
- Nota del traductor: utilice las herramientas de comprobación del contraste existentes para verificar esos valores, por ejemplo, Color Contrast Checker.
|
| 1.4.7 Bajo o sin sonido de fondo |
AAA |
- Compruebe que no hay o existe un ruido de fondo muy bajo que permita distinguir fácilmente las conversaciones.
|
| 1.4.8 Presentación visual |
AAA |
- Para bloques de texto de más de una frase de longitud:
- No hay más de 80 caracteres de ancho
- NO están totalmente justificados (alineados a ambos márgenes, izquierdo y derecho)
- Tienen un interlineado (al menos la mitad de la altura del texto) y espacio entre párrafos (1.5 veces el interlieado) adecuado.
- Tienen especificados un color de primer plano y fondo. Estos se pueden aplicar a elementos específicos de la página o en su totalidad utilizando CSS (y, por tanto, heredados por el resto de elementos).
- No necesitan desplazamiento horizontal cuando se dobla el tamaño del texto.
|
| 1.4.9 Imágenes de texto (sin excepción) |
AAA |
- Cuando el texto se utiliza dentro de una imagen sólo con fines decorativos (la imagen no transmite contenido) O cuando la información no puede presentarse sólo como texto.
|
Operable
Los formularios, controles, navegación y otros elementos de la interfaz deben permitir la interacción.
Pauta 2.1. Accesibilidad mediante el teclado: permita que toda la funcionalidad esté disponible usando el teclado
| Criterios de éxito |
Nivel |
Recomendaciones |
| 2.1.1 Teclado |
A |
- Todas funciones de las páginas deberán estar disponibles utilizando el teclado, excepto aquellas que de forma conocida no pueden realizarse con el teclado (por ejemplo, un dibujo a mano alzada).
- Los atajos de teclado y
accesskeys (que normalmente deberían evitarse) no deben entrar en conflicto con las presentes en el navegador y/o lector de pantalla.
|
| 2.1.2 Teclado no bloqueado |
A |
- El foco del teclado no deberá estar bloqueado o fijado en un elemento concreto de la página. El usuario deberá poder moverse por todos los elementos navegables de la página utilizando únicamente el teclado.
|
| 2.1.3 Teclado (Sin excepción) |
AAA |
- Toda la funcionalidad de las páginas deberán estar disponibles utilizando el teclado.
|
Pauta 2.2 Suficiente tiempo: ofrezca a los usuarios el tiempo suficiente para que puedan leer y utilizar el contenido
| Criterios de éxito |
Nivel |
Recomendaciones |
| 2.2.1 Tiempo ajustable |
A |
- Si una página o aplicación tiene un límite de tiempo para realizar una tarea deberá ofrecer la opción de apagar, ajustar o aumentar ese límite de tiempo. No es un requisito para eventos en tiempo real (por ejemplo, una subasta) donde el límite de tiempo es absolutamente necesario, o si el plazo de tiempo es de más de 20 horas.
|
| 2.2.2 Pausar, parar, ocultar |
A |
- Todo movimiento automático, parpadeo o desplazamiento de más de tres segundos deberá poderse pausar, parar u ocultar por el usuario. El movimiento, parpadeo, o desplazamiento podrá usarse para llamar la atención del usuario o destacar un contenido si dura menos de tres segundos.
- El contenido actualizado automáticamente (por ejemplo, una página recargada o redireccionada automáticamente, un ticker de noticias, la actualización de un campo mediante AJAX, un aviso, etc.) deberá poder ser pausado, parado u ocultado por el usuario o el usuario deberá poder controlar manualmente los tiempos de actualización.
|
| 2.2.3 Sin tiempo |
AAA |
- El contenido y funcionalidad no tendrá limitaciones de tiempo.
|
| 2.2.4 Interrupciones |
AAA |
- Las interrupciones (alertas, actualizaciones de las páginas, etc.) deberán poder ser postpuestas o canceladas por el usuario.
|
| 2.2.5 Re-autentificación |
AAA |
- Si la autentificación en una sesión termina (expira), el usuario podrá re-autentificarse y continuar con su actividad sin perder ningún dato de la página actual.
|
Pauta 2.3. Convulsiones: no diseñe los contenidos de tal forma que puedan provocar ataques o convulsiones
Pauta 2.4 Navegable: ofrezca métodos que ayuden al usuario a navegar, encontrar el contenido y determinar dónde se encuentra
| Criterios de éxito |
Nivel |
Recomendaciones |
| 2.4.1 Accesos directos |
A |
- Se ofrecerá un enlace para saltar la navegación y otros elementos que se repitan en todas las páginas.
- Si una página cuenta con una estructura adecuada de encabezados, puede considerarse una técnica suficiente en lugar de un enlace del tipo “Ir al contenido principal”. Tenga en cuenta que la navegación por encabezados todavía no está soportada en todos los navegadores.
- Si una página utiliza un conjunto de marcos (frameset) y los marcos (frame) están apropiadamente titulados, puede considerarse una técnica suficiente para acceder directamente a cada marco individual.
|
| 2.4.2 Título de la página |
A |
- La página web deberá tener un título descriptivo e informativo de la misma.
|
| 2.4.3 Orden del foco |
A |
- El orden de la navegación por los enlaces, elementos de los formularios, etc. deberá ser lógico e intuitivo.
|
| 2.4.4 Propósito de los enlaces (en su contexto) |
A |
- El propósito (objetivo) de cada enlace (o botón de imagen en un formulario, o zona activa de un mapa de imagen) deberá poderse determinar directamente desde el texto del enlace o desde el texto del enlace y su contexto (por ejemplo, los párrafos que lo rodean, elementos de una lista, celda en una tabla o encabezados de tabla).
- Los enlaces (o botones de imagen en un formulario) con el mismo texto que vinculan a lugares diferentes deberán ser fácilmente distinguibles.
|
| 2.4.5 Multiples vías |
AA |
- Se deben ofrecer múltiples formas para encontrar otras páginas web en el sitio - al menos dos de las siguientes: una lista de páginas relacionadas, tabla de contenidos, mapa web, búsqueda en el sitio, o un listado de todas las páginas web.
|
| 2.4.6 Encabezados y etiquetas |
AA |
- Los encabezados (
<h>) de las páginas y las etiquetas (<label>) para los controles interactivos de los formularios deberán ser informativos. Evite el duplicar los encabezados (por ejemplo, “Más detalles”) y las etiquetas de texto (por ejemplo, “primer nombre”) a menos que la estructura ofrezca una diferenciación adecuada entre ellas.
|
| 2.4.7 Visibilidad del foco |
AA |
- Compruebe que es visualmente evidente el elemento que tiene el foco actual del teclado (por ejemplo, si se mueve con el tabulador por la página, puede ver dónde se encuentra).
|
| 2.4.8 Ubicación |
AAA |
- Si la página web forma parte de una secuencia de páginas o está dentro de un sitio con una estructura compleja, deberá indicar la ubicación de la página actual, por ejemplo, a través de las migas de pan (breadcrumbs) o especificando el paso actual en la secuencia (por ejemplo, “Paso 2 de 5 - dirección de envío”).
|
| 2.4.9 Propósito de los enlaces (Sólo enlaces) |
AAA |
- El propósito (objetivo) de cada enlace (o botón de imagen en un formulario, o zona activa de un mapa de imagen) deberá poderse determinar directamente desde el texto del enlace.
- No deberán existir enlaces (o botones de imagen en un formulario) con el mismo texto que vinculen a lugares diferentes.
|
| 2.4.10 Encabezados de sección |
AAA |
- Además de proporcionar un documento con la estructura global del sitio, cada una de las secciones de contenido deberán ser designadas mediante encabezados (títulos), donde sea oportuno.
|
Comprensible
El contenido y la interfaz deben poder entenderse fácilmente y ser semánticamente ricos.
Pauta 3.1 Legibilidad: cree contenidos legibles y fáciles de entender
| Criterios de éxito |
Nivel |
Recomendaciones |
| 3.1.1 Idioma de la página |
A |
- El idioma principal de la página deberá estar identificado utilizando el atributo
lang de HTML (por ejemplo, <HTML lang="es">).
|
| 3.1.2 Idioma de las partes |
AA |
- Si algunas secciones tienen contenidos en un idioma diferente al principal, éste deberá estar identificado utilizando el atributo
lang (por ejemplo, <blockquote lang="en">) cuando sea apropiado.
|
| 3.1.3 Palabras inusuales |
AAA |
- Las palabras que puedan ser ambiguas, desconocidas o usadas de una forma muy específica, deberán definirse través de un texto adyacente, una lista de definiciones, un glosario, o de cualquier otro método.
|
| 3.1.4 Abreviaturas |
AAA |
- La explicación para las abreviaturas se realizará, usando el elemento
<abbr> o enlazando a un glosario de términos, la primera vez que se utilicen en el contenido. Nota: WCAG 2.0 no hace excepciones con las abreviaciones conocidas en un determinado ámbito (por ejemplo, la abreviatura HTML utilizada en un sitio de desarrollo web deberá también ser explicado).
|
| 3.1.5 Nivel de lectura |
AAA |
- Una alternativa para hacer los contenidos más comprensibles es suponer que aquellos que sean más avanzados puedan ser razonablemente leídos por una persona con aproximadamente 9 años de educación primaria.
|
| 3.1.6 Pronunciación |
AAA |
- Si la pronunciación de una palabra es vital para comprenderla, su pronunciación se mostrará seguida de dicha palabra o mediante un enlace a un glosario.
|
Pauta 3.2. Predecible: Make Web pages appear and operate in predictable ways
| Criterios de éxito |
Nivel |
Recomendaciones |
| 3.2.1 Foco |
A |
- Cuando el elemento de una página recibe el foco, sin que exista una modificación sustancial de la página, la aparición de una ventana emergente (pop-up), un nuevo cambio del foco del teclado, o cualquier otro cambio, podría confundir o desorientar al usuario.
|
| 3.2.2 Introducción de la información |
A |
- Cuando un usuario introduce información o interactúa con un control, sin que exista una modificación sustancial de la página, la aparición de una ventana emergente (pop-up), un nuevo cambio del foco del teclado, o cualquier otro cambio, podría confundir o desorientar al usuario, a menos que se le informe con antelación de dichos cambios.
|
| 3.2.3 navegación consistente |
AA |
- Los enlaces de navegación que se repiten en las páginas web no deberían modificar su orden al navegar por el sitio.
|
| 3.2.4 Identificación consistente |
AA |
- Los elementos que tienen la misma funcionalidad a través de múltiples páginas web deberán identificarse de manera consistente. Por ejemplo, un campo de búsqueda en la parte superior de la página deberá etiquetarse siempre de la misma forma.
|
| 3.2.5 Soliciyud de cambio |
AAA |
- Los cambios sustanciales de las páginas, la aparición de ventanas emergentes (pop-ups), los cambios no controlados del foco del teclado, o cualquier otro cambio que podría confundir o desorientar al usuario deberán ser iniciados por éste. Alternativamente, siempre se le deberá ofrecer al usuario una opción para desactivar dichos cambios.
|
Pauta 3.3. Asistencia en la introducción de datos: ayude a los usuarios a evitar y corregir los errores
| Criterios de éxito |
Nivel |
Recomendaciones |
| 3.3.1 Identificación de errores |
A |
- Ofrezca información al usuario sobre los campos obligatorios de un formulario, o aquellos que necesitan un formato, valor o longitud específica, utilizando el elemento
<label> (si éste no está disponible ponga la información en el atributo de título title del elemento).
- Si se usa la validación de datos de los formularios (del lado del cliente o del servidor), ofrezca la información sobre los errores y avisos de forma eficiente, intuitiva y accesible. Los errores deben estar claramente identificados, ofrecer un acceso rápido al elemento problemático, permitir que el usuario pueda fácilmente solucionar el error y reenviar los datos del formulario.
|
| 3.3.2 Etiquetas o instrucciones |
A |
- Se deberán proporcionar las suficientes etiquetas, avisos e instrucciones necesarios para los elementos interactivos, usando para ello instrucciones, ejemplos, posicionando adecuadamente las etiquetas (
label) y/o fieldsets/legends
|
| 3.3.3 Sugerencias de error |
AA |
- Si se detecta un error al introducir un dato (mediante la validación en el lado del cliente o en el del servidor), deberá proporcionar sugerencias para solucionar el problema de forma oportuna y accesible.
|
| 3.3.4 Prevención de errores (Legales, financieros, de datos) |
AA |
- Si el usuario puede modificar o eliminar datos de caracter legal, financiero o de prueba, estas acciones deberán ser reversibles, verificados o comprobados.
|
| 3.3.5 Ayuda |
AAA |
- Si el usuario puede enviar, cambiar o eliminar información, la información deberá poder volver a estar disponible, y/o las acciones realizadas ser verificadas o confirmadas.
|
| 3.3.6 Prevención de errores (todos) |
AAA |
- Si el usuario puede enviar información, el envío deberá poder ser reversible, verificado o confirmado.
|
Robusto
El contenido debe ser lo suficientemente consistente y fiable como para permitir su uso con una amplia variedad de agentes de usuario, ayudas técnicas… y preparado para las tecnologías venideras.
Pauta 4.1. Compatible: mejore la compatibilidad con los agentes de usuario actuales y futuros, incluidas las ayudas técnicas.
| Criterios de éxito |
Nivel |
Recomendaciones |
| 4.1.1 Análisis |
A |
- Se deberán evitar los errores de sintaxis de HTML/XHTML. El código puede comprobarse, analizarse y validarse a través de http://validator.w3.org/
|
| 4.1.2 Nombre, función, valor |
A |
- Deberá utilizar el marcado de tal forma que se facilite la accesibilidad. Esto incluye el seguir las especificaciones oficiales de HTML/XHTML, utilizando la gramática formal de forma apropiada.
|
También puede interesarte…