Los criterios WCAG 2.2 AA son los requisitos t\u00e9cnicos concretos que una web tiene que cumplir para ser considerada accesible a nivel AA, el nivel m\u00ednimo exigido por ley. En total hay m\u00e1s de cincuenta, pero no hay que conocerlos todos para entender el que importan. <\/p>\n
En este art\u00edculo te explicamos los m\u00e1s relevantes, agrupados por \u00e1rea tem\u00e1tica y con ejemplos pr\u00e1cticos. El objetivo no es hacerte experto en WCAG, sino que puedas entender de que hablamos cuando hacemos una auditor\u00eda y por qu\u00e9 ciertos problemas son prioritarios. <\/p>\n
El contraste es uno de los errores m\u00e1s habituales y de los m\u00e1s f\u00e1ciles de detectar. El criterio est\u00e1 claro: el texto tiene que tener suficiente diferencia de luminositat respecto al fondo para ser legible para personas con baja visi\u00f3n o daltonismo.
\nQu\u00e9 exige el nivel AA: <\/p>\n
Ejemplo pr\u00e1ctico:<\/b><\/p>\n
Texto gris claro sobre fondo blanco es un error muy com\u00fan en webs modernas que priorizan la est\u00e9tica minimalista. Visualmente puede parecer elegante, pero para una persona con baja visi\u00f3n puede ser completamente ilegible. <\/p>\n<\/div>\n
Una cosa que muchos no saben:<\/b><\/p>\n
El contraste no afecta solo el texto. Los botones, los campos de formulario, los iconos informativos y los gr\u00e1ficos tambi\u00e9n tienen que cumplir los requisitos de contraste. Un bot\u00f3n con texto blanco sobre fondo naranja claro, por ejemplo, puede no superar el m\u00ednimo. <\/p>\n
Las im\u00e1genes no las pueden ver los usuarios de lectores de pantalla ni los motores de b\u00fasqueda. Por eso, cualquier imagen que aporte informaci\u00f3n tiene que tener un texto alternativo, el atributo ALT, que describa su contenido. <\/p>\n
Qu\u00e9 exige el nivel AA:<\/p>\n
Ejemplo pr\u00e1ctico:<\/b><\/p>\n
Una foto de un hotel con la descripci\u00f3n alto=\u00bbhotel\u00bb es insuficiente. Un texto como alt=\u00bbHabitaci\u00f3n doble con vistas en el mar del Hotel Ejemplo, con cama de matrimonio y terraza\u00bb es el que realmente ayuda el usuario a entender el contenido. <\/p>\n<\/div>\n
Un error sutil muy com\u00fan:<\/b><\/p>\n
Poner el nombre del fichero como ALT, como por ejemplo alto=\u00bbIMG_20240315_foto_hotel.jpg\u00bb, es peor que no poner nada. El lector de pantalla leer\u00e1 toda aquella cadena de texto sin sentido.<\/p>\n
Los formularios son uno de los puntos cr\u00edticos en webs tur\u00edsticas, de servicios y de e-commerce. Un formulario inaccesible puede impedir que un usuario complete una reserva, un presupuesto o una compra. <\/p>\n
Qu\u00e9 exige el nivel AA:<\/p>\n
Ejemplo pr\u00e1ctico:<\/b><\/p>\n
Un formulario de reservas que solo usa el placeholder como etiqueta, el texto gris que desaparece cuando empiezas a escribir, parece limpio visualmente pero es inaccesible. Cuando el usuario empieza a llenar el campo, pierde la referencia de qu\u00e9 campo es. Un lector de pantalla directamente no puede identificar el campo. <\/p>\n<\/div>\n
El error de errores:<\/b><\/p>\n
Mostrar un mensaje gen\u00e9rico como \u00abHay errores al formulario\u00bb sin especificar qu\u00e9 campos fallan es un error WCAG. El mensaje tiene que indicar exactamente qu\u00e9 campo tiene el problema y como solucionarlo: \u00abEl campo Email no es v\u00e1lido. Introduce una direcci\u00f3n de correo electr\u00f3nico correcta.\u00bb <\/p>\n
Una web accesible tiene que poder usarse sin rat\u00f3n. Esto es fundamental para personas con movilidad reducida, que navegan con teclado o con dispositivos alternativos. <\/p>\n
Qu\u00e9 exige el nivel AA:<\/p>\n
Ejemplo pr\u00e1ctico:<\/b><\/p>\n
Prueba de navegar tu web solo con la tecla Tab. Si en alg\u00fan momento pierdes de vista donde eres, porque el foco no es visible, o si no puedes acceder a alg\u00fan elemento, tenso un problema de accesibilidad. Muchos temas de WordPress desactivan el *outline de foco por razones est\u00e9ticas, y esto es un error WCAG directo. <\/p>\n<\/div>\n
La jerarqu\u00eda de t\u00edtulos:<\/b><\/p>\n
Es muy habitual encontrar webs donde el primer t\u00edtulo es un H2 porque \u00abqueda mejor visualmente\u00bb, o d\u00f3nde hay saltos de H1 a H4 sin pasar por H2 y H3. Para un lector de pantalla, los t\u00edtulos son el mapa de navegaci\u00f3n de la p\u00e1gina. Una jerarqu\u00eda rota es como un \u00edndice desordenado. <\/p>\n
La accesibilidad no es solo para personas con discapacidades visuales o motoras. Las personas con dislexia, con dificultades cognitivas o simplemente con poca familiaridad digital tambi\u00e9n se benefician de una web muy estructurada. <\/p>\n
Qu\u00e9 exige el nivel AA:<\/p>\n
Un criterio nuevo a la versi\u00f3n 2.2:<\/b><\/p>\n
Las WCAG 2.2 introdujeron el criterio \u00abFoco Appearance\u00bb, el foco visible no solo tiene que existir, sino que tiene que tener unas dimensiones m\u00ednimas y un contraste suficiente para ser realmente \u00fatil. Muchos temas y plugins que fueron \u00abaccesibles\u00bb con WCAG 2.1 han tenido que actualizarse para cumplir este criterio nuevo. <\/p>\n
Despu\u00e9s de auditar webs de todo tipos en Catalu\u00f1a, estos son los problemas que aparecen con m\u00e1s frecuencia:<\/p>\n
Cabe de estos errores requiere un redise\u00f1o. Todos se corrigen con ajustes t\u00e9cnicos concretos, que es exactamente el que hacemos en una auditor\u00eda e implementaci\u00f3n. <\/p>\n
Hay herramientas autom\u00e1ticas que detectan una parte de los problemas, WAVE y Lighthouse son las m\u00e1s conocidas. Pero las herramientas autom\u00e1ticas solo detectan aproximadamente el 30-40% de los errores reales. Los problemas de navegaci\u00f3n por teclado, la calidad de los textos alternativos o la comprensibilidad de los errores de formulario requieren revisi\u00f3n manual. <\/p>\n
La manera m\u00e1s fiable de saber donde est\u00e1s es una auditor\u00eda profesional que combine an\u00e1lisis autom\u00e1tico y revisi\u00f3n manual. Pero si quieres una primera aproximaci\u00f3n r\u00e1pida, nuestra herramienta de autoevaluaci\u00f3n te da una puntuaci\u00f3n inicial en minutos. <\/p>\n
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div>