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

En esta lección aplicarás todo el curso a una página real: revisarás la estructura de una ficha de trámite, la corregirás paso a paso y terminarás con ejercicios y una lista de comprobación que puedes usar en tus propios proyectos.

Caso práctico: la ficha «Licencia de obra menor»

Un ayuntamiento de tamaño medio publica su catálogo de trámites en un gestor de contenidos. La ficha de la licencia de obra menor se ve bien, pero varias personas han escrito al buzón de accesibilidad diciendo que «con el lector de pantalla no hay forma de encontrar las tasas». Al revisar la página con las herramientas de desarrollo y con NVDA, el equipo encuentra esto:

• El título de la pestaña es «Sede electrónica» en todas las fichas.
• <html lang="en">, heredado de la plantilla original.
• No hay <main>; la cabecera y el menú están en <div>.
• El nombre del trámite es un <div class="titulo-grande"> y los apartados son <p><strong>.
• La ruta «Inicio > Trámites > Urbanismo > Licencia de obra menor» está escrita con caracteres «>».
• Los requisitos son párrafos que empiezan por un guion.
• Las tasas están en una tabla sin <caption> y con la primera fila en <td> con negrita.
• El mapa de la oficina es un <iframe> sin title.
• El formulario de búsqueda aparece en la cabecera y en el pie, ambos con id="buscar".

Paso 1: la cabecera del documento

Se corrige la plantilla para que cada ficha genere su título con lo específico delante: «Licencia de obra menor - Sede electrónica del Ayuntamiento de Ejemplo» (2.4.2). Se cambia a lang="es" (3.1.1) y se comprueba que el viewport no bloquea el zoom. Como es un cambio de plantilla, queda corregido en todas las fichas a la vez.

Paso 2: landmarks y migas de pan

Cabecera en <header>, menú en <nav aria-label="Principal">, contenido en <main id="contenido"> y pie en <footer>. La ruta pasa a ser un <nav aria-label="Migas de pan"> con una <ol> y aria-current="page" en el último elemento, con los separadores en CSS.

Paso 3: encabezados y listas

El nombre del trámite pasa a <h1> dentro de <main>. Los apartados («Requisitos», «Documentación», «Tasas», «Plazo de resolución», «Dónde presentarlo») se convierten en <h2>, en el mismo orden que en el resto de fichas. Los requisitos pasan a <ul> y los pasos para presentar la solicitud a <ol>. Los datos de resumen (órgano, plazo, forma de presentación) se marcan con <dl>.

Paso 4: la tabla de tasas

Se añade <caption>Tasas de la licencia de obra menor según el presupuesto de la obra</caption>, la primera fila pasa a <th scope="col"> y la primera columna a <th scope="row">. Ahora, al llegar a un importe, NVDA anuncia el tramo y el tipo de tasa: era exactamente el problema que había llegado al buzón.

Paso 5: contenido incrustado y robustez

El mapa recibe title="Mapa de ubicación de la Oficina de Urbanismo" y la dirección se añade en texto. Los dos buscadores se generan con identificadores distintos (buscar-cabecera, buscar-pie), y el <search> del pie, al estar repetido, se nombra para distinguirlo. Se valida el DOM generado y se revisa el árbol de accesibilidad para confirmar nombres y roles.

El esqueleto final de la ficha queda así:

<main id="contenido">
  <h1>Licencia de obra menor</h1>
  <dl>…órgano, plazo, presentación…</dl>
  <h2>Requisitos</h2>
  <ul>…</ul>
  <h2>Documentación</h2>
  <ul>…</ul>
  <h2>Tasas</h2>
  <table>
    <caption>Tasas de la licencia de obra menor según el presupuesto de la obra</caption>
    …
  </table>
  <h2>Dónde presentarlo</h2>
  <p>Oficina de Urbanismo: Plaza Mayor, 1, planta baja.</p>
  <iframe src="…" title="Mapa de ubicación de la Oficina de Urbanismo"></iframe>
</main>
<aside aria-labelledby="rel">
  <h2 id="rel">Trámites relacionados</h2>
  …
</aside>

Infografía · Proceso

Revisar la estructura de una página en 6 pasos

El orden que siguió el equipo del caso práctico y que puedes repetir en cualquier plantilla

1. 1Paso 1: Revisar el documentoTítulo único, idioma correcto y viewport que permite ampliar
2. 2Paso 2: Listar los landmarksUn main, todo el contenido dentro de regiones y nombres distintos si se repiten
3. 3Paso 3: Listar los encabezadosUn h1, sin saltos de nivel hacia abajo y textos que describan cada sección
4. 4Paso 4: Revisar listas y tablasListas reales; tablas de datos con caption, th y scope
5. 5Paso 5: Validar el marcadoSin ids duplicados, sin interactivos anidados ni atributos mal escritos
6. 6Paso 6: Confirmar en el árbolRol y nombre en el panel de accesibilidad, y escucha con un lector de pantalla

