Accesibilidad digital
Por qué implementar las WCAG en la tecnología
Las Pautas de Accesibilidad para el Contenido Web (WCAG) son el estándar internacional que define cómo deben construirse los sitios, aplicaciones y herramientas digitales para que todas las personas puedan usarlos, incluidas las personas con discapacidad. A continuación explicamos por qué esto importa y presentamos dos portales open source que creamos como referencia práctica de nivel AAA.
Según la Organización Mundial de la Salud, cerca de 1.300 millones de personas, aproximadamente el 16% de la población mundial, viven con alguna discapacidad significativa. En Brasil, el instituto de estadística IBGE estima más de 17 millones de personas con discapacidad. Las personas ciegas o con baja visión dependen de lectores de pantalla, ampliación y alto contraste; las personas con limitaciones motoras dependen del teclado o de dispositivos de asistencia; las personas sordas necesitan subtítulos y alternativas textuales para el audio.
Cuando una herramienta digital ignora la accesibilidad, niega autonomía, información y participación a esas personas. Con el envejecimiento de la población, el público beneficiado solo crece: la pérdida de visión, audición y movilidad aumenta con la edad. Y los mismos recursos pensados para la discapacidad benefician a todo el mundo en una pantalla al sol, con las manos ocupadas o con una mala conexión, el llamado efecto del rebaje de acera (curb-cut effect).
Cuatro razones para tomar en serio las WCAG
Dignidad y derechos
La accesibilidad es inclusión y un derecho humano. Una herramienta accesible permite que la persona estudie, trabaje, compre y se relacione con autonomía, sin depender de terceros.
Obligación legal
En Brasil, la Ley Brasileña de Inclusión (Ley 13.146/2015) exige accesibilidad en los sitios de empresas y organismos públicos. En EE. UU. rigen la ADA y la Sección 508; en la Unión Europea, la EN 301 549 y el Acta Europea de Accesibilidad. Ignorarlo genera riesgo jurídico y de imagen.
Mercado y reputación
Los productos accesibles no excluyen clientes: amplían el alcance y la conversión. La accesibilidad es un requisito frecuente en licitaciones y contratos corporativos y fortalece la marca.
Calidad técnica
HTML semántico, textos alternativos, foco visible y estructura clara mejoran el SEO, el rendimiento y la mantenibilidad. Construir accesible desde el inicio cuesta poco; corregir después cuesta caro.
Los cuatro principios de las WCAG
Toda la norma se organiza en cuatro principios, resumidos en la sigla POUR. Cada principio se despliega en pautas y criterios de conformidad verificables.
Perceptible
La información y los componentes de la interfaz deben presentarse de modo que las personas puedan percibirlos: alternativas textuales, subtítulos, contraste suficiente y contenido adaptable.
Operable
Todos los componentes y la navegación deben poder operarse con el teclado, con tiempo suficiente, sin contenido que provoque convulsiones y con formas claras de ubicarse y navegar.
Comprensible
Texto legible, comportamiento predecible y ayuda para evitar y corregir errores, para que la persona entienda tanto el contenido como el funcionamiento de la interfaz.
Robusto
Contenido interpretable por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia actuales y futuras, con uso correcto de HTML y ARIA.
Niveles de conformidad
- A
- Requisitos mínimos. Sin ellos, grupos enteros de personas quedan impedidos de usar el contenido.
- AA
- Nivel de referencia exigido por la mayoría de las legislaciones y políticas públicas, incluido el contraste 4,5:1 y la navegación consistente.
- AAA
- El nivel más alto: contraste 7:1, control total de la lectura, lenguaje claro, sin límites de tiempo y ayuda contextual. Es el nivel adoptado en los dos proyectos de demostración siguientes.
Marco legal y normativo
Brasil
Ley Brasileña de Inclusión (Ley 13.146/2015, art. 63), Decreto 5.296/2004, Modelo de Accesibilidad en Gobierno Electrónico (eMAG) y ABNT NBR 17060 para aplicaciones móviles.
Internacional
WCAG 2.x, publicadas por el W3C y adoptadas como norma ISO/IEC 40500; en EE. UU., la ADA y la Sección 508; en la Unión Europea, la EN 301 549 y el Acta Europea de Accesibilidad, en vigor desde 2025.
Proyectos de demostración
Dos portales open source de nivel AAA
Creamos y mantenemos dos portales públicos, de código abierto, para demostrar que es posible ofrecer una experiencia moderna, atractiva y totalmente accesible. Ambos funcionan en producción, en infraestructura propia, y sirven de referencia para equipos de desarrollo, diseño y QA.
DevTools Khori
Herramientas cotidianas para desarrolladores, construidas como referencia de accesibilidad con foco en las personas con discapacidad visual.
dev.tools.khori.com.br · github.com/khoriati/devtools-khori
DevTools Khori es una miniplataforma de utilidades para desarrolladores, arquitectos y administradores de sistemas: calculadora de programador, subredes IP, chmod, decodificador JWT, Base64, hashes, UUID, timestamps, formateador JSON, generador y validador de CPF y CNPJ brasileños, WHOIS, ping, traceroute, consulta DNS, inspector HTTP, guías rápidas de Linux, Docker, Kubernetes, ffmpeg, ImageMagick, PowerShell, Azure CLI y AWS CLI, además de un verificador de contraste WCAG y una guía de validadores de accesibilidad por línea de comandos.
El proyecto existe, ante todo, para servir de ejemplo de portal accesible. Demuestra que herramientas técnicas, densas en información, pueden ser 100% navegables con teclado y lector de pantalla, con un contraste mínimo de 7:1, sin sacrificar una interfaz moderna.
Qué demuestra
- Tres temas (claro, oscuro y alto contraste), con contraste mínimo de 7:1 y compatibilidad con el modo de colores forzados de Windows
- Navegación completa por teclado, enlaces de salto, regiones semánticas y un único h1 por página
- Anuncios para lectores de pantalla mediante regiones aria-live
- Objetivos táctiles de al menos 44 px y foco nunca oculto por la barra fija
- Glosario de términos y siglas (criterios 3.1.3 y 3.1.4) y ancho de línea confortable (1.4.8)
- Cinco idiomas (pt-BR, en-US, es, de, fr) con el atributo lang sincronizado
- Traducción a Libras (lengua de señas brasileña) mediante el widget VLibras cuando el idioma es portugués
- Respeta prefers-reduced-motion y prefers-color-scheme; tipografía legible (Atkinson Hyperlegible)
Tecnología
React 18, TypeScript, Vite y MUI en el front-end; Node.js y Express en el back-end con WAF de aplicación; Docker y Kubernetes con TLS automático. Pruebas automatizadas de accesibilidad con axe-core y Playwright que cubren todas las herramientas.
Alcance y advertencias
- La declaración de nivel AAA cubre la interfaz propia del portal. El avatar VLibras es un componente de terceros y el contenido técnico de lectura avanzada (criterio 3.1.5) quedan fuera de ese alcance.
- Las herramientas de datos se ejecutan íntegramente en el navegador; nada se envía al servidor. Las herramientas de red se ejecutan en el back-end con validación estricta, límites de uso y enmascaramiento de la dirección de origen.
- Los validadores automáticos citados realizan una comprobación técnica superficial y no sustituyen las pruebas de QA con profesionales capacitados y personas con discapacidad.
WCAG AAA · Demostración de Accesibilidad
Una aplicación que demuestra, de extremo a extremo, las mejores prácticas de las WCAG 2.2 en el nivel AAA, pensada para ser técnicamente ejemplar y agradable para cualquier persona.
wcag.tool.khori.com.br · github.com/khoriati/wcag-tool
WCAG Tool recorre, sección por sección, los grupos de criterios de conformidad de las WCAG 2.2: contraste reforzado, control de la lectura, operación por teclado, foco visible, prevención de errores, componentes ARIA según la guía de prácticas del W3C (APG), alternativas de medios, lenguaje claro y orientación. Cada sección explica el criterio, muestra la implementación funcionando e indica dónde está en el código.
A diferencia de una lista de verificación teórica, es un producto que la persona usuaria puede ajustar a su gusto: tema, contraste, tamaño del texto, espaciado, ancho de columna, movimiento y fuente, todo guardado en el navegador y sin necesidad de iniciar sesión.
Qué demuestra
- Contraste reforzado 7:1 en todo el tema, con modo de contraste máximo en blanco y negro puros (1.4.6, 1.4.11)
- Panel de lectura: tamaño del texto, altura de línea, espaciado y ancho de columna (1.4.8, 1.4.12, 1.4.4)
- Operación 100% por teclado con roving tabindex y foco grueso siempre visible (2.1.1, 2.1.3, 2.4.7, 2.4.12, 2.4.13)
- Formulario con revisión y prevención total de errores (3.3.5, 3.3.6, 1.3.6)
- Pestañas, acordeón, diálogo modal y toasts implementados según la ARIA Authoring Practices Guide (4.1.2, 2.2.4, 3.2.5)
- Alternativas de medios: transcripción, audiodescripción y subtítulos (1.2.6, 1.2.7, 1.2.8)
- Glosario y lenguaje claro (3.1.3, 3.1.4, 3.1.6); objetivos táctiles generosos y orientación (2.4.8, 2.5.5)
- Reducción de movimiento, fuente para dislexia, regiones aria-live y lista final con todos los criterios cubiertos
Tecnología
React 19 y Vite, sin dependencias de UI externas, servido por nginx en un contenedor sin privilegios de root, publicado en Kubernetes con TLS automático.
Alcance y advertencias
- Se trata de una aplicación demostrativa y educativa. La conformidad con las WCAG se evalúa página por página y depende de una auditoría manual con tecnologías de asistencia; la demostración no es un sello ni una certificación.
- La estructura fue auditada (semántica, jerarquía de títulos, regiones, nombres accesibles, etiquetas, lang y aria-live) sin problemas encontrados. Recomendamos complementar con axe DevTools, Lighthouse y pruebas con NVDA, VoiceOver y solo teclado.
- La sección de medios usa contenido de ejemplo para ilustrar las alternativas exigidas por la norma.
Avisos importantes
- Ambos portales son proyectos de demostración y de referencia, ofrecidos gratuitamente y sin garantías, con código abierto para estudio, reutilización y contribución.
- Ninguno exige registro ni inicio de sesión, y ninguno recopila datos personales con fines de rastreo o publicidad.
- La conformidad con las WCAG no es un estado permanente: cada nueva versión de un producto debe reevaluarse. Use los portales como punto de partida, no como sustituto de una evaluación profesional de su propio producto.
- WCAG y W3C son marcas del World Wide Web Consortium. Marcos Khoriati (Khori) no tiene vínculo con el W3C; los portales implementan las pautas públicas de la norma.
Preguntas frecuentes
¿Quiere hacer accesible su producto?
Evaluamos, corregimos y capacitamos a su equipo para ofrecer experiencias que todas las personas pueden usar.