Informe ilustrativo · 17 de octubre de 2026

Sitio corporativo de agencia: revisión de accesibilidad

Northline Studio · northline.example

Demostración ficticia. Clientes, dominios, hallazgos y evidencia son ilustrativos. Estos informes muestran la estructura, no análisis reales ni pruebas de resultados del producto.

Elegir plan

Resumen ejecutivo

Aclara primero el formulario y la navegación, necesarios para explorar servicios y contactar. Revisa después la descripción de la imagen del caso.

Páginas revisadas: 4
Tipos de hallazgos: 3
Crítica: 3
Moderada: 0

Las cifras representan tipos de hallazgos del ejemplo, no elementos afectados. La gravedad indica prioridad, no cumplimiento.

Alcance y método

Recorrido del cliente: Discover services → read a case study → send an inquiry.

Páginas de ejemplo: //services/work/contact

Método: controles axe de cada página pública cargada. El ejemplo no cubre áreas privadas, todos los estados, teclado, lectores de pantalla ni evaluación WCAG completa. Los hallazgos requieren confirmación humana.

Este informe identifica hallazgos automáticos de accesibilidad. No acredita el cumplimiento legal; sigue siendo necesaria una evaluación manual.

Accesibilidad: normas y ámbito de aplicación

Hallazgos priorizados

Prioridad	Hallazgo	Página / regla	Próximo paso
Critical	Email field has no accessible label	`/contact` `label`	Connect a visible label to the email field.
Critical	Menu button has no accessible name	`/` `button-name`	Name the menu control and expose its expanded state.
Critical	Case-study image is missing an alternative	`/work` `image-alt`	Describe the project image or mark it decorative after reviewing its purpose.

Evidencia y corrección

Dos hallazgos se detallan para mostrar la entrega a implementación.

Hallazgo 1 · Critical

Email field has no accessible label

Elemento afectado: #contact-form input[type="email"] en /contact

Por qué importa: A person using a screen reader needs a reliable name for the field. An unnamed input gives no reliable indication of the information expected.

1 · Esquema de evidencia ilustrativa. Fragmento recreado, no una captura ni análisis real. Illustrative markup contains an email input with no associated label, aria-label, or aria-labelledby.

Corrección sugerida

Add a visible Work email label, connect it with for/id, and preserve the expected email input type and autofill hint.

Antes · HTML ilustrativo

<input type="email">

Después · HTML sugerido

<label for="email">Work email</label>
<input id="email" name="email" type="email"
  autocomplete="email" required>

Verifica la corrección: Re-run the label rule. Tab into the field and confirm that a screen reader announces Work email, its input type, and required state. Submit an invalid email and review the error message separately.

Hallazgo 2 · Critical

Menu button has no accessible name

Elemento afectado: header button.menu-toggle en /

Por qué importa: An icon alone does not tell a screen reader user what the button does. The expanded state helps people understand whether navigation is open.

1 · Esquema de evidencia ilustrativa. Fragmento recreado, no una captura ni análisis real. Illustrative markup contains only an SVG inside a button; the SVG is decorative and supplies no accessible name.

Corrección sugerida

Give the button an accessible name. Update aria-expanded when the menu opens or closes and connect aria-controls to the navigation container.

Antes · HTML ilustrativo

<button class="menu-toggle">
  <svg aria-hidden="true">…</svg>
</button>

Después · HTML sugerido

<button class="menu-toggle" aria-label="Menu"
  aria-controls="site-nav" aria-expanded="false">
  <svg aria-hidden="true">…</svg>
</button>

Verifica la corrección: Re-run the button-name rule, then open and close the menu with Enter and Space. Confirm the state is announced, links are reachable, and focus remains predictable when the menu closes.

Entrega recomendada

Confirma los hallazgos en la interfaz real y acuerda responsables y alcance.
Resuelve primero los hallazgos críticos; revisa cada cambio en contexto.
Prueba el recorrido con teclado y tecnología de asistencia.
Repite las mismas páginas, registra la revisión manual pendiente y comparte los cambios.