Accesibilidad Web: Pautas WCAG y Soluciones Técnicas en Informática

Accesibilidad Web

ACCESSIBILITY 1 de 16Índice

1. Concepto de accesibilidad web

   4

   1. Barreras derivadas del entorno

      4

   2. Barreras por tipo de perfil

      4

      1. Ceguera

         4

      2. Baja visión

         5

      3. Daltonismo

         5

      4. Auditivas

         5

      5. Motrices

         5

      6. Neurológicas o Cognitivas

         5

   3. Ayudas Técnicas y Productos de Apoyo

      5

      1. Línea y teclado braille

         5

      2. Lectores de Pantalla

         5

      3. Licornio

         6

      4. Ratones Especiales

         6

      5. Webcams para Seguimiento de Ojos o Cara

         6

2. Pautas de accesibilidad WCAG

WCAG 1.0

6

WCAG 2.0 y WCAG 2.1

6

Perceptible

7

Operable

7

Comprensible

7

Robusto

7

Técnicas para satisfacer los requisitos definidos en las WCAG

7

Técnicas Fundamentales

7

Técnicas HTML

8

Técnicas CSS

8

8

JavaScript

8

Técnicas para Servidor

8

Técnicas WAI-ARIA

8

Otras Técnicas

9

Tabla de Puntos de Verificación

9

Niveles de Prioridad

9

Niveles de Conformidad

9

1. Imágenes accesibles

   9

   2 de 16

2. Enlaces accesibles

   10

3. Tablas accesibles

   10

   1. Utilizar encabezados de tabla

      10

   2. Proporcionar una descripción

      10

   3. Utilizar un diseño claro y sencillo

      10

   4. Usar el atributo headers

      10

   5. Agregar etiquetas <thead>, <tbody> y <tfoot>

      11

   6. Evitar celdas vacías o duplicadas

      11

   7. Proporcionar información adicional con <abbr> y el atributo title

      11

   8. Hacer que la tabla sea responsive

      11

4. Como hacer formularios accesibles

   11

   1. Etiquetas y atributos

      11

   2. Etiquetas para botones

      12

   3. Accesibilidad del teclado

      13

   4. Etiqueta de campo requerido

      13

      14

   5. Orden de navegación

      14

5. Herramientas de análisis de accesibilidad web

   14

6. Mapa conceptual

   15

   3 de 16

Concepto de accesibilidad web

La accesibilidad web se centra en el desarrollo de aplicaciones que puedan ser utilizadas por el mayor número de personas, incluidas aquellas con necesidades específicas. Estas pueden derivarse de factores ambientales o discapacidades visuales, auditivas, motrices y neurológicas, como dislexia o problemas de atención y memoria.

Barreras derivadas del entorno

Existen diversos factores ambientales que pueden dificultar el acceso a la web, por lo que se deben aplicar soluciones para garantizar la accesibilidad:

• Navegadores antiguos: Proporcionar alternativas cuando las tecnologías modernas no son compatibles.
• Navegadores de solo texto: Incluir descripciones textuales para imágenes, videos y sonidos.
• Conexiones lentas: Optimizar los tiempos de carga para mejorar la experiencia.
• Diferentes tamaños de pantalla: Aplicar diseño responsive para adaptarse a diversos dispositivos.
• Monitores monocromos: Evitar funcionalidades dependientes exclusivamente del color.

Barreras por tipo de perfil

Diferentes usuarios pueden enfrentar obstáculos en la navegación web según sus capacidades. A continuación, se detallan algunas barreras comunes y cómo pueden abordarse.

Ceguera

• Imágenes sin texto alternativo que no pueden ser interpretadas por lectores de pantalla.
• Gráficos y textos dentro de imágenes sin descripción accesible.
• Contenidos multimedia sin subtítulos o descripciones textuales.
• Tablas que pierden significado cuando se leen de forma secuencial.
• Dependencia del uso del ratón, dificultando la navegación con teclado.
• Documentos en formatos no accesibles, como ciertos PDFs que no siguen normas de accesibilidad.

4 de 16

Baja visión

• Uso de tamaños de letra fijos que no permiten ajuste.
• Diseños que se desconfiguran al cambiar el tamaño de la fuente, afectando la navegabilidad.
• Bajo contraste entre texto, fondo e imágenes, dificultando la lectura.
• Uso de imágenes para representar texto sin alternativa accesible.

Daltonismo

• Uso exclusivo del color para resaltar información sin apoyo en negritas, cursivas o subrayado.
• Bajo contraste entre texto, fondo e imágenes, afectando la diferenciación de elementos.

Auditivas

• Ausencia de subtítulos o transcripciones en contenidos multimedia.
• Requerimiento obligatorio de micrófono sin opción de desactivarlo, limitando la accesibilidad.

Motrices

• Botones y enlaces demasiado pequeños que dificultan la interacción.
• Dependencia del ratón, impidiendo el uso de teclado u otros dispositivos alternativos.

Neurológicas o Cognitivas

Los usuarios con dislexia, trastornos de atención o problemas de memoria pueden enfrentar dificultades en la web debido a:

• Uso de un tamaño de letra fijo que impide ajustes según sus necesidades.
• Elementos sonoros o visuales que no pueden desactivarse, causando distracciones.
• Falta de organización y estructuración del contenido, dificultando la comprensión.
• Lenguaje complejo con frases enrevesadas que complican la lectura.
• Destellos o parpadeos frecuentes que pueden desencadenar ataques de epilepsia.

Ayudas Técnicas y Productos de Apoyo

Las personas con discapacidad pueden acceder a los contenidos web mediante herramientas especializadas que combinan hardware y software.

Línea y teclado braille

La línea braille es un dispositivo periférico que permite a las personas ciegas leer contenido digital a través de celdas braille táctiles. El teclado braille es un dispositivo de entrada que permite escribir en braille. Existen dispositivos que combinan ambas funciones, facilitando tanto la lectura como la escritura en un solo equipo.

Lectores de Pantalla

Los lectores de pantalla son aplicaciones que convierten el texto en voz mediante un sintetizador o lo envían a una línea braille. Permiten a las personas con discapacidad visual navegar por la web sin necesidad de ver la pantalla. Uno de los programas más conocidos es JAWS, que se maneja con atajos de teclado, como:

• INSERT + FLECHA ABAJO: leer todo el contenido.

5 de 16

• ESC: detener la lectura.
• TAB / SHIFT + TAB: moverse entre enlaces. Otros lectores populares incluyen NVDA y VoiceOver.

Licornio

El licornio es un casco con una varilla que permite a personas con movilidad reducida escribir en un teclado tradicional moviendo la cabeza, facilitando así la interacción con la computadora.

Ratones Especiales

Existen diferentes tipos de ratones adaptados para personas con movilidad reducida, como:

• Ratón de cabeza, pie o apuntador de boca: controlados mediante movimientos específicos.
• Ratón de mirada: permite controlar el cursor con los ojos.
• Ratón de palanca: diseñado para facilitar el uso con movimientos limitados.

Webcams para Seguimiento de Ojos o Cara

Estas tecnologías convierten los movimientos de los ojos o la cara en acciones del cursor, permitiendo clics mediante parpadeos o gestos faciales. Son especialmente útiles para personas con discapacidad motriz severa y dificultades en el habla.

Pautas de accesibilidad WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son un conjunto de recomendaciones diseñadas para mejorar la accesibilidad de las páginas web. Siguiendolas, se logra un acceso más inclusivo para personas con barreras visuales, auditivas, motrices y cognitivas, además de mejorar la usabilidad general del sitio.

WCAG 1.0

Publicada en 1999, fue la primera versión de estas pautas, estableciendo 14 principios clave para mejorar la accesibilidad web:

1. Ofrecer alternativas para contenido visual y auditivo.
2. No depender únicamente del color para transmitir información.
3. Utilizar marcadores y hojas de estilo de forma adecuada.
4. Especificar el lenguaje del contenido.
5. Diseñar tablas accesibles y adaptables.
6. Asegurar que las páginas con nuevas tecnologías se transformen correctamente.
7. Permitir al usuario controlar los contenidos dinámicos.
8. Garantizar la accesibilidad de interfaces incrustadas.
9. Diseñar pensando en la independencia del dispositivo.
10. Implementar soluciones provisionales para compatibilidad.
11. Seguir las tecnologías y pautas del W3C.
12. Proporcionar información de contexto y orientación.
13. Incluir mecanismos claros de navegación.
14. Asegurar documentos claros y sencillos.

WCAG 2.0 y WCAG 2.1

En 2008, las WCAG 2.0 reemplazaron la versión anterior, revisando las catorce pautas originales. Posteriormente, en 2018, se lanzó WCAG 2.1, que mantuvo la estructura de la versión 2.0 pero con mejoras adicionales.

6 de 16

Las nuevas pautas se agruparon en cuatro principios fundamentales:

• Perceptible: La información debe presentarse de forma accesible para todos, incluidas personas con discapacidades visuales o auditivas.
• Operable: El contenido y las funcionalidades deben ser utilizables por cualquier persona, sin importar sus limitaciones físicas.
• Comprensible: La información debe ser clara y fácil de entender para todos los usuarios.
• Robusto: El contenido debe ser compatible con diversas tecnologías y dispositivos para garantizar su accesibilidad en distintos entornos.

Principio Perceptible

El contenido debe ser accesible para todos los sentidos:

• Proveer alternativas textuales para contenido no textual (imágenes, audio, etc.).
• Incluir descripciones para contenido multimedia.
• Permitir que el contenido se presente de distintas formas sin perder estructura o significado.
• Mejorar la visibilidad y audibilidad, asegurando contraste adecuado entre primer plano y fondo.

Principio Operable

El sitio web debe ser completamente funcional para cualquier usuario:

• Permitir la navegación y uso solo con teclado.
• Otorgar tiempo suficiente para interactuar con el contenido.
• Evitar elementos que puedan causar ataques epilépticos o convulsiones.
• Incluir herramientas para facilitar la navegación y orientación dentro del sitio.

Principio Comprensible

La información y la navegación deben ser claras y predecibles:

• Garantizar textos legibles y comprensibles.
• Diseñar páginas con estructura y comportamiento coherente.
• Ofrecer ayudas para evitar y corregir errores en formularios y procesos interactivos.

Principio Robusto

El contenido debe ser compatible con múltiples tecnologías:

• Maximizar la compatibilidad con navegadores, dispositivos y herramientas de asistencia, tanto actuales como futuras.

Técnicas para satisfacer los requisitos definidos en las WCAG

Existen más de 400 técnicas disponibles en la web oficial de W3C para garantizar la accesibilidad web. A continuación, se destacan algunas de las más importantes.

Técnicas Fundamentales

• Incluir alternativas textuales para contenido multimedia.
• Permitir pausar videos y animaciones.
• Mejorar la legibilidad con contrastes adecuados.

7 de 16