Accessibility Toolbar

La Accessibility Toolbar permite que cada visitante adapte la presentación y el manejo de una página a sus necesidades. Sus preferencias son reversibles y solo se aplican en su navegador. La Toolbar no corrige semántica, etiquetas, manejo por teclado ni otros defectos del código fuente, y no convierte por sí sola un sitio inaccesible en conforme con WCAG.

Cómo funciona la Toolbar

Un activador flotante abre un único diálogo modal. La vista general contiene las herramientas disponibles; las funciones con varias opciones abren una vista de detalle dentro del mismo diálogo. No crean un diálogo dentro de otro.

• Perfil: Predeterminado significa que no hay preferencias del visitante activas. Perfil: Personalizado aparece cuando al menos una preferencia difiere. El estado del perfil es un botón que abre su gestión.
• En una vista de detalle, la fila con Volver, el icono de la función, el título y la descripción sustituye al título normal de la Toolbar en la cabecera fija. Volver regresa a la vista general y devuelve el foco a la tarjeta que la abrió.
• Hecho cierra la Toolbar y conserva las preferencias.
• Escape y el botón de cierre descartan la Toolbar completa y devuelven el foco al activador flotante.
• Restablecer todo recupera todas las preferencias, detiene la lectura en voz alta, sale del modo lectura y ofrece una única acción Deshacer. En la Toolbar abierta, el aviso ocupa una fila propia justo debajo del encabezado y nunca cubre las tarjetas de funciones. Una barra de color muestra los 12 segundos restantes; el puntero o el foco del teclado pausan la cuenta atrás. Si la Toolbar se cierra mientras el aviso está visible, este permanece como una notificación centrada en la página y tanto la barra como el cierre continúan desde el mismo tiempo restante.
• Cuando se ajusta al menos una función, el cuadro de estado verde muestra la cantidad. Mostrar detalles revela entradas compactas con la función y su valor actual o sus subopciones activas. La X de una entrada desactiva solo esa función, actualiza inmediatamente la cantidad y la tarjeta correspondiente y ofrece Deshacer. Las entradas y sus acciones X se manejan por completo con el teclado, y el foco permanece en una posición visible y lógica tras eliminarlas.
• Los estados activos siempre se indican con texto y además con un símbolo, borde o cambio de forma; nunca solo con color.

En escritorio, una cuadrícula intrínseca muestra cuatro, dos o una columna según el ancho real del panel. En el punto de corte móvil configurado y por debajo, la Toolbar se abre como una hoja inferior que respeta el área segura. Alrededor de 390 px se prefieren dos columnas compactas; a 320 px, con traducciones largas o mucho zoom, los controles pasan a una columna. Solo se desplaza el cuerpo; cabecera y pie permanecen estables. Todos los controles miden al menos 44 por 44 píxeles CSS y las transiciones son prácticamente inmediatas cuando se solicita movimiento reducido.

Valores por defecto tras una instalación nueva

La Toolbar, la visualización en escritorio y móvil y todas las herramientas descritas están disponibles. La personalización visual comienza en Basic y el tooltip de puntuación en Plus. La presentación inicial para cada visitante es neutra:

• Tamaño del texto al 100 %
• Contraste estándar y colores originales
• Énfasis de enlaces y controles desactivado; medios excluidos de filtros de color
• Modo lectura y lectura en voz alta inactivos
• Ayudas de foco adicionales desactivadas
• Imágenes visibles
• Sin reducción de movimiento elegida por el visitante; se sigue respetando la preferencia del sistema operativo

El pie permanece oculto hasta que un administrador selecciona expresamente un enlace a la declaración de accesibilidad o la marca EZZE.

Funciones disponibles

Tamaño del texto

Los botones separados de menos y más recorren 100, 110, 125, 150 y 200 %. Se anuncia el valor resultante y el botón correspondiente queda desactivado en el mínimo o máximo. La Toolbar modifica tamaños de texto y alturas de línea reales para permitir el reflujo; no amplía visualmente la página con transform: scale(). Los valores originales se restauran con exactitud y el contenido insertado después también se adapta mientras la escala esté activa. Los cambios de vista de la Toolbar y las actualizaciones de progreso de la lectura en voz alta nunca vuelven a aplicar el nivel elegido a un texto ya ampliado.

