quoroom.org

Accesibilidad

Este sitio trata de elecciones, y una elección en la que nadie puede participar es justo el problema que existe para describir. Al propio sitio se le aplica el mismo criterio. Abajo está lo que hace, medido en vez de afirmado, y lo que todavía se sabe que no hace.

Qué hace el sitio

Se lee sin JavaScript

Cada página es un documento estático. El único script de todo el sitio funciona en dos páginas y despliega la explicación de una cita — y esa explicación ya está en la página, de modo que con los scripts desactivados se ve en lugar de faltar. La calculadora de plazos necesita JavaScript para calcular, y los plazos legales que calcula están escritos en el texto de las páginas que enlaza.

Se maneja desde el teclado

Cada página empieza con un enlace saltar al contenido que es lo primero que alcanza el tabulador. El foco siempre se ve: un contorno de 2,5 px, separado del elemento, en cada enlace, botón, campo y control. El único componente interactivo — el despliegue de la cita — sigue el patrón estándar: un botón con aria-expanded, una región que nombra con aria-controls, Escape para cerrar, y el foco devuelto al botón al cerrarse.

Está estructurado, no solo maquetado

Un <h1> por página y encabezados que descienden en orden; un único punto de referencia <main> en las 38 páginas; tablas de verdad con celdas de encabezado, no rejillas de divs; listas marcadas como listas; y el idioma declarado en cada página — incluidas las españolas, que además marcan como inglés el texto legal en inglés que contienen, para que un lector de pantalla cambie de voz en vez de leer inglés con fonemas españoles.

El contraste está medido, no calculado a ojo

Cada color de texto se calculó contra la superficie que tiene detrás, en el tema claro y en el oscuro. Los resultados:

Los números se miden contra la superficie sobre la que cada color está de verdad, que en este sitio a menudo no es blanca: los bloques de ley, las cajas destacadas y el pie están sobre un tono, y el subapartado al que usted enlaza se resalta sobre otro más cálido. Esas superficies son la restricción que manda, y cumplirlas deja poco margen entre los dos grises — así que el escalón entre el texto secundario y las etiquetas pequeñas lo lleva el tamaño y el peso, y no un color más pálido que caería por debajo del umbral.

Cuatro de esas filas fueron incumplimientos en algún momento, y las cuatro aparecieron midiendo, no mirando:

• La franja de cierre tomaba el fondo del mismo token que el texto de los encabezados, que se invierte en el tema oscuro — así que la franja se volvía pálida mientras el encabezado sobre ella seguía blanco. 1,1 : 1, prácticamente invisible. Ahora conserva su propio color en los dos temas.
• El botón principal era blanco sobre el naranja vivo de marca: 3,1 : 1 en claro y 1,9 : 1 en oscuro. Ahora usa un naranja más profundo en claro y texto oscuro sobre el naranja claro en oscuro.
• Las etiquetas pequeñas estaban en 2,6 : 1, por debajo incluso del mínimo para elementos no textuales.
• Los enlaces y el texto secundario superaban 4,5 sobre blanco pero se quedaban en 4,3 y 4,4 sobre el tono, que es donde está la mayoría de ellos.

El naranja vivo de marca se conserva para filos, barras y subrayados, donde el requisito son 3 : 1 sobre un elemento no textual. La comprobación que produjo esto recorre cada nodo de texto de 20 páginas en los dos temas, resolviendo el fondo real de cada elemento a través de sus ancestros: 3.788 nodos, ningún incumplimiento.

Respeta lo que pide su sistema

El tema sigue el ajuste claro u oscuro de su sistema operativo, con las dos paletas diseñadas y no invertidas. prefers-reduced-motion apaga todas las transiciones. El texto está en unidades relativas y la maquetación se reorganiza a una sola columna, de modo que el zoom del navegador y los tamaños de texto grandes funcionan en vez de romperla. Nada en el sitio parpadea, se reproduce solo, se mueve por su cuenta ni impone un límite de tiempo.

Carga desde un solo sitio

Las tipografías se sirven desde este mismo sitio. Al cargar una página no se hace ninguna petición a terceros, así que nada de aquí depende de que se resuelva una conexión con otra empresa — lo cual es una propiedad de accesibilidad además de una de privacidad, en una conexión lenta o filtrada.

Qué se queda corto

Lo listamos porque una declaración que no admite ninguna carencia no es creíble.

1. Sin auditoría independiente. Todo lo anterior es autoevaluado. No hemos tenido a ningún usuario de lector de pantalla probando el sitio, y esa es la prueba que más importa.
2. Los bloques largos de ley no tienen navegación interna. El § 5110 llega a decenas de subdivisiones. Cada una tiene su ancla, pero no hay índice al principio del bloque, así que llegar a la subdivisión (c)(4)(B) con teclado o lector de pantalla obliga a recorrer todo lo anterior.
3. La calculadora de plazos es una maquetación visual. Sus filas son una rejilla CSS, leída en orden de documento, lo cual es sensato pero no se anuncia como tabla con encabezados. Un lector de pantalla recibe los números sin el significado de las columnas.
4. La ilustración de la portada está descrita, no es navegable. Lleva una descripción textual de lo que muestra, pero sus cifras no son alcanzables una a una.
5. Las tablas comparativas se desplazan de lado en un teléfono. Es mejor que aplastarlas, pero una pantalla estrecha sigue obligando a desplazar horizontalmente para leer una fila.
6. Lenguaje claro. El comentario está escrito con toda la claridad que sabemos, pero describe artículos de ley y en algunos puntos se nota. WCAG no exige un techo de nivel de lectura en AA; lo mencionamos porque es una barrera real de todos modos.

Relacionado

• Acceso lingüístico en las elecciones — la misma pregunta hecha a las boletas.
• Política de privacidad — incluido por qué aquí no carga nada de terceros.
• Aviso legal — qué es este sitio y qué no es.