Declaración de accesibilidad

LUZ aspira a cumplir WCAG 2.2 nivel AA. Aquí se explica qué se comprueba en cada cambio, qué no se ha probado y cuáles son los problemas conocidos. Última revisión: 5 de noviembre de 2026.

Objetivo

LUZ aspira a cumplir el nivel AA de WCAG 2.2, La versión de EN 301 549 que cita hoy la Ley Europea de Accesibilidad (3.2.1) exige WCAG 2.1 nivel AA; la versión 4.1.1, publicada en septiembre de 2026, exige la 2.2. LUZ no ha sido auditada con respecto a ninguna de las dos normas.

Un sistema de diseño no puede hacer que un servicio sea accesible por sí solo: el resultado depende de cómo uses los componentes. En la página de cada componente se explica qué debes hacer, en las secciones Teclado y ARIA y Cómo escribir el contenido.

Qué se comprueba en cada cambio

• Análisis automatizado con axe-core de la página de inicio, en inglés, español y árabe, y de todas las páginas de la documentación en los modos claro, oscuro y de alto contraste. En las páginas de componentes y patrones, el análisis se ejecuta una vez con cada pestaña abierta; en una selección de páginas, también se ejecuta con el diálogo de búsqueda abierto, tanto con resultados como sin ellos. Un hallazgo grave o crítico hace que falle la compilación.
• Uso con teclado del panel lateral, el diálogo modal, las pestañas, las pestañas Código y Diseño de las páginas de componentes, el índice «En esta página» (cuyos enlaces abren la pestaña de la sección a la que apuntan) y la búsqueda: Ctrl+K, las flechas para recorrer los resultados, Enter y Escape.
• La estructura de las páginas de documentación. El enlace para saltar lleva al contenido principal (WCAG 2.4.1, Evitar bloques). La cabecera, la barra lateral, las migas de pan, la página, la barra de navegación y el pie son regiones de referencia; cada navegación tiene su propio nombre. La barra lateral es una lista plana con todas las áreas desplegadas. A partir de 769 píxeles de ancho se muestra como columna. Por debajo, es un panel que se abre con el botón Menú, mediante la API popover y sin script. Con JavaScript, al cargar la página la barra lateral desplaza el enlace de la página actual a la vista; la página y el foco no se mueven.
• La barra lateral de navegación de una página de documentación: aparece antes del contenido en el código fuente, y el enlace para saltar la sobrepasa para llegar al contenido. A partir de 80 rem de ancho es una columna fija junto al contenido; por debajo, se dibuja encima del contenido para evitar el desplazamiento horizontal. En ese caso, con JavaScript, «En esta página» está plegado al cargar la página y su resumen permite abrirlo. «Copiar página como Markdown» copia la página en el portapapeles y lo indica en un mensaje de estado; si falla, el mismo mensaje lo indica. Se comprueba con y sin JavaScript.
• La luz de la página de inicio: el control deslizante con teclado, el estado abierto o cerrado de la barra, los nombres y el texto de valor en cada idioma, axe con la barra abierta en distintas luces, los colores forzados y que, con movimiento reducido, nada solicite un fotograma de animación.
• Las páginas sin JavaScript: el contenido se puede leer a 320 píxeles de ancho, las secciones Código y Diseño de una página de componente aparecen una detrás de otra, el botón de búsqueda es un enlace al índice A–Z y no queda en pantalla ningún control que necesite JavaScript sin funcionar. El control de modo de color del pie muestra una opción de modo automático y tres opciones para los modos, que siguen permitiendo cambiarlo. Sin JavaScript, la elección de modo de color solo se aplica a la página actual. Además, un enlace a una sección de la misma página deja abierto el menú; Escape o el botón de menú lo cierran. «Copiar página como Markdown» es un enlace al archivo index.md de la página. El formulario «Pruébalo» y la opción de ancho Teléfono, Tablet y Completo de los ejemplos permanecen ocultos. El selector de idioma de la página de inicio abre su lista de idiomas, que son enlaces, mediante la API popover y sin script.
• Movimiento reducido: no se ejecuta ninguna transición ni animación cuando la persona visitante solicita menos movimiento.
• La línea de tiempo: sus teclas (flechas, Home y End para las fechas, reflejadas de derecha a izquierda), los botones Anterior y Siguiente, los nombres de los botones, que la reproducción automática es opcional y tiene un botón visible Pausar / Reproducir, y que con movimiento reducido no se inicia la reproducción automática ni se muestra el botón.
• El incrustado: que el enlace sin JavaScript pasa a ser un botón con el mismo nombre, que la pregunta recibe el foco y Ahora no lo devuelve al botón, que el marco del reproductor recibe el foco y tiene título, que Escape se deja en paz y que no se pide nada al origen del reproductor antes de que el visitante actúe ni sin su consentimiento.
• El gráfico: que la tabla está en la página y se lee junto al dibujo, que el dibujo queda oculto a la tecnología de apoyo, que el botón cambia uno por otra y que las series se distinguen en colores forzados.
• Colores forzados: los botones y resultados de búsqueda mantienen un contorno visible al recibir el foco, la pestaña seleccionada conserva el subrayado y el diálogo de búsqueda mantiene el borde.
• La página de inicio en árabe, de derecha a izquierda: no debe desbordarse a 320 píxeles de ancho, ni con JavaScript ni sin él.
• Texto de derecha a izquierda: el ejemplo de cada componente, excepto el reproductor, se dispone con dir="rtl" junto a su versión de izquierda a derecha. Cada elemento con texto y cada control deben ocupar la posición que les corresponde al reflejar el diseño, y nada debe desbordarse. Se comprueba con y sin JavaScript.
• Contraste del texto escrito para las páginas de inicio y de documentación, en los tres modos.
• Antes de esta versión, las mismas pruebas automatizadas se ejecutaron una vez en Firefox 155 y en WebKit 26.6 y 27.2 (el motor de Safari), en Linux, y se corrigieron los hallazgos. No se ejecutan en cada cambio y tampoco se prueba en macOS ni iOS.
• llms.txt y classes.json se regeneran en cada cambio; si alguno está desactualizado, la compilación falla.
• Un script comprueba el contraste de cada par de tokens que representa un componente, en los tres modos base. El mismo script mide cualquier tema propio, como se explica en la página de temas.