Contraste

La vista de detalle ofrece:

• Estándar
• Aumentado claro
• Aumentado oscuro
• Sistema

Estos modos usan colores semánticos para primer plano, fondo, enlaces, bordes, formularios y foco, en vez de invertir toda la página. Las imágenes y vídeos conservan su apariencia natural salvo que el administrador muestre la opción de medios y el visitante la active deliberadamente. Los iconos de menú, navegación y desplazamiento del tema permanecen visibles: se conservan los fondos de botón basados en imágenes, mientras que las máscaras monocromas y las barras de hamburguesa adoptan el color de texto semántico del modo.

Original, Colores suaves y Escala de grises pueden combinarse con cualquier modo de contraste. Elegir Colores personalizados devuelve Contraste a Estándar porque ambos ajustes controlan el primer plano y fondo de la página. La Toolbar anuncia y guarda esta prioridad de forma determinista.

Colores

Abrir Colores no modifica la página inmediatamente. Muestra cuatro tarjetas de vista previa iguales respaldadas por un grupo nativo de selección única. Un borde más marcado, un fondo suave y una marca identifican el modo activo:

• Original — no cambia los colores de la página
• Atenuado — reduce los colores intensos
• Escala de grises — elimina la información de color
• Colores personalizados — utiliza un color de texto y fondo elegidos

Los colores personalizados aparecen en una superficie propia con dos tarjetas etiquetadas para texto y fondo. Cada tarjeta combina una muestra grande con un valor hexadecimal editable de seis dígitos. Una fila compartida debajo muestra un ejemplo real, la relación de contraste numérica y una valoración comprensible: Muy fácil de leer, Fácil de leer, Solo adecuado para texto grande o Difícil de leer.

Cualquiera de las muestras abre el mismo selector de color contenido en la Toolbar, con controles de Tono, Saturación y Luminosidad que funcionan con teclado. Aplicar confirma el borrador; Cancelar, Cerrar o Escape lo descartan y devuelven el foco a la muestra que lo abrió. El selector cambia de lado cuando falta espacio y limita su propia altura para que ningún control quede recortado en un borde del navegador. La entrada hexadecimal directa sigue siendo una vía equivalente. Un borrador no válido permanece en el campo con un error y no sustituye al último color válido aplicado. El visitante puede conservar deliberadamente una combinación inferior a 4,5:1 después de una advertencia clara; la Toolbar permanece conforme y sin cambios.

En Ajustes adicionales, tres tarjetas de selección compactas usan casillas nativas en lugar de interruptores permanentes de encendido y apagado:

• Subrayar enlaces
• Destacar controles
• Incluir medios

La preferencia de medios está desactivada por defecto. Su tarjeta permanece visible, pero se indica como No disponible en Original y Colores personalizados, ya que solo Atenuado y Escala de grises pueden aplicar el filtro a fotos, ilustraciones o vídeos. Elegir un modo compatible habilita la tarjeta de inmediato. Restablecer colores recupera Original y estas tres preferencias de casilla sin afectar a otras preferencias.

Modo lectura

La vista de detalle ofrece tipografía con o sin serifa, medida estrecha/media/ancha, interlineado normal/amplio y fondo claro/cálido/oscuro. En escritorio, estos cuatro ajustes forman una cuadrícula compacta de 2×2; en vistas estrechas se apilan verticalmente. Los fondos incluyen vistas previas visuales. Un resumen muestra la selección actual junto al botón de inicio de ancho ajustado y se actualiza tras cada cambio; en vistas estrechas, el botón utiliza el ancho disponible. Iniciar modo lectura cierra la Toolbar y abre un diálogo de lectura independiente a pantalla completa; nunca se anida dentro de la Toolbar abierta. Al cerrar el lector, el modo lectura deja de marcarse y contabilizarse como función activa. La última presentación elegida sigue preseleccionada para el próximo inicio y puede borrarse con Restablecer todo.

