Declaración de accesibilidad

1. Mi compromiso

Quiero que este sitio sea utilizable por todo el mundo, incluidas las personas que navegan con teclado, con un lector de pantalla, con ampliación o con un ajuste de movimiento reducido o alto contraste. Aquí la accesibilidad se trata como parte de la construcción, no como una revisión final: varias de las medidas siguientes están respaldadas por pruebas automatizadas que hacen fallar la compilación si se produce una regresión.

2. Estado de conformidad

Este sitio aspira a cumplir las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 en el nivel AA. Considero que es sustancialmente conforme, es decir, que cumple los criterios de conformidad de nivel AA según mi leal saber y entender y según mis pruebas.

Deliberadamente no reclamo conformidad plena. No se ha llevado a cabo ninguna auditoría de accesibilidad independiente y no existe un informe formal de evaluación WCAG-EM para este sitio. Eso es un límite de la evidencia que respalda la afirmación, no un fallo conocido: cuando encuentro un fallo, figura en la sección 5.

3. Qué está implantado

Teclado y foco

Un enlace para saltar al contenido es el primer elemento enfocable de cada página que incluye la navegación del sitio, y mueve el foco al contenido principal en lugar de limitarse a desplazarse hasta él.
Cada elemento interactivo muestra un indicador de foco visible. La regla que lo dibuja no puede desactivarse mediante una clase de utilidad, y una prueba lo garantiza.
El menú móvil es una trampa de foco: el foco entra en él al abrirse, circula dentro con Tab, se cierra con Escape y vuelve al botón que lo abrió.
Ningún elemento toma un tabindex positivo, de modo que el orden de tabulación sigue a la página.

Estructura y lectores de pantalla

Exactamente una región main por página y —dondequiera que estén presentes la cabecera y el pie del sitio— una región banner y una contentinfo, además de regiones de navegación con nombre.
Exactamente un h1 por página, con los encabezados anidados en orden por debajo y sin niveles omitidos.
Cada imagen lleva texto alternativo, y los gráficos decorativos se ocultan a las tecnologías de apoyo en lugar de recibir descripciones de relleno.
Cuando un icono transmite el significado de un control, ese control tiene un nombre textual: la etiqueta visible siempre inicia ese nombre, de modo que la entrada por voz pueda dirigirse a él por lo que dice.
El idioma de la página está declarado y cada página tiene un título único y descriptivo.

Color, contraste y tipografía

Los colores de texto e interfaz se derivan en tiempo de compilación y se comprueban contra sus propios fondos: el texto corrido se mantiene en al menos 4,5:1, el texto principal en 7:1, y cualquier relleno sólido de botón se oscurece hasta que su etiqueta supera 4,5:1.
Ningún texto del sitio se representa por debajo de 12 px. Es un mínimo, garantizado por una prueba.
El color nunca es la única forma de transmitir información: los estados seleccionados llevan además una etiqueta, una forma o un valor aria-current.
Están disponibles un tema claro y uno oscuro. El sitio se abre en oscuro en lugar de leer su ajuste del sistema, y recuerda el que usted elija con el conmutador de la cabecera.

Movimiento, zoom y puntero

Se respeta el movimiento reducido. Si su sistema lo solicita, se suprimen las animaciones de entrada, las revelaciones al desplazarse y las transiciones de vista.
Se contemplan el contraste aumentado y el modo de alto contraste de Windows: el texto con degradado recurre a un color sólido, y los estados indicados solo por relleno reciben un borde con color del sistema.
El zoom no está bloqueado. La página puede ampliarse al 500 % y, con el ancho de 320 px que especifica el criterio WCAG 1.4.10 «Reflujo», se dispone en una sola columna sin desplazamiento horizontal. Se comprueba cada ancho entre 320 px y 1920 px, no solo los puntos de ruptura con nombre.
Los controles interactivos presentan un objetivo de al menos 44 × 44 px, lo que supera el mínimo de 24 × 24 px de WCAG 2.2. Cuando un control se dibuja más pequeño, su área pulsable se amplía por detrás en lugar de dejarse pequeña. La única excepción es un enlace dentro de una frase, que se acoge a la exención en línea de WCAG 2.5.8: forzar allí una altura fija rompería el interlineado del párrafo que lo rodea.

Formularios

Cada campo tiene un nombre asociado mediante programación. Cuando un formulario tiene más de un campo —el formulario de contacto y el panel de preferencias de cookies—, ese nombre es una <label> visible. Los controles de un solo campo (alta en la newsletter, búsqueda en los listados, caja de comentarios, aviso de acceso por correo) toman su nombre de un aria-label, y el encabezado, el icono o el botón contiguo transmite el mismo significado en pantalla.
Los errores se describen con texto junto al campo al que pertenecen, no solo mediante color, y se vinculan a él para que un lector de pantalla anuncie el mensaje cuando el campo recibe el foco.
Enviar un formulario con un campo no válido mueve el foco a ese campo, de modo que el problema lo encuentra a usted y no al revés.
Los campos de texto se representan a 16 px en dispositivos táctiles, de modo que enfocarlos no fuerza un zoom de iOS que no se pueda deshacer.

4. Cómo se ha evaluado

Mediante autoevaluación, combinando comprobaciones automatizadas y manuales:

Pruebas automatizadas en la propia batería de pruebas del proyecto, que hacen fallar la compilación ante regresiones en los indicadores de foco, el tamaño mínimo del texto, el tamaño de los objetivos, la estructura de regiones, el texto alternativo de las imágenes y el orden de los encabezados.
Contraste medido a partir de los píxeles representados, componiendo las capas translúcidas en lugar de leer los colores declarados.
Un barrido de ventana gráfica de 320 px a 1920 px que comprueba el desbordamiento horizontal, los elementos superpuestos y el texto recortado en cada paso intermedio, no solo en los puntos de ruptura con nombre.
Recorridos manuales con teclado y comprobaciones en varios motores: Chromium, Firefox y WebKit.

5. Limitaciones conocidas

Sin auditoría independiente. Todo lo anterior es autoevaluado. Una auditoría realizada por alguien distinto del autor sería una base más sólida para la declaración de conformidad de la sección 2.
Pruebas limitadas con tecnologías de apoyo. La estructura y el comportamiento se verifican contra el árbol de accesibilidad y con teclado, pero el sitio no se ha probado de principio a fin con todos los lectores de pantalla principales.
Contenido de terceros. La programación de citas la gestiona un servicio de reservas externo en su propio dominio. No controlo su accesibilidad. Si eso supone una barrera para usted, utilice cualquiera de las vías de contacto de la sección 6: siempre se puede concertar una llamada por correo electrónico.
Medios incrustados. Hoy no hay ningún vídeo publicado en este sitio. El vídeo de presentación que la página «Sobre mí» anuncia todavía no está grabado; cuando lo esté, los criterios WCAG 1.2.2 y 1.2.3 exigirán subtítulos y una transcripción para el nivel de conformidad declarado más arriba.

6. Comentarios y cómo contactarme

Si encuentra una barrera en este sitio, dígamelo: es la forma más rápida de que se corrija, y los avisos son bienvenidos aunque no esté seguro de que el problema esté de mi lado.

Escriba a contact@mhsaeed.com — ponga «Accesibilidad» en el asunto si desea que se priorice.
O utilice el formulario de contacto.

Respondo en un plazo de 24 horas, el mismo compromiso que asume la página de contacto. Describa, por favor, la página, qué intentaba hacer y el navegador o la tecnología de apoyo que utilizaba, si le parece bien compartirlo: hace que el problema sea mucho más rápido de reproducir.