Para revisarlo a mano: todos los componentes y etiquetas HTML en una página, en los tres modos y con texto de derecha a izquierda.

Qué no se ha probado

• Lectores de pantalla. En esta versión no se ha probado con ninguna tecnología de asistencia: no se han probado NVDA, JAWS, VoiceOver, TalkBack ni Orca. Nada de lo que se indica aquí garantiza que un componente funcione con ellos.
• Software de reconocimiento de voz y de ampliación de pantalla.
• Texto de derecha a izquierda revisado por una persona que lo lea o con un lector de pantalla. Un script solo mide la maquetación, no los controles del reproductor.
• Ampliación manual al 400 %. Solo se mide el ancho de 320 píxeles.
• Investigación con personas con discapacidad.
• El informe de accesibilidad que muestra @luz-ds/check y la propia herramienta luz-check. Analizan archivos fuente y ofrecen recomendaciones; no abren páginas, no miden lo que se ve en pantalla ni usan tecnología de asistencia. Que una ejecución no encuentre problemas no significa que la página sea accesible.

Las herramientas automatizadas solo detectan una parte de los problemas. Considera esta lista como lo que queda por comprobar y prueba tus propias páginas.

Problemas conocidos

• Tooltip. Escape no lo cierra. Incumple parcialmente WCAG 1.4.13 (Contenido al pasar el puntero o al recibir el foco). No hagas que los tooltips contengan información imprescindible.
• Modal. Sus botones usan los atributos command y commandfor. En un navegador que no los admite, si tampoco hay JavaScript, el botón de apertura no hace nada.
• Reproductor. MIDI necesita JavaScript y Web Audio. Sin ellos, el reproductor muestra un mensaje. En esta web de documentación, los archivos de subtítulos del vídeo de ejemplo solo se cargan con JavaScript; sin él, el navegador muestra las pistas, pero no el texto.
• Select. La lista abierta pertenece al navegador o al sistema, así que su aspecto y funcionamiento varían. En los navegadores que admiten appearance: base-select (Chrome y Edge 135, Safari 27), LUZ también aplica estilos a la lista, que aún no se ha probado con un lector de pantalla. Funciona sin JavaScript.
• Tarjeta enlazada. El enlace del título cubre toda la tarjeta, por lo que no se puede seleccionar con el ratón el texto del cuerpo. Se puede seleccionar con el teclado, encontrar en la página y leer con lectores de pantalla como de costumbre.
• Tabla ordenada en el navegador. La columna ordenada se indica con aria-sort en su encabezado, y cada ordenación se anuncia en un mensaje de estado. Al recorrer los encabezados con Tab se anuncia el nombre de la columna; el estado de ordenación se lee en la celda de encabezado y en el mensaje de estado. Solo se ha comprobado en el árbol de accesibilidad de Chromium; aún no se ha probado con NVDA, JAWS, VoiceOver, TalkBack ni Orca.
• Avatar con foto. Si la foto no se carga, el navegador muestra dentro del recuadro su texto alternativo en mayúsculas; si el nombre es largo, puede sobresalir.
• Pestañas Código y Diseño. La última pestaña elegida se abre una vez cargada la página, por lo que el contenido inferior puede desplazarse una vez.
• Buscar en la página. En los navegadores que no admiten hidden="until-found" (Safari anterior a la versión 26.2, Firefox anterior a la 139), la búsqueda en la página (Ctrl+F) no encuentra texto en la pestaña cerrada. En Safari 26.2 y posteriores, abre la pestaña, pero no se desplaza hasta la coincidencia. Abre la otra pestaña o desactiva JavaScript para verlas ambas.
• Elige tu fragmento. Sin JavaScript, el selector no aparece en la página, se muestran todos los fragmentos uno tras otro y la tabla de índice, cuyas celdas enlazan a los fragmentos, sirve para navegar. Con JavaScript, el selector reemplaza la tabla, muestra un fragmento y lo anuncia mediante su <output>, una región de estado. El foco se queda en la opción que has elegido. El anuncio aún no se ha probado con un lector de pantalla.
• Personaliza LUZ, demostración de tamaños. La demostración de tamaños es opcional: la tabla de ajustes predefinidos de la página los enumera sin ella. Sin JavaScript, la demostración no aparece, así que no queda ningún control en pantalla sin funcionar. Con JavaScript, los controles deslizantes cambian el tamaño de la propia página, no de un ejemplo, y el botón Restablecer tamaños devuelve la página a su estado inicial; no se guarda nada, así que recargarla tiene el mismo efecto. Los controles cambian el tamaño del texto y el espaciado de la página; se respeta el tamaño de texto elegido por cada persona, porque la escala usa rem y sigue el tamaño configurado en el navegador.
• Atajo de búsqueda. Ctrl+K (⌘K en Mac) abre la búsqueda de la documentación en lugar del cuadro de búsqueda web del navegador. Usa la barra de direcciones del navegador para buscar en la web. El botón de búsqueda muestra el atajo; no hace nada mientras escribes en un área de texto o contenido editable, y no hay atajos de una sola tecla. En un campo de una línea sí abre la búsqueda, así que en Mac sustituye allí a Ctrl+K («borrar hasta el final de la línea»). En un sitio que carga la búsqueda con catalog.js, el script propio de búsqueda se carga cuando la página está inactiva o al señalar o enfocar la búsqueda: si pulsas Ctrl+K antes, el script se carga y luego abre la búsqueda, tras una breve espera si la conexión es lenta. En una página sin búsqueda, Ctrl+K sigue siendo del navegador.
• Búsqueda. No se ha probado con un lector de pantalla. El número de resultados se anuncia cuando dejas de escribir. Hasta que se carga su script, la búsqueda es un enlace al índice A–Z en el mismo lugar; si estás sobre ese enlace cuando llega el script, permanece hasta que salgas de él y el foco nunca se desplaza. Si no se puede cargar el script, el enlace permanece. Al cerrar la búsqueda, el foco vuelve a donde estaba; si no había ningún elemento enfocado, como ocurre al pulsar Ctrl+K justo después de cargar la página, pasa al botón de búsqueda y el siguiente Tab continúa desde ahí.
• Búsqueda con zoom al 400 %. Todo el diálogo de búsqueda se desplaza, por lo que el campo de búsqueda puede desaparecer de la vista mientras lees los resultados. Pulsa Shift+Tab o la flecha arriba desde el primer resultado para volver al campo.
• Barra lateral de documentación. Cada página de la documentación aparece como enlace en una única lista larga de la barra lateral, con todas las áreas desplegadas. El enlace de la página actual lleva aria-current="page" y su área lleva aria-current="true". Usa el enlace para saltar, la búsqueda (Ctrl+K) o el índice A–Z para evitar recorrer toda la lista con Tab. Con JavaScript, al cargar la página la barra lateral se desplaza hasta la página actual y el foco permanece donde estaba. Sin JavaScript, empieza por arriba. El panel lateral que aparece por debajo de 769 píxeles de ancho es un popover nativo: Escape lo cierra. No se ha probado con un lector de pantalla.
• Barra de navegación lateral y «Copiar página como Markdown». La barra incluye «En esta página», un elemento <details> nativo que está abierto (con JavaScript se cierra al cargar por debajo de 80 rem de ancho), y tres acciones. A partir de 80 rem de ancho, la barra permanece fija y el indicador de la sección visible depende del script de catalog. Sin JavaScript, «Copiar página como Markdown» es un enlace que abre el archivo Markdown de la página. Con JavaScript y acceso al portapapeles, es un botón con el mismo texto y no abandona la página. Su mensaje de estado («Página copiada como Markdown» o «No se ha podido copiar la página») es una región de estado y desaparece al cabo de cinco segundos. Si el archivo se carga, pero el navegador impide copiarlo al portapapeles, el navegador lo abre en su lugar. Si no se puede leer el archivo, el mensaje lo indica y el foco permanece en el botón. No se ha probado con un lector de pantalla.
• Probar y elegir el ancho del ejemplo. «Pruébalo» está en la página Botón; la opción Teléfono, Tablet y Ancho completo está en las páginas Botón, Tarjeta, Formulario y Tabla. Ambos controles están ocultos en el HTML y los muestra el script de la página, así que sin JavaScript no queda ningún control en pantalla sin funcionar. Ambos usan botones de opción nativos; «Pruébalo» también añade una casilla nativa. Al cambiar la opción, cambia la vista previa y, en «Pruébalo», el código que aparece debajo; el botón Copiar copia el nuevo código. No se anuncia el cambio. El botón de vista previa es lo que se prueba, no un control del formulario, y no hace nada. No se ha probado con un lector de pantalla.
• Índice A–Z. El índice tiene dos páginas, A–L y M–Z, para que ninguna sea demasiado extensa. La parte superior de cada página indica su intervalo y la fila de letras enlaza con las letras de la otra página. Los nombres que no empiezan por una letra de la A a la Z, como los que empiezan por un dígito, aparecen al final de la segunda página, en «Otros». El botón de búsqueda enlaza a la primera página hasta que se carga el script de búsqueda. No se ha probado con un lector de pantalla.
• Luz de la página de inicio. La sección bajo el hero dibuja el sol y la luna según la ubicación de la persona visitante, a partir de la zona horaria del navegador y sin solicitudes de red. Sin JavaScript, la sección está vacía y una frase explica para qué sirve. Con JavaScript, la frase bajo el dibujo es un botón (uno de los datos de la página sobre la luz, elegido al azar en cada carga) cuyo nombre termina con «Mostrar la barra de la luz», y lleva aria-expanded. La barra que controla muestra, de arriba abajo, la ubicación (la ciudad de la zona horaria del navegador) y la luz, la hora en tamaño grande y después un control deslizante llamado «Recorrer el día», cuyo texto de valor indica la luz y la hora. El control deslizante es un campo de rango normal: las flechas, Inicio y Fin lo mueven. Por debajo de 1024 píxeles de ancho, y en una pantalla que no puede pasar el puntero, el botón abre y cierra la barra, y Escape la cierra y devuelve el foco al botón. Desde 1024 píxeles de ancho en una pantalla que sí puede pasar el puntero, la barra está siempre abierta: Escape y el botón no la cierran. En reposo se dibuja al 70 por ciento de opacidad, lo bastante fuerte para que el texto de la ubicación, la luz y la hora mantenga el contraste de texto habitual sobre el cielo, y aparece completa bajo el puntero o cuando el foco está dentro. Al cambiar el tamaño de la ventana por encima o por debajo de 1024 píxeles, la barra se abre o se cierra en consecuencia. Al moverlo, toda la página adopta la luz y el modo de esa hora. Al soltarlo, esa hora se mantiene en todo el sitio, incluso después de recargar, hasta que se elige Claro, Oscuro o Alto contraste en el pie; un aviso «Modo guardado» en una región de estado lo confirma y desaparece al poco tiempo. El control deslizante muestra un sol de día y una luna de noche, además del texto de valor. El dibujo no es un control: el globo es una imagen que se puede arrastrar con el puntero y no tiene controles de teclado. Con movimiento reducido, nada del dibujo se anima. Además, las estrellas de la parte superior de la página al amanecer, al atardecer y de noche no parpadean ni se desplazan con el movimiento de la página. El globo se dibuja de inmediato; el terreno aparece un poco después, cuando el navegador está inactivo. Con colores forzados, el dibujo usa el color del texto y no se muestran las estrellas. El icono de la pestaña de la página de inicio sigue el cielo: de día muestra el sol sobre el horizonte y de noche, la luna, con los colores de la página; lo dibuja el script. Las demás páginas mantienen un icono fijo. No se ha probado con un lector de pantalla.
• Movimiento de la luz de la página de inicio. El globo gira despacio y las estrellas del amanecer, el atardecer y la noche parpadean y se desplazan con la página durante más de cinco segundos. El globo y las estrellas incumplen el criterio de éxito 2.2.2 de WCAG 2.2 (Pausar, detener, ocultar, nivel A). El movimiento solo se detiene con el ajuste de movimiento reducido del sistema; la página no tiene ningún botón ni otro control para pausarlo. No se ha probado con un lector de pantalla.
• Movimiento del logo. El prisma de la cabecera del sitio repite sin fin un bucle de 4,8 segundos: sus tres bandas de tono se atenúan y vuelven una tras otra. Dura más de cinco segundos y la página no tiene ningún botón ni otro control para pausarlo, así que no se cumple el criterio de éxito 2.2.2 de WCAG 2.2 (Pausar, detener, ocultar, nivel A). El propietario lo aceptó el 30 de octubre de 2026. Se detiene con el ajuste de movimiento reducido del sistema. El icono de la pestaña del navegador lleva el mismo bucle en su propio archivo; que el navegador lo reproduzca depende de él, y los que no lo hacen lo muestran quieto.
• Movimiento de las pestañas de la página de inicio. Las tres cajas de tokens, core y catalog pasan sus pestañas solas en bucle (instalar, lista, código), 3,2 segundos cada una, mientras la caja está en pantalla. Una línea se llena bajo la pestaña abierta. Pasar el puntero por la caja o enfocar algo dentro la detiene, y sigue 3 segundos después de que ambos se vayan. Elegir una pestaña, con un clic, con las teclas o con un enlace, lo termina para siempre en esa caja. Nunca mueve el foco, no anuncia nada, no se ejecuta mientras la caja está fuera de pantalla y no arranca con el ajuste de movimiento reducido del sistema. Dura más de cinco segundos y no tiene un control propio para pausarlo, así que no se cumple el criterio de éxito 2.2.2 de WCAG 2.2 (Pausar, detener, ocultar, nivel A). El propietario lo aceptó el 31 de octubre de 2026.
• Orden de los botones del hero en un móvil. En la página de inicio, a 640 píxeles de ancho o menos, Get started with AI se muestra encima de Get started, pero va en segundo lugar en el código de la página, así que Tab y un lector de pantalla llegan antes a Get started. El orden visual y el de lectura difieren para este botón, lo que no cumple al pie de la letra WCAG 2.4.3 (Orden del foco) ni 1.3.2 (Secuencia con sentido, nivel A). Los tres enlaces siguen en una columna y cada uno dice adónde va, así que no se pierde significado. El propietario lo aceptó el 30 de octubre de 2026; desde 641 píxeles de ancho el orden es el mismo en el código y en pantalla.
• Selector de idioma. La lista de idiomas se abre en una posición fija debajo de la cabecera, no junto al botón. Por debajo de 360 píxeles de ancho, el botón solo muestra un globo; el nombre del idioma sigue siendo su nombre accesible. No se ha probado con un lector de pantalla.
• Menú de la navbar. En pantallas estrechas, el menú de una navbar de una cabecera de landing, CMS o docs se abre en un panel debajo de la cabecera. Si sigues pulsando Tab después del último enlace, el foco pasa a la página y el panel permanece abierto sobre ella. Pulsa Escape para cerrarlo. (Criterio de éxito 2.4.12 de WCAG 2.2, nivel AAA; se cumple el criterio 2.4.11 de nivel AA). Cuando se admite el posicionamiento de anclas CSS (Chrome y Edge 125, Safari 26, Firefox 147), el panel se abre debajo de la cabecera, dondequiera que termine. En navegadores más antiguos se abre desde la parte superior de la ventana, a la altura de una barra de una sola fila con el tamaño de texto predeterminado (--luz-bar-h): si se amplía el texto y la cabecera ocupa dos filas, o hay un banner encima antes de desplazar la página, puede cubrir parte de la cabecera.
• Submenú. Un submenú de los enlaces de una cabecera es un elemento de revelado nativo: Escape y un clic fuera no lo cierran; sí lo hace su propio botón o abrir otro (en Firefox anterior a 130 y Safari anterior a 17.2 pueden quedar varios abiertos). A partir de 769 píxeles de ancho, el submenú abierto permanece sobre la parte superior de la página, así que si sigues pulsando Tab después de él, puede quedar oculto un enlace que hay detrás (criterio de éxito 2.4.11 de WCAG 2.2, Foco no oculto, nivel mínimo). Pulsa su botón para cerrarlo. En el menú estrecho, sus enlaces siguen el flujo y Escape cierra todo el menú. No se ha probado con un lector de pantalla.
• Anuncio. No se puede cerrar. No tiene script.
• Transición de página. La página se desvanece en la siguiente en Chrome y Edge 126 y Safari 18.2 o posterior. Firefox no la reproduce y navega como siempre. Si el lector pide movimiento reducido, no empieza ninguna transición. La página no se puede usar durante los 0,2 segundos que dura el fundido. El foco y el anuncio de la página nueva son los de cualquier navegación. No se ha probado con un lector de pantalla.
• Preguntas frecuentes. Cada pregunta es un <details> nativo, así que se abre con el teclado y funciona sin JavaScript. Un enlace a una respuesta abre su pregunta en Chrome 97, Firefox 148 y Safari 26.2 y posteriores; en un navegador anterior lleva a la pregunta cerrada. En Safari 26.2 la página no se desplaza bien hasta una respuesta encontrada con Buscar en la página. Las respuestas cerradas se imprimen donde el navegador admite ::details-content (Chrome 131, Firefox 143, Safari 18.4); un navegador anterior imprime la pregunta cerrada sin su respuesta. No se ha probado con un lector de pantalla.
• Consentimiento de cookies. Sin JavaScript, el banner no aparece, porque tampoco se ejecuta ningún script propio del sitio; la política de cookies está enlazada en todas las páginas. Con JavaScript, el banner aparece como una banda fija en la parte inferior de la ventana, así que nada de la página se desplaza. Va después del enlace para saltar en el orden de lectura y de Tab, no recibe el foco al cargar la página, no bloquea la página y Escape no confirma ni oculta nada. Mientras aparece, la página reserva espacio al final y desplaza hacia arriba lo que alcanza Tab (criterio de éxito 2.4.11 de WCAG 2.2); en Safari, que ignora ese relleno de desplazamiento para los campos de texto, un script vuelve a desplazar el campo alcanzado con Tab por encima de la banda. En ventanas de menos de 30 rem de alto, aparece en el flujo, al principio de la página, que se desplaza hacia abajo al mostrarse. El botón Cerrar oculta el banner de confirmación y devuelve el foco al botón que lo abrió o al contenido principal; también se oculta al salir el foco hacia la página. Un clic en una zona vacía de la página no lo oculta. La respuesta se guarda en el navegador, no en una cookie. No se ha probado con un lector de pantalla.
• Modo del tema y hora del tema. <luz-theme-mode> es un botón redondo que recorre Automático, Claro, Oscuro y Alto contraste. Su nombre es la leyenda más la etiqueta de la opción seleccionada, como «Modo de color: Automático», y una región de estado dice el nuevo modo después de elegir. Sin JavaScript se muestran los cuatro botones de opción, que siguen cambiando el modo. En una página que no nombra ningún modo, Automático sigue al sistema, con o sin JavaScript, y así ocurre también en este sitio. Si faltan los pequeños scripts de la cabecera, una página cuya visita eligió un modo o una hora distintos de los del sistema puede pintarse primero con los del sistema. <luz-theme-time> añade los momentos del día como una elección. En este sitio el botón de opción marcado es el modo en uso (el del sistema, Claro u Oscuro) y el botón lleva su nombre, como «Modo de color: Oscuro»; Automático se marca, y el botón lo dice, solo mientras hay una hora del día elegida, y sin JavaScript no se marca ningún botón de opción y la página sigue al sistema. La hora del día solo se aplica cuando la elige el deslizador de la página de inicio, y las cuatro luces del sitio alcanzan el mismo contraste que sus modos. Con prefers-contrast: more, Automático activa el alto contraste. El deslizador de la barra de la página de inicio fija una hora que vale en Automático: elegir un modo o Automático con el botón, o pulsar Escape en el deslizador, la suelta. Ninguno de los dos se ha probado con un lector de pantalla.
• Cabecera fija, texto ampliado. Una cabecera fija (.o-sticky) deja un espacio mínimo para que no tape un campo al que se llega con Tab. Funciona con el texto al 100 % y al 200 %. Con el texto al 300 %, cuando la cabecera ocupa varias filas, Safari todavía puede dejar el campo parcialmente cubierto; Chrome, Edge y Firefox lo mantienen visible. Las páginas Objetos de maquetación y Cabecera de landing y CMS explican cómo ajustar el relleno de tu propia cabecera. En Firefox con colores forzados no se dibuja la capa oscura detrás del menú abierto; el panel conserva el borde.
• Banda. Una banda (.luz-band) recorta lo que sobresale por arriba o por abajo, así que un tooltip del primer control queda recortado con el texto al 200 % o más; empieza la banda con un encabezado. Al pasar el puntero sobre un botón de contorno o fantasma en una banda, no se aprecia ningún cambio. Con colores forzados, la banda no tiene tinte, solo dos líneas finas, una arriba y otra abajo.
• Prosa. Si una tabla es más ancha que la columna de texto y no está dentro de .luz-table-wrap, toda la página se desplaza horizontalmente en una pantalla estrecha. Un bloque largo de texto preformateado se desplaza dentro de sí mismo; asígnale tabindex="0" y un nombre, como al bloque de código, o quienes usen Safari no podrán desplazarse por él con el teclado.
• Línea de metadatos. Los puntos entre los datos se ocultan a los lectores de pantalla con texto alternativo para contenido generado. En un navegador que no lo admite (Firefox anterior a 128, Safari anterior a 17.4), un lector de pantalla lee cada punto.
• Listas maquetadas como cuadrícula, pila o fila. Safari no anuncia como lista los elementos de una lista cuyos marcadores se han eliminado y que está fuera de una región de navegación. Aun así, los elementos se leen en orden y sus encabezados permiten recorrerla.
• Cabecera de mancheta (cms). En los navegadores sin posicionamiento de anclas CSS, el menú de secciones de la cabecera de mancheta se abre cerca de la parte superior de la ventana y, mientras está abierto, cubre el nombre de la publicación y el botón de menú. Escape o un clic fuera del menú lo cierra y devuelve el foco a la página.
• Índice (cms). El indicador de la sección visible depende del script de catalog (data-luz-spy); sin él, no se marca ningún enlace, pero los enlaces siguen funcionando. Junto al texto, el índice muestra las secciones al final de la línea, pero aparece antes en el código fuente, así que Tab llega a él antes que al texto. No se ha probado con un lector de pantalla.
• Lista de cuenta (app). La lista del botón de cuenta de una aplicación es una lista de enlaces en un popover, no un menú ARIA: no tiene teclas de flecha y Tab recorre los enlaces. En los navegadores sin posicionamiento de anclas CSS, se abre como un panel en la parte inferior de la ventana, no debajo del botón; Escape o un clic fuera lo cierra. El nombre del botón combina las iniciales y el nombre, así que se lee «AM Ana Martín» en cualquier ancho. No se ha probado con un lector de pantalla.
• Panel de control (app). Los paneles mantienen el orden del HTML, así que uno ancho que no cabe en el espacio restante de una fila empieza en la siguiente y deja un hueco; el orden de lectura y el visual siempre coinciden. No se ha probado con un lector de pantalla.
• Patrones de documentación (docs). Los siete patrones de documentación de @luz-ds/catalog, los archivos components/docs-*.css, son CSS, sin script. La barra aparece antes del contenido en el código fuente. Por debajo de 80 rem de ancho se dibuja encima del contenido, bajo la cabecera; a partir de 80 rem, es una columna a su lado. La barra es fija y se desplaza por sí sola si supera la altura de la ventana; el indicador de la sección visible depende del script de catalog y, sin él, no se marca ningún enlace, aunque todos funcionan. El escenario de Qué hacer y qué no es inerte y está oculto para la tecnología de asistencia, así que el pie de figura comunica el significado y los errores que supondrían una barrera se muestran como código. En navegadores sin texto alternativo para contenido generado (Safari anterior a 17.4, Firefox anterior a 128), un lector de pantalla puede leer la marca o la cruz antes de «Sí» o «No»; siempre lee la palabra siguiente. No se ha probado con un lector de pantalla.
• Línea de tiempo. Sin JavaScript, es una lista ordenada con una línea y un punto por elemento, y todos los elementos están visibles. Con JavaScript, solo se lee y se alcanza con Tab la tarjeta actual; las demás son inertes. Los botones Anterior y Siguiente solo se llaman «Anterior» y «Siguiente»: el nombre no indica a qué fecha llevan. No se ha comprobado si un lector de pantalla anuncia la tarjeta que aparece al cambiar de elemento, y la línea de tiempo no se ha probado con ningún lector de pantalla. La reproducción automática está desactivada salvo que la página la solicite. Cuando se activa, cambia de tarjeta cada pocos segundos; un botón visible Pausar / Reproducir la detiene y la reanuda. También se pausa si el puntero pasa por encima, el foco del teclado está dentro, menos de la mitad aparece en pantalla o la pestaña está oculta; nunca se inicia con movimiento reducido. Mientras se reproduce, la tarjeta no se anuncia.
• Incrustado. Sin JavaScript, o cuando su dirección no es válida, el póster es un enlace al vídeo donde está alojado. Con él, es un botón con el mismo nombre; una vez cargado el marco del reproductor, sus teclas, subtítulos, idioma y accesibilidad son los del otro sitio, y la página no puede cambiarlos ni probarlos. Escape no hace nada en la pregunta: Ahora no es la vuelta atrás. No se ha probado con un lector de pantalla.
• Gráfico. Sin JavaScript, o antes de que cargue, la tabla (o la lista de números) es todo lo que hay, y contiene todas las cifras. Con él, el dibujo queda oculto a la tecnología de apoyo y la tabla sigue legible; un botón cambia uno por otra cuando la página le da sus dos palabras, y sin ellas la tabla se muestra bajo el dibujo. El dibujo no tiene información emergente ni lectura de valores: las cifras están en la tabla. Una serie se distingue por su color, por la marca con que termina y por la leyenda, y en colores forzados por sus rayas; el trazado se dibuja de izquierda a derecha en todos los idiomas. Lee la tabla al conectarse y cuando cambia, y una celda que contenga algo distinto de un número simple es un hueco. No se ha probado con un lector de pantalla.
• Idiomas que LUZ no incluye. En una página en un idioma para el que LUZ no tiene textos, como francés o árabe, las etiquetas y los mensajes generados por sus scripts (botones del reproductor y de copia, nombres de bloques de código, estado de ordenación) aparecen en inglés dentro de una página marcada con otro idioma, así que el lector de pantalla los lee con la voz de ese idioma (WCAG 3.1.2, Idioma de las partes). Los scripts muestran un aviso en la consola. Define una vez todos los atributos data-luz-label-* en <html> o <body>, o llama a registerLocale() antes de iniciar los scripts, para que aparezcan en tu idioma. La página de inicio lo hace para el árabe.
• Botones de tema heredados. En una página en otro idioma, los botones Aplicar tema / Tema aplicado del marcado heredado de temas personalizados (luz-theme-apply-btn) aparecen en inglés hasta que se cambia el tema, a menos que la página defina data-luz-label-apply-theme y data-luz-label-theme-applied. No se ha probado con un lector de pantalla.
• Textos en un idioma que LUZ sí incluye. El archivo de español se carga cuando una página lo declara. Si no se puede cargar, las etiquetas que añaden los scripts de LUZ aparecen en inglés dentro de una página marcada con otro idioma, y un lector de pantalla las lee con la voz de ese idioma. La página y el texto escrito en ella no se ven afectados. Las etiquetas se escriben cuando llega el archivo o tras dos segundos sin él. Si se hace clic antes de que llegue el idioma, el anuncio aparece en inglés; si llega tarde, se mezclan las etiquetas en inglés escritas al inicio con las etiquetas en español que se escriben al cambiar de estado, como al reproducir o pausar. No se ha probado con NVDA, JAWS, VoiceOver, TalkBack ni Orca. Los módulos independientes (/highlight, /player, /theme, /clipboard) solo incluyen inglés: una página en español que los importe directamente debe llamar a loadLocales() o registerLocale().
• Botón. .luz-btn no ajusta el texto de su etiqueta (white-space: nowrap), así que un botón con una etiqueta larga puede desbordar su contenedor a 320 píxeles de ancho con el texto al 130 % (WCAG 1.4.10, Reajuste). Acorta la etiqueta o define white-space: normal en tu propia capa.
• Botón de copia. Si el navegador no permite copiar, se anuncia el error a los lectores de pantalla, pero no se muestra ningún mensaje junto al botón.

Informar de un problema de accesibilidad

Si algo no funciona para ti, abre una incidencia en GitHub y explica qué intentabas hacer, qué navegador y qué tecnología de asistencia usas.