Leer la infografía como texto

Proceso de seis pasos en secuencia. Paso 1, revisar el documento: título único, idioma correcto y viewport que permite ampliar. Paso 2, listar los landmarks: un único contenido principal, todo el contenido dentro de alguna región y nombres distintos cuando se repite un tipo. Paso 3, listar los encabezados: un solo h1, sin saltos de nivel hacia abajo y con textos que describan cada sección. Paso 4, revisar listas y tablas: enumeraciones marcadas como listas reales y tablas de datos con caption, th y scope. Paso 5, validar el marcado: sin identificadores duplicados, sin elementos interactivos anidados ni atributos mal escritos. Paso 6, confirmar en el árbol de accesibilidad: comprobar rol y nombre en el panel del navegador y escuchar la página con un lector de pantalla.

Ejercicios de autoevaluación

Ejercicio 1. Un botón de búsqueda contiene solo un icono de lupa en SVG con aria-hidden="true". En el panel de accesibilidad aparece con rol «button» y nombre vacío. ¿Qué harías?

Ver solución

Darle un nombre: lo mejor es texto visible («Buscar»); si el diseño solo admite el icono, aria-label="Buscar" en el botón. Sin nombre se incumple 4.1.2 Nombre, función, valor.

Ejercicio 2. La lista de encabezados de una página muestra: h1 «Servicios sociales», h4 «Ayudas a domicilio», h4 «Teleasistencia», h2 «Contacto». ¿Qué está mal?

Ver solución

Hay un salto de nivel hacia abajo de h1 a h4. «Ayudas a domicilio» y «Teleasistencia» deben ser h2 (o h3 si cuelgan de un h2 intermedio, como «Programas»). El tamaño visual se ajusta con CSS.

Ejercicio 3. En una tienda en línea, el precio rebajado se muestra como <del>49 €</del> 35 €. Una persona usuaria de lector de pantalla dice que no sabe cuál es el precio. ¿Por qué y cómo se corrige?

Ver solución

Con la configuración habitual, el lector no anuncia el tachado y se oye «49 € 35 €». Hay que expresar el significado en el texto, visible u oculto visualmente: «Antes: 49 €», «Ahora: 35 €». Es un caso de 1.3.1 Información y relaciones.

Ejercicio 4. Un portal tiene un menú principal y un menú de pie con enlaces legales, ambos en <nav> sin nombre, y las migas de pan en un <div>. ¿Qué cambiarías?

Ver solución

Dar un nombre distinto a cada navegación («Principal», «Enlaces legales») y convertir las migas de pan en un <nav aria-label="Migas de pan"> con lista ordenada y aria-current="page" en la página actual. Así la lista de landmarks permite distinguirlas y llegar a cada una.

Ejercicio 5. Una web en catalán y castellano muestra el selector de idioma «Català | Castellano». La versión en castellano tiene <html lang="ca">. ¿Qué problemas hay?

Ver solución

El lang del documento no coincide con su idioma real (3.1.1): el castellano se leerá con voz catalana. El enlace «Català» debe llevar lang="ca" (3.1.2) y hreflang="ca". Y la barra vertical se leerá como texto: los enlaces del selector deben ser una lista, con el separador en CSS.

Lista de comprobación

• Cada página tiene un title único con lo específico delante.
• html lang es válido y coincide con el idioma real; los fragmentos en otro idioma llevan su lang.
• El viewport no impide ampliar.
• Hay un único main y todo el contenido está dentro de algún landmark.
• Los landmarks repetidos tienen nombres distintos.
• Hay un solo h1, sin saltos de nivel hacia abajo, y los textos describen cada sección.
• Las enumeraciones son ul, ol o dl reales.
• Las tablas de datos tienen caption, th y scope.
• Ningún significado depende solo de negrita, tachado o color.
• Las migas de pan y la paginación son nav con nombre y aria-current.
• Hay al menos dos vías para llegar a cada página.
• Todo iframe tiene un title descriptivo.
• No hay identificadores duplicados ni elementos interactivos anidados.
• El orden del código coincide con el orden visual y lógico.
• Cada control tiene rol y nombre correctos en el árbol de accesibilidad.

Para seguir aprendiendo

• Page Structure Tutorial (W3C WAI): regiones, encabezados y estructura del contenido, con ejemplos de código.
• Tables Tutorial (W3C WAI): tablas simples, irregulares y con varios niveles de encabezados.
• HTML Accessibility API Mappings (W3C): cómo se traduce cada elemento HTML a roles y nombres en el árbol de accesibilidad.
• Breadcrumb Pattern (W3C APG (se abre en una ventana nueva)): el patrón de migas de pan con su ejemplo de código.
• WCAG 2.2 (W3C): el texto oficial de todos los criterios citados en el curso.