El lector prioriza main, después [role="main"] y por último el article legible más relevante. Si faltan estas regiones semánticas, comprueba contenedores de contenido habituales de WordPress y maquetadores de páginas y, finalmente, el cuerpo filtrado de la página. Copia encabezados, párrafos, listas, citas, enlaces, tablas, leyendas y alternativas de imagen informativas no duplicadas. También incluye el contenido oculto solo hasta que comienza una animación reconocida de desplazamiento o aparición, sin exigir que el visitante se desplace antes. Encabezados del sitio, navegación, barras laterales, pies, diálogos, interfaz de la Toolbar, contenido oculto semánticamente o de forma permanente mediante CSS, variantes ocultas en puntos de ruptura responsivos, contenido de detalles cerrados, scripts, estilos, formularios, publicidad y capas de cookies siguen excluidos del fallback. Los ID duplicados, los atributos de evento y el estado interactivo inseguro se eliminan de la copia. El documento original no se reescribe. Si el fallback filtrado tampoco contiene contenido significativo, la Toolbar permanece abierta e informa del problema. Al cerrar el modo lectura, el foco vuelve al activador.

Lectura en voz alta

Abrir Lectura en voz alta nunca inicia audio. La vista preparada permite elegir:

• Contenido principal
• Desde la sección actual
• Texto seleccionado, si existe una selección no vacía dentro del contenido principal
• Velocidad
• Voz disponible

Los tres controles del punto de inicio usan tarjetas compactas de al menos 76 px de alto. Las traducciones en dos líneas, la marca de selección, el estado desactivado y el foco de teclado visible se conservan por completo. Hasta que se seleccione un texto adecuado, la indicación aparece directamente dentro de la tarjeta Texto seleccionado y desaparece cuando existe una selección válida. Con todo el ancho, las tarjetas forman una fila completa de tres columnas y se redistribuyen en dos o una columna según el ancho de la Toolbar. Velocidad y Voz forman una única superficie de ajustes compartida: dos columnas iguales en Toolbars anchas y una pila vertical en Toolbars estrechas. La misma superficie permanece montada al cambiar entre preparación y reproducción, en lugar de renderizarse dos veces. Iniciar lectura en voz alta usa todo el ancho disponible.

Al hacer clic en el botón flotante de la Toolbar, el navegador puede borrar la selección de texto visible al mover el foco. Por eso, la Toolbar captura una selección válida del contenido principal antes de ese cambio. Texto seleccionado sigue disponible en la vista abierta de lectura en voz alta; al cerrar la Toolbar se descarta la copia temporal. Nunca se leen fuentes eliminadas o que ya no pertenecen al contenido principal.

La voz solo comienza con Iniciar lectura en voz alta. “Desde la sección actual” empieza en el bloque legible que contiene el foco del teclado. Si no existe, usa el primer bloque que cruza una línea situada al 35 % de la altura del Viewport, después el primer bloque por debajo de ella y, por último, el primer segmento legible. Encabezados, párrafos, elementos de lista, citas, leyendas, alternativas de imagen útiles y tablas forman una cola limitada. Cada segmento conserva el idioma más cercano de la página.

Durante la reproducción, el controlador muestra el título, una línea separada para la posición del segmento, la barra de progreso con porcentaje escrito, el texto actual y Anterior, Pausa/Reanudar, Siguiente, Detener e Ir al párrafo actual. La superficie compartida de Velocidad y Voz permanece visible y operativa debajo. Velocidad usa el mismo control Menos/valor/Más en todos los anchos, con valor anunciado y botones límite desactivados. El encabezado sustituye la descripción de preparación por el estado escrito de la reproducción. El texto actual aparece en una ventana de lectura de altura fija: los textos breves mantienen el espacio reservado, mientras que los largos se conservan completos y pueden desplazarse dentro de la ventana. Así, los cuatro botones rectangulares e iguales de reproducción permanecen en su posición; Pausa o Reanudar se destaca como acción principal activa. Durante la reproducción, el pie muestra el estado del segmento, Detener lectura en voz alta y Cerrar la Toolbar en lugar de las acciones generales; en Toolbars estrechas conserva solo la acción ancha Detener lectura en voz alta, ya que Atrás y Cerrar siguen disponibles en el encabezado fijo. El párrafo actual recibe un fondo suave y un borde inicial fuerte sin mover el foco a medida que avanza la reproducción. Al activar Ir al párrafo actual, la Toolbar se cierra cuando es necesario, el controlador compacto permanece activo, el párrafo original se centra en el área visible y recibe el foco. Cuando el motor ofrece eventos de límite fiables, también puede marcar la palabra o frase actual; el resaltado del párrafo siempre es la alternativa obligatoria.

En dispositivos con ratón u otro puntero preciso, los controles neutros del reproductor completo y compacto reciben al pasar por encima una superficie azul suave con un borde de acento. El control principal azul usa un acento más intenso; los controles desactivados no cambian.

En Posición en la página, Ir al párrafo actual sigue disponible como salto puntual independiente. Junto a él, Seguir automáticamente aparece como ajuste permanente con texto de ayuda, estado escrito Activado/Desactivado e interruptor; el mismo ajuste también está disponible en el reproductor compacto. Al activarlo se muestra la página de origen; después solo centra un párrafo recién leído cuando este abandona la zona central cómodamente visible del Viewport. El foco del teclado permanece en el último control, la pausa no provoca movimiento y se respeta la preferencia de reducción de movimiento.

Cerrar la Toolbar no detiene la voz. Un controlador compacto y etiquetado sigue visible y operable por teclado. Usa la misma disposición en escritorio y teléfono: Anterior, Pausa/Reanudar y Siguiente forman un grupo conectado; a su lado aparecen Detener, Ir al párrafo actual y la acción algo más ancha Seguir automáticamente, con estado Activado/Desactivado escrito y una marca cuando está activa. En teléfonos, ese mismo controlador se acopla a todo el ancho visible como Bottom Sheet no modal en el borde inferior del área visible actual del navegador y respeta el área segura del dispositivo. Todos los objetivos miden allí al menos 44 px. Ambos grupos permanecen en una fila siempre que el espacio disponible, incluidos los estados traducidos, lo permita; de lo contrario, solo el segundo pasa debajo. Un activador de la Toolbar situado abajo se desplaza por encima del Sheet para que ambos controles sigan accesibles, mientras la página permanece operable para navegar entre párrafos. Utiliza el mismo símbolo de líneas de audio que la tarjeta de lectura en voz alta, y cada acción tiene un icono Lucide visible y un nombre o estado accesible. Detener, salir de la página, un error irrecuperable o Restablecer todo cancela la cola y elimina todos los resaltados. Se ignoran los eventos tardíos de una sesión anterior.

La primera implementación utiliza el servicio de voz del navegador o del sistema operativo. EZZE WCAG Pro no envía una petición de lectura ni el texto de la página a un endpoint de EZZE. Según el navegador, sistema y voz elegida, el procesamiento puede usar un servicio online de ese proveedor. Si el navegador no ofrece síntesis de voz, la Toolbar muestra un estado no disponible en lugar de un botón de inicio inoperante.

Foco

La vista Foco agrupa cuatro tarjetas seleccionables de forma independiente en Hacer visible el foco y Guiar la lectura. Cada tarjeta combina una vista previa con una explicación breve. Las tarjetas inactivas permanecen neutras; una tarjeta activa se identifica mediante el borde de acento, el fondo y la marca de verificación. La casilla subyacente mantiene el estado y el uso por teclado disponibles para las tecnologías de asistencia:

• Anillo de foco de alto contraste — sustituye el indicador de foco existente por un anillo :focus-visible de dos colores visible sobre fondos claros y oscuros
• Resaltado de foco amarillo adicional — añade un halo amarillo alrededor del control enfocado sin sustituir el anillo de foco; cuando ambas opciones están activas, el halo aparece fuera del anillo completo de dos colores
• Línea de lectura — proporciona una guía horizontal posicionable con puntero, toque o teclado
• Máscara de lectura — oscurece la página por encima y por debajo de una ventana de lectura despejada que sigue el puntero, el toque o el teclado sin bloquear la interacción

Estas preferencias no añaden tabindex al texto normal ni cambian el orden de foco.

Movimiento

Reducir movimiento es un interruptor directo. Suprime animaciones, transiciones, parallax y desplazamiento suave no esenciales, pero conserva indicadores significativos de progreso y estado. La Toolbar distingue una elección del visitante de una preferencia prefers-reduced-motion del sistema operativo. La supresión opcional de animaciones jQuery activada por el administrador se instala y elimina de forma reversible.

Imágenes

Ocultar imágenes permanece como herramienta directa opcional. Respeta las excepciones de SVG, imagen y fondo configuradas y usa el color de reserva guardado. No se integra en Colores porque ocultar contenido tiene un significado distinto de cambiar su presentación cromática.

Ayuda de teclado

La ayuda de teclado abre una vista de detalle que documenta solo controles reales: Tab, Shift+Tab, Enter/Espacio, Escape y los atajos del plugin configurados por el administrador. Las teclas estándar y los atajos del sitio configurados aparecen en dos secciones claramente etiquetadas. Cada combinación utiliza teclas separadas junto a su explicación; en vistas estrechas, la explicación aparece debajo. La Toolbar no inventa atajos globales de letras que no puedan configurarse.

Perfiles y almacenamiento

El botón Perfil: … del encabezado de la Toolbar abre cuatro perfiles de apoyo listos para usar. Son puntos de partida, no diagnósticos, y solo aplican las herramientas que el administrador haya habilitado para el sitio:

• Apoyo visual — texto al 125 %, contraste claro aumentado, enlaces subrayados, controles resaltados y el Anillo de foco de alto contraste
• Apoyo a la lectura — texto al 110 %, modo de lectura estrecho y cálido con espaciado amplio y línea de lectura
• Teclado y foco — Anillo de foco de alto contraste, Resaltado de foco amarillo adicional y movimiento reducido
• Vista con pocas distracciones — colores atenuados, movimiento reducido y máscara de lectura

Aplicar un perfil de apoyo sustituye las preferencias actuales de la Toolbar, actualiza inmediatamente su estado de selección, el nombre del encabezado, las tarjetas de función y los detalles de funciones activas, y ofrece Deshacer durante 12 segundos. El ámbito de almacenamiento de sesión o dispositivo elegido no cambia. El primer ajuste manual posterior cambia el encabezado a Perfil: Personalizado. El perfil también puede ajustarse y guardarse con un nombre propio.

Las preferencias admiten tres ámbitos locales:

• Solo esta sesión — el estado activo se guarda en sessionStorage
• Recordar en este dispositivo — el estado activo se guarda en localStorage
• Perfil con nombre — hasta diez perfiles con nombres de 1 a 40 caracteres tras eliminar los espacios iniciales y finales; guardar, cargar, renombrar y eliminar son acciones explícitas

En escritorio, las opciones compactas de almacenamiento y la gestión de perfiles con nombre aparecen juntas en dos paneles equivalentes; una Toolbar estrecha las apila en una sola columna manejable. Los perfiles nunca salen del navegador. Al cambiar entre sesión y dispositivo, el estado actual se mueve y el registro activo obsoleto se elimina del otro almacén. Cargar un perfil con nombre no cambia el ámbito elegido. Los datos corruptos o de un esquema desconocido vuelven de forma segura a los valores por defecto. Las preferencias de la antigua Toolbar se migran automáticamente cuando es posible. Deshacer después de Restablecer todo recupera tanto el estado de preferencias capturado como su ámbito de almacenamiento elegido.

Ajustes para administradores

