Accesibilidad web: qué es, cómo implementarla y qué establecen los estándares WCAG
Un sitio web puede tener un diseño atractivo, cargar rápidamente y funcionar correctamente en celulares, pero aun así presentar barreras para una parte de sus visitantes. Un formulario que no puede completarse con el teclado, un texto con poco contraste o una imagen sin descripción pueden impedir que una persona acceda a la información o realice una acción.
La accesibilidad web busca evitar esas barreras mediante criterios de diseño, contenido y desarrollo que permitan utilizar un sitio a personas con diferentes capacidades visuales, auditivas, motrices y cognitivas. Para trabajar sobre estos aspectos existen estándares internacionales, como las pautas WCAG del World Wide Web Consortium (W3C), que establecen requisitos técnicos verificables.
¿Qué nivel de WCAG conviene utilizar?
Para la mayoría de los proyectos web, WCAG 2.2 nivel AA es una referencia adecuada. Establece criterios técnicos para mejorar la accesibilidad sin llegar a las exigencias más estrictas del nivel AAA.
Lo que necesitás saber en 30 segundos
- La accesibilidad web permite que personas con diferentes capacidades puedan navegar e interactuar con un sitio.
- WCAG es el estándar internacional de referencia para evaluar la accesibilidad de contenidos digitales.
- Sus cuatro principios son: perceptible, operable, comprensible y robusto.
- WCAG 2.2 incorpora nueve criterios nuevos respecto de WCAG 2.1.
- El contraste, la navegación con teclado, los textos alternativos y los formularios son algunos de los aspectos que deben revisarse.
- En Argentina, la Ley 26.653 establece obligaciones para determinados organismos, empresas y entidades vinculadas al Estado. No implica que todas las páginas privadas estén alcanzadas automáticamente.
¿Qué es la accesibilidad web?
La accesibilidad web es el conjunto de principios, criterios y técnicas que permiten que los contenidos y las funcionalidades de un sitio puedan ser percibidos, comprendidos y utilizados por la mayor cantidad posible de personas.
Esto significa contemplar distintas formas de interacción. Por ejemplo, una persona con discapacidad visual puede utilizar un lector de pantalla para interpretar los elementos de una página. Alguien con movilidad reducida puede navegar exclusivamente mediante el teclado, sin utilizar un mouse. Una persona con dificultades auditivas puede necesitar subtítulos para comprender un video.
También existen situaciones temporales o contextuales que afectan la navegación: utilizar un celular bajo luz solar intensa, tener una lesión que dificulte el uso de una mano o acceder a una página desde un dispositivo con determinadas limitaciones.
Por eso, la accesibilidad no consiste solamente en adaptar el diseño visual. Requiere revisar la estructura del código, la organización de los contenidos, los componentes interactivos y la compatibilidad con tecnologías de asistencia.
¿Por qué es importante para las empresas?
Para una empresa, un sitio accesible permite reducir obstáculos en acciones concretas, como consultar información, completar un formulario, solicitar un presupuesto o realizar una compra.
Un botón que no puede identificarse mediante un lector de pantalla, por ejemplo, puede impedir que una persona complete una operación. Del mismo modo, un formulario que no informa correctamente sus errores puede dificultar el envío de una consulta.
La accesibilidad también se relaciona con la calidad técnica general de un sitio: obliga a revisar componentes, mejorar la semántica del código y establecer patrones de interacción consistentes.
¿Qué son las pautas WCAG y qué establece su versión 2.2?
Las Web Content Accessibility Guidelines (WCAG) son pautas desarrolladas por el W3C, a través de su iniciativa Web Accessibility Initiative (WAI), para establecer criterios de accesibilidad aplicables a contenidos web.
WCAG 2.2 fue publicada como recomendación oficial el 5 de octubre de 2023 y recibió una actualización editorial el 12 de diciembre de 2024. Esta versión amplía WCAG 2.1 mediante nueve nuevos criterios de conformidad.
El estándar se organiza alrededor de cuatro principios:
- Perceptible: la información debe poder identificarse mediante los sentidos disponibles. Incluye alternativas textuales para imágenes, subtítulos, contraste adecuado y contenido adaptable.
- Operable: las funcionalidades deben poder utilizarse mediante diferentes métodos de interacción. Por ejemplo, navegación con teclado, controles accesibles y tiempo suficiente para completar acciones.
- Comprensible: los contenidos y el funcionamiento de la interfaz deben ser claros y previsibles. Esto incluye instrucciones, mensajes de error y patrones de navegación consistentes.
- Robusto: el contenido debe poder interpretarse correctamente mediante distintos navegadores y tecnologías de asistencia. Para ello es importante utilizar código semántico y componentes correctamente implementados.
¿Qué niveles de conformidad tiene WCAG?
WCAG establece tres niveles de conformidad:
- Nivel A: reúne los requisitos básicos de accesibilidad. Su incumplimiento puede generar barreras importantes.
- Nivel AA: incorpora requisitos adicionales y suele utilizarse como objetivo de referencia en proyectos de accesibilidad.
- Nivel AAA: establece criterios más exigentes para mejorar todavía más la accesibilidad.
Los niveles son acumulativos: para alcanzar AA es necesario cumplir los criterios A y AA. Para alcanzar AAA, deben cumplirse también los niveles anteriores.
No todos los criterios AAA pueden aplicarse de manera razonable a cualquier tipo de contenido. Por eso, el nivel objetivo debe definirse según las características del proyecto y los requisitos que le correspondan.
¿Qué aspectos técnicos incorpora WCAG 2.2?
La versión 2.2 incorpora nueve criterios nuevos que profundizan aspectos relacionados con la navegación, la interacción táctil, los formularios y la autenticación.
Algunos tienen especial importancia para el desarrollo de sitios empresariales:
| Criterio WCAG 2.2 | Requisito técnico | Aplicación práctica |
|---|---|---|
|
2.4.11 – Foco no oculto (AA)
|
El elemento seleccionado mediante el teclado no debe quedar completamente oculto por contenido creado por el sitio.
|
Revisar encabezados fijos, banners y ventanas superpuestas.
|
|
2.5.7 – Movimientos de arrastre (AA)
|
Las funciones que requieren arrastrar deben ofrecer una alternativa sin arrastre, salvo excepciones.
|
Permitir mover elementos mediante botones.
|
|
2.5.8 – Tamaño mínimo del objetivo (AA)
|
Los objetivos de interacción deben medir al menos 24 × 24 píxeles CSS, salvo excepciones específicas. |
Revisar botones, íconos y controles táctiles. |
|
3.2.6 – Ayuda consistente (A)
|
Los mecanismos de ayuda repetidos deben conservar una ubicación relativa consistente.
|
Mantener una ubicación previsible para los accesos a soporte.
|
|
3.3.7 – Entrada redundante (A)
|
Evitar solicitar nuevamente información que el usuario ya proporcionó durante el mismo proceso, salvo excepciones.
|
No volver a pedir datos ya ingresados en un formulario.
|
|
3.3.8 – Autenticación accesible (AA)
|
Evitar que el inicio de sesión dependa innecesariamente de pruebas cognitivas.
|
Ofrecer alternativas accesibles a pruebas de memoria o transcripción. |
Los otros tres criterios se relacionan con la visibilidad mejorada del foco y una versión más exigente de la autenticación accesible.
Estos requisitos tienen implicancias concretas. Una página con un menú fijo, por ejemplo, debe permitir que una persona que navega con el teclado identifique qué elemento está seleccionado. Si un banner tapa completamente ese elemento, puede existir un incumplimiento.
De la misma manera, una interfaz que utiliza movimientos de arrastre debería ofrecer otra forma de realizar la misma acción.
¿Qué requisitos de accesibilidad debería cumplir un sitio web?
Además de los criterios incorporados por WCAG 2.2, existen prácticas fundamentales que conviene revisar en cualquier proyecto de desarrollo web.
Contraste de colores y legibilidad
El contraste entre el texto y el fondo determina qué tan fácil resulta leer el contenido. WCAG establece para el nivel AA una relación mínima de:
- 4,5:1 para texto normal.
- 3:1 para texto grande.
Estos valores permiten evaluar objetivamente las combinaciones de colores de una interfaz. No alcanza con que una tipografía parezca legible en una pantalla: es necesario comprobar la relación de contraste mediante herramientas específicas.
También conviene revisar el tamaño de fuente, el espaciado entre líneas y la posibilidad de ampliar el contenido sin perder información ni funcionalidades.
Textos alternativos para imágenes
Las imágenes informativas deben contar con textos alternativos que permitan comprender su contenido o función mediante lectores de pantalla.
Por ejemplo, si una página presenta una fotografía de un producto, el atributo alt debería describirlo de forma útil. En cambio, una imagen puramente decorativa puede utilizar un atributo alternativo vacío para evitar que las tecnologías de asistencia anuncien información innecesaria.
Navegación mediante teclado
Un sitio debe permitir utilizar sus funcionalidades principales sin depender exclusivamente del mouse.
Esto implica poder recorrer enlaces, botones, menús y formularios mediante el teclado, identificar qué elemento tiene el foco y activar los controles sin perder la orientación dentro de la página.
Una prueba sencilla consiste en recorrer el sitio utilizando la tecla Tab y comprobar que el orden de navegación sea lógico y que todos los controles relevantes estén disponibles.
Formularios accesibles
Los formularios requieren especial atención porque suelen concentrar acciones importantes para las empresas: consultas comerciales, registros, solicitudes y compras.
Cada campo debe contar con una etiqueta identificable y las instrucciones tienen que ser claras. Cuando se produce un error, el mensaje debe explicar qué ocurrió y cómo corregirlo.
Por ejemplo, «Ingresá una dirección de correo electrónico válida» resulta más útil que mostrar simplemente «Error de formulario».
También es importante que los mensajes puedan ser identificados por tecnologías de asistencia y que el usuario pueda reconocer fácilmente el campo que necesita corregir.
Estructura HTML y compatibilidad
La estructura del código también influye directamente en la accesibilidad.
Utilizar encabezados jerárquicos, etiquetas semánticas, botones correctamente definidos y nombres accesibles permite que los navegadores y lectores de pantalla interpreten mejor el contenido.
No es lo mismo utilizar un elemento HTML diseñado para funcionar como botón que crear un elemento genérico y agregarle interacciones mediante JavaScript. La primera alternativa suele ofrecer un comportamiento más previsible y compatible.
¿Qué establece la normativa argentina sobre accesibilidad web?
En Argentina existe la Ley 26.653 de Accesibilidad de la Información en las Páginas Web, sancionada en 2010. La norma establece obligaciones para el Estado nacional, sus organismos, empresas estatales, empresas privadas concesionarias o prestadoras de servicios públicos y otros sujetos contemplados en su texto. También alcanza a determinadas organizaciones de la sociedad civil que reciben beneficios o contratan servicios con el Estado.
La reglamentación se aprobó mediante el Decreto 656/2019. Por su parte, la Disposición ONTI 6/2019 aprobó las pautas de accesibilidad de contenido web 2.0 y sus criterios de conformidad, estableciendo requisitos para las organizaciones alcanzadas.
Es importante distinguir dos cuestiones:
- La obligación normativa: depende de que la organización esté comprendida dentro del alcance de la legislación aplicable.
- La recomendación técnica: utilizar estándares actualizados como WCAG 2.2 permite establecer objetivos de accesibilidad más amplios para proyectos digitales, aunque no significa que esa versión reemplace automáticamente los requisitos legales argentinos.
Por lo tanto, no corresponde afirmar que todas las empresas privadas argentinas están obligadas por la Ley 26.653. Cada organización debe verificar si se encuentra alcanzada por la norma y qué requisitos específicos le corresponden.
¿Cómo evaluar la accesibilidad de una página web?
La evaluación de accesibilidad debe combinar herramientas automáticas y pruebas manuales. Ninguna herramienta por sí sola permite garantizar que un sitio cumple todos los criterios WCAG.
Para realizar una revisión inicial, conviene seguir estos pasos:
- Analizar el código y la estructura: revisar encabezados, etiquetas HTML, nombres accesibles y atributos alternativos.
- Comprobar el contraste: verificar la relación entre texto, fondos y elementos interactivos.
- Probar la navegación con teclado: recorrer los componentes sin utilizar el mouse.
- Evaluar formularios: comprobar etiquetas, instrucciones, validaciones y mensajes de error.
- Probar lectores de pantalla: verificar cómo se interpreta la información y el orden de navegación.
- Revisar dispositivos y resoluciones: comprobar que los contenidos sigan siendo utilizables en diferentes pantallas.
Entre las herramientas disponibles se encuentran:
- WAVE: permite identificar distintos problemas de accesibilidad directamente sobre una página.
- Axe DevTools: facilita la detección de errores mediante pruebas automatizadas.
- Lighthouse: incluye una auditoría de accesibilidad dentro de las herramientas de desarrollo de Chrome.
- W3C WAI: ofrece documentación técnica para interpretar los criterios y realizar evaluaciones.
Los resultados automáticos deben interpretarse como indicadores para una revisión más profunda. Por ejemplo, una herramienta puede detectar que una imagen no tiene texto alternativo, pero no siempre puede determinar si la descripción existente representa correctamente su contenido.
¿Qué debería tener en cuenta una empresa al desarrollar o renovar su sitio?
La accesibilidad no debería incorporarse únicamente cuando una página ya está terminada. Es más conveniente considerarla desde la planificación y el diseño de la interfaz.
Antes de iniciar un proyecto, conviene identificar cuáles son las acciones principales que realizan los usuarios y qué componentes pueden representar barreras.
En un sitio institucional, esto puede incluir la navegación, la lectura de contenidos y los formularios de contacto. En un comercio electrónico, también es necesario revisar los filtros, las fichas de productos, el carrito y el proceso de pago.
Una evaluación completa debería contemplar:
- La estructura técnica y semántica del sitio.
- La accesibilidad de los componentes reutilizables.
- La interacción con teclado y tecnologías de asistencia.
- La legibilidad de los contenidos.
- La experiencia en dispositivos móviles.
- La accesibilidad de los documentos y contenidos multimedia.
También es importante mantener estos criterios durante las actualizaciones. Una página puede comenzar con una estructura accesible y perder esa condición cuando se agregan nuevas funcionalidades, complementos o contenidos sin una revisión adecuada.
Conclusión: la accesibilidad web es parte de la calidad de un sitio
La accesibilidad web requiere mucho más que adaptar colores o agregar descripciones a las imágenes. Implica revisar cómo se construyen los contenidos, cómo funcionan los controles y qué alternativas tienen las personas para interactuar con una página.
Los estándares WCAG ofrecen criterios concretos para evaluar estos aspectos y establecer objetivos técnicos durante el diseño, desarrollo y mantenimiento de un sitio.
Para las empresas, incorporar la accesibilidad desde el inicio permite reducir barreras, mejorar la experiencia de navegación y construir plataformas digitales más consistentes. La revisión periódica también es importante para evitar que nuevas funcionalidades introduzcan problemas que antes no existían.
En Buenos Aires IT desarrollamos sitios web y soluciones digitales considerando la estructura, el rendimiento y la experiencia de quienes los utilizan. Contactanos para conversar sobre tu próximo proyecto web.
Preguntas frecuentes
Significa que las personas pueden percibir, comprender, navegar e interactuar con sus contenidos y funcionalidades, independientemente de sus capacidades. Para evaluar la accesibilidad se utilizan criterios técnicos como los establecidos por WCAG, que contemplan aspectos visuales, auditivos, motrices y cognitivos.
WCAG 2.2 amplía la versión 2.1 mediante nueve nuevos criterios de conformidad. Incorpora requisitos relacionados con la visibilidad del foco, los movimientos de arrastre, el tamaño de los controles, la ayuda consistente y la autenticación accesible.
Los niveles de conformidad son A, AA y AAA. El nivel AA suele utilizarse como objetivo de referencia en muchos proyectos digitales. Sin embargo, el nivel adecuado depende del tipo de sitio, sus usuarios y las obligaciones normativas que correspondan.
No. La Ley 26.653 alcanza al Estado nacional y a determinados organismos, empresas y entidades vinculadas con servicios públicos o contrataciones y beneficios estatales. Una empresa privada debe analizar su situación para determinar si está comprendida dentro de los sujetos obligados.
No por sí solas. Las herramientas automáticas detectan determinados problemas técnicos, pero no pueden evaluar completamente la comprensión de los contenidos ni todos los recorridos de navegación. Es necesario complementar sus resultados con pruebas manuales y tecnologías de asistencia.
La accesibilidad comparte algunas buenas prácticas con el SEO, como el uso de HTML semántico, encabezados jerárquicos y textos alternativos descriptivos. Estas prácticas ayudan a organizar y comprender mejor el contenido, pero cumplir WCAG no garantiza mejores posiciones en los resultados de Google.
