/* ============================================================================= * Tema habitat - Correcciones de accesibilidad y maquetación * Red Hábitat para la Humanidad LAC * * Autor: Winston Quiros Gomez - Arkkosoft SA * Fecha: 7 de agosto de 2026 * Versión: 1.0.0 * * CÓMO SE USA * Opción A (recomendada): añadir el contenido de este archivo al final de * style.css del tema, o encolarlo como hoja aparte después de la principal. * * Opción B (puente inmediato): pegarlo en Apariencia > Personalizar > CSS * adicional. Sirve mientras se coordina el cambio en el tema, pero conviene * moverlo al repositorio para que quede versionado. * * QUÉ CORRIGE * 1. Contraste insuficiente WCAG 2.2 - 1.4.3 (AA) * 2. Foco de teclado invisible WCAG 2.2 - 2.4.7 (AA) * 3. Enlace de salto al contenido WCAG 2.2 - 2.4.1 (A) * 4. Desbordamiento horizontal Perú, México y Gobernanza * 5. Saltos de maquetación (CLS) Dominicana, Trinidad, México, Gobernanza * * LAS RELACIONES DE CONTRASTE ESTÁN CALCULADAS, NO ESTIMADAS * Cada valor de este archivo se midió con la fórmula de luminancia relativa * de WCAG. Los ratios aparecen anotados junto a cada color. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. CONTRASTE * * El problema medido, por sitio: * Gobernanza LAC 78 de 200 elementos por debajo del mínimo * México 71 de 200 * Perú 62 de 193 * Trinidad 57 de 200 * Bolivia 54 de 195 * Dominicana 43 de 200 * Honduras 22 de 154 * * El botón de donación, que es la conversión más valiosa del sitio, está * entre los elementos que fallan en los siete. * -------------------------------------------------------------------------- */ /* 1.1 Botón de donación -------------------------------------------------------- * * ACTUAL: fondo #F36F21 con texto blanco = 2.95:1 INCUMPLE (mínimo 4.5:1) * * Dos salidas válidas. Elegir una según lo que diga la guía de marca: * * OPCIÓN A - Oscurecer el naranja, conservando el tono * fondo #C8510B con texto blanco = 4.53:1 CUMPLE AA * Es el mismo naranja, un 20 % más oscuro. Sigue leyéndose como * el color de la marca. * * OPCIÓN B - Conservar el naranja exacto y cambiar el texto a negro * fondo #F36F21 con texto #000000 = 7.11:1 CUMPLE AAA * No toca el color corporativo en absoluto. El contraste es * incluso mejor. El coste es estético: el botón pierde fuerza. * * Aquí va la opción A. Para usar la B, comentar este bloque y descomentar * el siguiente. */ .btn-donar, .donar-ahora, .boton-donar, a.donate-now, .wp-block-button__link.is-style-donar { background-color: #C8510B; /* 4.53:1 con blanco */ color: #FFFFFF; border-color: #C8510B; } .btn-donar:hover, .donar-ahora:hover, .boton-donar:hover, a.donate-now:hover { background-color: #A84309; /* 6.05:1 con blanco */ color: #FFFFFF; } /* OPCIÓN B - conservar el naranja de marca y usar texto negro .btn-donar, .donar-ahora, .boton-donar, a.donate-now { background-color: #F36F21; color: #000000; } */ /* 1.2 Tarjetas de color -------------------------------------------------------- * * Las tarjetas de "Lo más reciente" usan texto blanco sobre fondos de marca: * * Celeste #00AEEF con blanco = 2.53:1 INCUMPLE * Verde #39B54A con blanco = 2.66:1 INCUMPLE * Rojo #C1272D con blanco = 5.84:1 CUMPLE (este se deja igual) * * Corrección: oscurecer celeste y verde manteniendo el tono. */ .tarjeta--celeste, .card-celeste, .bg-celeste { background-color: #007EAD; /* 4.58:1 con blanco */ color: #FFFFFF; } .tarjeta--verde, .card-verde, .bg-verde { background-color: #2A8637; /* 4.60:1 con blanco */ color: #FFFFFF; } /* El rojo ya cumple: se deja como está, documentado para que nadie lo cambie. .tarjeta--rojo { background-color: #C1272D; color: #FFFFFF; } 5.84:1 CUMPLE */ /* 1.3 Texto de apoyo ----------------------------------------------------------- * * Los grises claros de subtítulos y pies suelen quedar por debajo del mínimo. * #767676 es el gris más claro que cumple 4.5:1 sobre blanco. */ .texto-secundario, .entry-meta, .post-meta, figcaption, .wp-caption-text { color: #767676; /* 4.54:1 sobre blanco */ } /* ----------------------------------------------------------------------------- * 2. FOCO DE TECLADO VISIBLE WCAG 2.2 - 2.4.7 (AA) * * Muchos temas anulan el contorno del foco por estética y dejan la navegación * por teclado a ciegas. Esto lo restaura de forma visible sin afectar a quien * navega con ratón, gracias a :focus-visible. * -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #005A9C; /* 7.14:1 sobre blanco */ outline-offset: 2px; border-radius: 2px; } /* Respaldo para navegadores sin :focus-visible */ a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid #005A9C; outline-offset: 2px; } /* Nunca eliminar el contorno sin sustituirlo por algo visible */ *:focus { outline-color: #005A9C; } /* ----------------------------------------------------------------------------- * 3. ENLACE DE SALTO AL CONTENIDO WCAG 2.2 - 2.4.1 (A) * * Va acompañado del PHP de functions-habitat-fixes.php, que inserta el enlace. * Está oculto hasta que recibe el foco con Tab. * -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 20px; background: #FFFFFF; color: #005A9C; font-weight: 700; text-decoration: underline; border: 2px solid #005A9C; border-radius: 0 0 4px 0; } .skip-link:focus, .skip-link:focus-visible { left: 0; outline: 3px solid #005A9C; outline-offset: 2px; } /* ----------------------------------------------------------------------------- * 4. DESBORDAMIENTO HORIZONTAL * * Medido: * Perú 390 px de viewport → 585 px de scrollWidth. 195 px de exceso, * casi la mitad del ancho de pantalla. Es el peor de los siete. * México el menú se parte en dos líneas a 1430 px y aparece scroll * Gobernanza scroll horizontal en escritorio * * Contenedores señalados en la medición: .owl-stage, .row, .columns.small-12 * -------------------------------------------------------------------------- */ /* 4.1 Contención general. Actúa como red de seguridad mientras se localiza * el contenedor exacto que desborda. */ html, body { overflow-x: hidden; max-width: 100%; } /* 4.2 Rejilla Foundation: evitar que los márgenes negativos desborden */ .row { max-width: 100%; box-sizing: border-box; } .columns, .column { box-sizing: border-box; max-width: 100%; } /* 4.3 Carrusel OwlCarousel: el escenario suele ser el culpable */ .owl-carousel, .owl-stage-outer { max-width: 100%; overflow: hidden; } /* 4.4 Elementos que típicamente desbordan en móvil */ img, video, iframe, embed, object, table, pre { max-width: 100%; height: auto; } table { display: block; overflow-x: auto; white-space: normal; } /* 4.5 Palabras muy largas y URLs sin espacios */ p, h1, h2, h3, h4, h5, h6, li, td, dd { overflow-wrap: break-word; word-wrap: break-word; } /* 4.6 Menú principal en escritorio intermedio. * Corrige el corte de México entre 1200 y 1500 px, donde "Novedades" * se descuelga a una segunda línea. */ @media screen and (min-width: 1200px) and (max-width: 1500px) { .menu-principal a, .main-navigation a, .top-bar-section li a { font-size: 0.92rem; padding-left: 0.6rem; padding-right: 0.6rem; white-space: nowrap; } } /* ----------------------------------------------------------------------------- * 5. SALTOS DE MAQUETACIÓN (CLS) * * Medido: * Gobernanza 0.317 el peor de la red, más del triple del umbral * México 0.259 * Trinidad 0.236 * Dominicana 0.220 * Umbral recomendado: 0.100 * * La causa es la misma en los cuatro: el carrusel del héroe y las imágenes * no reservan espacio, así que el contenido salta mientras cargan. * -------------------------------------------------------------------------- */ /* 5.1 Reservar altura del carrusel del héroe. * Ajustar la proporción a la de las imágenes reales del sitio. */ .hero, .hero-carousel, .slider-principal, .owl-carousel.hero { aspect-ratio: 16 / 9; min-height: 320px; background-color: #EEF2F7; /* color de espera, evita el destello en blanco */ } @media screen and (min-width: 768px) { .hero, .hero-carousel, .slider-principal { min-height: 480px; } } /* 5.2 Reservar proporción en las tarjetas de noticias */ .tarjeta img, .card img, .post-thumbnail img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } /* 5.3 Fuentes: evitar el salto al intercambiar la tipografía. * Los siete cargan Neue Haas Grotesk, unos 370 KB en cuatro archivos. * Con size-adjust, la fuente de respaldo ocupa casi lo mismo y el cambio * deja de mover el texto. Ajustar los porcentajes midiendo con la fuente * real; estos valores son un punto de partida razonable. */ @font-face { font-family: 'Neue Haas Grotesk Fallback'; src: local('Arial'); size-adjust: 97%; ascent-override: 95%; descent-override: 22%; line-gap-override: 0%; } body { font-family: 'Neue Haas Grotesk Text', 'Neue Haas Grotesk Fallback', Arial, sans-serif; } /* ----------------------------------------------------------------------------- * 6. DETALLES DE USO * -------------------------------------------------------------------------- */ /* 6.1 Área táctil mínima de 24 x 24 px WCAG 2.2 - 2.5.8 (AA) */ .socials a, .bar-socials a, .owl-nav button, .menu-toggle { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; } /* 6.2 Respetar la preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 6.3 Clase para texto solo audible por lectores de pantalla. * La usa functions-habitat-fixes.php para las etiquetas del buscador. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; } .header-logo .site-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }