Mejoras de accesibilidad: tipografía Atkinson Hyperlegible + opción de fondo negro/alto contraste #196
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Labels: area:aesthetic, improvement, accesibilidad
Objetivo
Fe Adulta tiene un público con mucha proporción de gente mayor, y hay comentarios de Beta Feedback (#91) sobre falta de legibilidad — negrita que no se lee bien y texto sobre fondo blanco poco legible, entre otros que Rafa recuerda pero aún no están citados aquí textualmente (pendiente de localizar el texto exacto en el CPT
fea_feedback, sin acceso directo desde esta sesión). En la misma línea que el resto de mejoras de usabilidad de #195, pensadas para ese mismo público.TODO: enlazar aquí las citas literales de feedback sobre negrita y fondo blanco en cuanto se recuperen.
Propuesta 1 — Tipografía: Atkinson Hyperlegible
Cambiar (o dar como opción) la fuente del cuerpo de texto a Atkinson Hyperlegible (Braille Institute, open source, OFL), diseñada específicamente para maximizar la legibilidad en baja visión: formas de letra muy diferenciadas (I/l/1, O/0), buen espaciado.
body/artículos, o como alternativa activable (ver propuesta 3).@font-faceself-hosted (no CDN externo, consistente con cómo se gestionan ya fuentes/assets del tema) owp_enqueue_style.Propuesta 2 — Modo fondo negro / alto contraste
Añadir un toggle de modo oscuro / fondo negro persistente (similar a un dark mode), pensado sobre todo como ayuda de contraste para lectura prolongada, no solo estético:
localStorage(mismo patrón ya usado por el widget de Beta Feedback, #91).Alcance (decidido, 2026-08-08)
Se descarta el control agrupado tipo "A+ / Aa / 🌙": queda en dos cosas simples, sin más superficie de UI que la necesaria:
Relacionado
fea_feedback), útil para recoger reacciones reales una vez desplegado esto.Criterios de aceptación
Plan de implementación — pendiente de revisión
Evidencia de producción
Fuente correcta: producción
feadulta.com, CPTfea_feedback(265 registros; 84 con comentario). No la BBDD local.También #47266: “Para mi es demasiado blanca. me deslumbra un poco.” El issue queda, por tanto, respaldado por feedback real.
Alcance
zoom.Ejecución propuesta
/var/www/html/wp-content/mu-plugins/de producción: la wiki indica que éste es canónico si el local quedó incompleto. Inventariar Astra, FSE single, portada, Smart Slider, audio, selector de idioma, Beta Feedback y foco.@font-faceyfont-display: swap; aplicar familia global sin tocar escala ni layout.localStorage, bootstrap temprano anti-flash y botón accesible (aria-pressed) en cabecera.Orden
Inventario → implementación y QA local → diff y evidencia en este issue → solo con aprobación explícita, documentación y preparación de producción.
¿OK para pasar al inventario?
Implementado en local — pendiente de revisión
Rama
feat/accesibilidad-196(push hecho, aún sin PR). Mu-plugin nuevomu-plugins/fea-accesibilidad.php, sin tocar ningún otro fichero salvo la fila del README.Qué hace
latin(cubre acentos/ñ/¿¡ del español), pesos regular+bold reales. Sustituye la fuente delbodysin selector ni opción — el menú (fea-ui.php, #95) conserva su sans de UI a propósito por especificidad.localStorage), botón 🌙/☀️ inyectado por JS junto al selector de idioma en el header (mismo patrón quefea-homepage.phpusa para el selector, sin tocar el template FSE). Anti-flash: script inline enwp_headprioridad 1 que fija el atributo antes de pintar.color-scheme: darkpara que inputs/audio/scrollbars nativos se oscurezcan solos, más overrides puntuales donde el sitio fija colores claros a mano: hero de portada, tarjetas de autor, selector de idioma, buscador móvil, barra de Beta Feedback y barra de consentimiento de cookies.#e8899e) solo en modo oscuro para enlaces/foco — el carmesí de marca#8b1a2eda ~1.8:1 de contraste sobre el fondo casi negro, muy por debajo de AA. Fondo#0d0d0d/texto#ececec≈ 15.8:1.Hallazgo de inventario (paso 1 del plan)
El WP local (
dockerwordpress-web) tenía prácticamente todos los mu-plugins versionados ausentes (wp-content/mu-plugins/solo conservabafea-support-campaign/) — confirma justo lo que preveía este comentario ("si el local quedó incompleto, prod es canónico"). Los he restaurado copiandomu-plugins/*.phpdel repo (deploy, no cambio de código) para poder probar nada roto. Si te suena a algo que ya sabías, perdona la redundancia; si no, puede valer la pena investigar por qué se perdieron (¿rebuild del contenedor sin volumen persistente en esa carpeta?).QA local (Playwright, docker
wordpress-webpuerto 8081)Portada, tarjetas de autor y single de artículo, claro y oscuro — capturas adjuntas. Sin errores PHP en
docker logs.Sin cubrir / a revisar
Siguiente paso
Si te parece bien lo que ves, reviso móvil+idiomas y dejo el PR abierto contra
main. Nada sube a producción hasta que me digas que sí.Fix de seguimiento (dark mode) — Codix
Commit
51ae723en la misma ramafeat/accesibilidad-196(push hecho por Claudix, Codix no tenía credenciales de Gitea en su sesión):.wp-block-search__inside-wrapper/__input/__button), no soloinputgenérico.overflow:hidden+ escala leve de la imagen), sin tocar configuración/skin del plugin.QA de Codix: inspección + capturas Playwright portada/artículo claro+oscuro,
php -lOK,git diff --checkOK. WordPress local actualizado, producción sin tocar.@Rafa cuando puedas echa un vistazo de nuevo — si no ves más blancos raros, seguimos con móvil+idiomas y abrimos el PR.
Fix de seguimiento 2 (Codix) + corrección del método de QA (Claudix)
Codix — commit
82c352aBotón del buscador con contraste propio en oscuro (
#ececec/#0d0d0d, ya no se confunde con el input) y franja móvil "Búsqueda avanzada" (fea-search-advanced.php) oscurecida con el acento AA.⚠️ Corrección sobre el QA anterior (comments 611/614): la fuente no se había verificado
Opix detectó que en
localhost:8081@font-facese bloquea por CORS (elsiteurlreal eshttps://farmer.taild3aaf6.ts.net/fea, distinto origen). Lo he verificado con la APIdocument.fonts:http://localhost:8081/→Atkinson Hyperlegible 400/700 status=error(todas las capturas de QA hasta ahora mostraban la fuente de respaldo del sistema, no Atkinson).https://farmer.taild3aaf6.ts.net/fea/(mismo origen quesiteurl) →status=loadeden ambos pesos.Decisión de método de QA a partir de ahora: todo lo visual/tipográfico se prueba contra
https://farmer.taild3aaf6.ts.net/fea/, no contralocalhost:8081directo.localhost:8081sigue sirviendo para checks funcionales (php -l, errores en logs) donde el origen no importa. No se tocaplugins_url()en el código — es correcto para producción.Evidencia corregida, Atkinson realmente cargado:
Pista para la investigación del banner (Opix, sin diagnosticar del todo)
Probando en el origen real vi un
<img class="wp-image-26979" alt="Fe Adulta">(el logo pequeño de cabecera, no el slider) que enhttps://farmer.taild3aaf6.ts.net/fea/danaturalWidth/Height=0(no pinta, aunquecurla esa misma URL devuelve 200 — no es un 404 simple). Enlocalhost:8081esa misma imagen sí pinta bien. Puede ser la misma familia de problema que la fuente (origen/proxy local, no bug de producción) pero no lo he cerrado del todo — se lo paso a Opix en Buzz.Fix de infra aplicado — banner y fotos antiguas ya cargan en el origen real
Con el visto bueno de Rafa, añadido
location /wp-content/en~/.openclaw/workspace/hub-nginx.conf(reporafa/hub, commit699d959, sincronizado y pusheado).docker restart hub-proxypara aplicar (elreloadno basta al estar el config montado como volumen read-only).Verificado con Playwright contra
https://farmer.taild3aaf6.ts.net/fea/:naturalWidth=950(antes 0).iglesia-titanic-y-nueva-evangelizacion): cargan con tamaño natural correcto./,/fea/,/yt/,/git/,/portfolio/en 200; los 500/404 preexistentes de/joomla/y/triptyk/se confirmaron pegando directo a sus puertos sin pasar por el proxy — no los causó este cambio).Con esto el QA visual/tipográfico contra el origen real (norma fijada arriba) ya no tiene falsos positivos de imágenes rotas — quedaba solo el banner como pendiente de este issue, y ya está resuelto.
Atkinson también en titulares — commit
68b95aa(Codix)Decisión de Rafa: Atkinson Hyperlegible en titulares también, no solo cuerpo. Aplicado a
.fea-hero-title,.fea-section-titley el resto de headings; formularios/controles ahora heredan la fuente (font-family: inherit); los dos@font-facedeclaran rango de peso (100 500/501 900) para que 300/600 mapeen a los ficheros reales sin síntesis del navegador.Verificado por Codix (computed style +
document.fonts) y por mí de forma independiente contrahttps://farmer.taild3aaf6.ts.net/fea/:La "f" con rabito de Fraunces (queja original de Rafa) ya no aparece — era la misma causa que "la letra no cambia": los titulares tenían su propia regla de mayor especificidad que ganaba sobre el
body.Con esto el issue está funcionalmente completo en local: tipografía (cuerpo + titulares + formularios, sin pesos sintéticos), toggle claro/oscuro, banner y contenido migrado (fix de infra en el Hub, no de este repo), y los 3 bugs de contraste en oscuro. Pendiente: QA móvil + idiomas, y aprobación explícita de Rafa antes de tocar producción.
Cierre — implementado y verificado en local, pendiente de producción
Rafa confirma conforme. Cierro el issue; queda pendiente de desplegar a producción junto con el #195 (usabilidad), cuando ese esté listo — no se sube nada todavía.
Resumen final
Rama
feat/accesibilidad-196(5 commits,7a623e8→68b95aa), mu-plugin nuevomu-plugins/fea-accesibilidad.php:system-uia propósito (decisión de Rafa, coherente con el #95).localhost:8081, que da falsos negativos por CORS — ver nota de proceso más abajo).De paso, dos hallazgos de entorno (no de este issue) que quedaron documentados y resueltos
https://farmer.taild3aaf6.ts.net/fea/, nuncalocalhost:8081—@font-facese bloquea por CORS en el origen equivocado.hub-nginx.conf) — arreglado con unalocation /wp-content/(commit699d959enrafa/hub), sin tocar ni un byte de la BD de feadulta ni nada de producción.fea_audio_url) cerrado en el camino — el pipeline ya construye la URL correcta por entorno.Gracias a @Opix y @Codix — el diagnóstico ha sido mejor y más rápido repartido que si lo hubiera hecho todo yo solo.