Addaw, ir a inicio Donar

Lección 10 de 10 · Caso práctico · 25 min · Revisado el 26/10/2026

Caso práctico, ejercicios y lista de comprobación

Es el momento de aplicar todo el curso. En el caso práctico vas a revisar la lista de hallazgos que ha preparado otra persona, decidir cuáles son fallos reales y cuáles no, citarlos bien y llegar a una conclusión de conformidad. Después tienes ejercicios con solución y una lista de comprobación para tu trabajo diario.

Caso práctico: el acceso y las transferencias de Banco Ribera

Banco Ribera (entidad ficticia) ofrece banca en línea a particulares, un servicio incluido en el ámbito de la Ley 11/2023. Un compañero que acaba de empezar ha revisado el proceso «iniciar sesión, consultar movimientos y hacer una transferencia» y te pasa sus notas. Tu tarea es validarlas antes de que lleguen al equipo de desarrollo.

Paso 1. Fijar el marco de referencia

Antes de mirar ningún hallazgo, deja claro contra qué se evalúa: WCAG 2.2, nivel AA, es decir, los 55 criterios de nivel A y AA. El alcance es un proceso completo: si falla cualquiera de sus pasos, el proceso no es conforme. Y como la banca en línea es una aplicación de una sola página, cada vista y cada estado (mensajes, ventanas, menús abiertos) forma parte de la página que se evalúa.

Paso 2. Contrastar cada hallazgo con el enunciado y sus excepciones

Hallazgo anotado¿Fallo en AA?Criterio y motivo
1. El logotipo del banco tiene un contraste de 2,1:1No1.4.3 Contraste (mínimo) exceptúa el texto de los logotipos.
2. El campo de contraseña no permite pegar y no hay otro método de accesoSí3.3.8 Autenticación accesible (mínimo), AA: no hay mecanismo de ayuda ni alternativa.
3. El botón «Entrar», desactivado hasta rellenar los campos, tiene texto gris a 2,5:1NoTexto de un componente inactivo: exceptuado de 1.4.3.
4. Al tabular por la tabla de movimientos, la cabecera fija tapa por completo la fila con focoSí2.4.11 Foco no oculto (mínimo), AA.
5. Los importes negativos se muestran solo en rojo, sin signo menosSí1.4.1 Uso del color, A.
6. Iconos «Descargar justificante» de 16 por 16 píxeles, uno por fila, en filas de 20 píxeles, sin otra forma de descargarSí2.5.8 Tamaño del objetivo (mínimo), AA: los círculos de 24 píxeles se solapan y no hay control equivalente.
7. El texto general tiene un contraste de 5,2:1: «no cumple 1.4.6»No1.4.6 es AAA. El texto cumple 1.4.3 (4,5:1).
8. La sesión caduca tras 5 minutos de inactividad, con aviso previo y botón «Seguir conectado»No2.2.1 Tiempo ajustable se cumple: se avisa y se puede ampliar con una acción sencilla.
9. Al volver del paso 3 al paso 2 de la transferencia, IBAN, beneficiario y concepto aparecen vacíosSí3.3.7 Entrada redundante, A.
10. La transferencia se ejecuta al pulsar «Enviar», sin pantalla de revisión, sin opción de anular y sin validar el IBANSí3.3.4 Prevención de errores (legales, financieros, datos), AA.
11. El validador HTML da 14 errores: «fallo de 4.1.1»No4.1.1 está retirado en WCAG 2.2. Hay que comprobar si algún error, como un id duplicado, provoca un fallo de 1.3.1 o 4.1.2.
12. El botón de chat de ayuda está en la cabecera en «Movimientos» y al pie en «Transferencias»Sí3.2.6 Ayuda coherente, A: no mantiene el mismo orden relativo.

Paso 3. Marcar lo que no aplica

El proceso no contiene audio ni vídeo, así que los criterios de la pauta 1.2 se marcan como «no aplica». No es un cumplimiento ni un incumplimiento: simplemente no hay contenido de ese tipo. En cambio, el límite de tiempo de la sesión sí existe, por lo que 2.2.1 aplica y, según el hallazgo 8, se cumple.

Paso 4. Llegar a una conclusión

De los 12 hallazgos, 7 son fallos reales y 5 son falsos positivos o no afectan al nivel AA. Con siete criterios incumplidos en un proceso, la conclusión es clara: el proceso no es conforme con WCAG 2.2 AA. Fíjate en un detalle revelador: cinco de los siete fallos (3.3.8, 2.4.11, 2.5.8, 3.3.7 y 3.2.6) corresponden a criterios nuevos de WCAG 2.2. Una revisión hecha solo contra WCAG 2.1 habría encontrado únicamente 1.4.1 y 3.3.4.