Los ajustes determinan qué herramientas ve el visitante y el aspecto del activador y panel. La disponibilidad se agrupa en Herramientas principales, Lectura y foco y Herramientas adicionales. Dentro de cada grupo, la disposición se adapta al ancho real del área de ajustes: mantiene una sola columna legible para etiquetas, descripciones, opciones dependientes e interruptores y solo pasa directamente a tres columnas iguales cuando el espacio es amplio. La vista previa compacta representa la vista general; la interactiva usa la Toolbar real y se actualiza al instante. La tarjeta de la función Lectura en voz alta también explica que todas las voces las proporciona el navegador o el sistema operativo del visitante, que una voz seleccionada puede procesar el texto mediante un servicio en línea y que la función de lectura en voz alta de EZZE WCAG Pro no transmite ni la solicitud de lectura en voz alta ni el texto de la página a un servicio propio en la nube.

Básicos (Free):

• Activar la Toolbar globalmente
• Mostrarla en escritorio y móvil de forma independiente
• Definir el punto de corte móvil
• Activar o desactivar cada herramienta
• Ofrecer la máscara de lectura por separado de la línea de lectura y configurar la altura de su ventana despejada
• Ocultar el pie, enlazar una declaración de accesibilidad o elegir expresamente la marca EZZE

Personalización visual (desde Basic):

• Posición, desplazamiento, forma, radio, sombra y colores de icono, fondo y borde del activador
• Posición, desplazamiento, título, cierre y superposición del panel
• Esquema de colores fijo claro u oscuro, radio, sombra y tipografía

La Toolbar abierta, los avisos de la Toolbar y el reproductor compacto de lectura en voz alta usan paletas fijas, verificadas para el contraste y alineadas con los mockups. El activador flotante se puede personalizar por separado: sus colores de icono, fondo y borde se aplican por igual en ambas vistas previas y en el frontend. Elige combinaciones con un contraste mínimo de 3:1 entre el icono y el fondo, y entre el límite del botón y la página circundante. La herramienta del visitante Colores sigue siendo independiente y modifica únicamente el contenido de la página, nunca la propia Toolbar.

Tooltip de puntuación (desde Plus):

• Muestra en Hover sobre el activador cerrado la puntuación guardada del Accessibility Test; se oculta con la Toolbar abierta

Las instalaciones existentes conservan los colores del activador, el esquema claro u oscuro elegido, los valores de diseño que no son de color y las excepciones de medios e imágenes. Los antiguos colores de superficies, texto, acento, bordes internos y superposición de la Toolbar abierta dejan de aplicarse y se eliminan del ajuste canónico durante la migración.

Acciones del visitante y cierre

• Un segundo clic en el activador cierra la Toolbar abierta.
• Con superposición activa, el activador permanece por encima y operable.
• Botón de cierre opcional, clic exterior cuando esté configurado y Escape ofrecen vías claras de salida.
• La acción compacta Ocultar botón de la Toolbar se encuentra en la fila de acciones inferior fija junto a Restablecer todo y Ayuda de teclado. En teléfonos se muestra como un icono etiquetado que ahorra espacio y conserva su nombre accesible completo. Esconde el activador durante 24 horas, 7 días o hasta restaurarlo manualmente, y sus opciones de duración se abren encima de la fila. Aparece brevemente Deshacer. Quien usa teclado puede recuperar el activador con Alt + Mayús + A o mediante el control enfocable.
• El enlace del pie a la declaración de accesibilidad puede usar una página de WordPress o URL propia y abrirse en la misma o nueva pestaña. Una nueva pestaña incluye icono visible y aviso para lector de pantalla.

Notas de accesibilidad y pruebas

La Toolbar facilita preferencias personales de color, contraste, reflujo, movimiento, visibilidad del foco y lectura. Complementa una buena implementación; no sustituye HTML semántico, etiquetas, manejo por teclado, alternativas, subtítulos ni correcciones en el código fuente.

Prueba la configuración en escritorio, a 390 px y 320 px, en móvil horizontal y con zoom de 200/400 %. Verifica uso solo con teclado, foco visible, etiquetas largas en alemán y francés, movimiento reducido, colores forzados, objetivos táctiles de 44 px, controles de lectura en voz alta, persistencia de perfiles y que ninguna preferencia de página coloree la propia Toolbar.

Disponible para: Todos los planes Free

Personalización visual: desde Basic desde Basic

Tooltip de puntuación: desde Plus desde Plus