Paso 5. Redactar para que se pueda actuar

Cada fallo se convierte en una incidencia con versión, criterio, nivel, ubicación, descripción, personas afectadas, pasos para reproducirlo y resultado esperado. Por ejemplo: «WCAG 2.2, 1.4.1 Uso del color (A). En “Movimientos”, los importes negativos se distinguen solo por el color rojo. Afecta a personas con daltonismo y a quien usa lector de pantalla. Esperado: signo menos o texto “Cargo” además del color». Los falsos positivos se retiran de la lista, explicando el motivo para que el compañero aprenda la excepción.

Ejercicios de autoevaluación

1. Reescribe esta nota para que sea útil: «Fallo en el menú: no cumple la pauta 2.1».

Ver solución

Por ejemplo: «WCAG 2.2, 2.1.1 Teclado (A). El submenú “Trámites” de la cabecera solo se abre al pasar el ratón; con Tab no se puede acceder a sus opciones. Afecta a quien navega con teclado o con pulsador. Esperado: el submenú se abre con Intro o Espacio». Las pautas no se evalúan: se cita el criterio con número, nombre y nivel.

2. En el pie de una web, los enlaces «Aviso legal» y «Privacidad» están dentro de una frase y su zona pulsable mide 16 píxeles de alto. ¿Incumplen 2.5.8?

Ver solución

No. Se aplica la excepción «en línea»: el objetivo está dentro de una frase y su tamaño lo limita el interlineado del texto.

3. En un formulario de compra, al marcar la casilla «Quiero factura» aparecen debajo los campos de datos fiscales. Una revisora lo marca como fallo de 3.2.2 Al recibir entradas. ¿Tiene razón?

Ver solución

No. Según el glosario, mostrar campos nuevos es un cambio de contenido, no de contexto: no cambia el foco, la ventana ni el significado de la página. 3.2.2 se cumple.

4. Una página cumple todos los criterios A y AA salvo un vídeo con locución sin subtítulos, situado dentro de un acordeón que está cerrado al cargar. ¿Es conforme?

Ver solución

No. La conformidad es de la página completa, incluidos los contenidos que se muestran al interactuar. El vídeo incumple 1.2.2 Subtítulos (grabados), así que la página no es conforme.

5. Una web se auditó contra WCAG 2.1 AA hace un año y se corrigió todo. ¿Qué hay que revisar para afirmar que cumple WCAG 2.2 AA?

Ver solución

Los seis criterios nuevos de nivel A y AA: 2.4.11 Foco no oculto (mínimo), 2.5.7 Movimientos de arrastre, 2.5.8 Tamaño del objetivo (mínimo), 3.2.6 Ayuda coherente, 3.3.7 Entrada redundante y 3.3.8 Autenticación accesible (mínimo). 4.1.1 deja de evaluarse por sí mismo. Y conviene comprobar que los cambios hechos durante el año no han introducido fallos nuevos.

Lista de comprobación

  • Declaro siempre la versión y el nivel de referencia: WCAG 2.2 AA.
  • Evalúo páginas completas, con todos sus estados, y procesos completos.
  • Cito los criterios con número, nombre y nivel, nunca solo la pauta o el principio.
  • Leo el enunciado completo y sus excepciones antes de marcar un fallo.
  • Consulto en el glosario los términos enlazados del criterio.
  • Uso Understanding para resolver los casos dudosos a partir de la intención.
  • Separo los criterios AAA de la conformidad AA.
  • Marco «no aplica» cuando no existe el tipo de contenido, nunca «cumple parcialmente».
  • Reviso los seis criterios nuevos de 2.2 aunque la web ya cumpliera 2.1.
  • No cito 4.1.1 como fallo en WCAG 2.2; busco el efecto real en 1.3.1 o 4.1.2.
  • Redacto cada fallo con ubicación, personas afectadas, pasos para reproducirlo y resultado esperado.
  • Recuerdo que cumplir las WCAG es el mínimo, no la garantía de una buena experiencia.

Para seguir aprendiendo

Comprueba lo que has aprendido

Esta lección se puede leer libremente. Para hacer su test de 3 preguntas, los ejercicios prácticos con páginas reales, guardar tu avance y optar al examen y al certificado, matricúlate en el curso.