/* ========================================================================= elturco.es — Accesibilidad Cada bloque se activa con una clase en el (ea-focus, ea-contrast…) que pone el plugin según los ajustes. ========================================================================= */ /* ------------------------------------------------------------------------- Foco visible · WCAG 2.4.7 ---------------------------------------------------------------------- */ body.ea-focus :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline: 3px solid #14213d !important; outline-offset: 2px !important; border-radius: 2px; box-shadow: 0 0 0 5px #fff !important; } body.ea-focus .et_pb_button:focus-visible, body.ea-focus .et_pb_menu a:focus-visible, body.ea-focus .et-menu a:focus-visible, body.ea-focus .et_pb_module a:focus-visible, body.ea-focus .et_clickable:focus-visible, body.ea-focus .woocommerce a.button:focus-visible, body.ea-focus .woocommerce button.button:focus-visible, body.ea-focus .woocommerce input.button:focus-visible, body.ea-focus .woocommerce .quantity input:focus-visible, body.ea-focus .wpf_search_button:focus-visible, body.ea-focus .cky-btn:focus-visible { outline: 3px solid #14213d !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #fff !important; } /* Sobre fondos oscuros se invierte */ body.ea-focus .et_pb_bg_layout_dark :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 5px #14213d !important; } /* ------------------------------------------------------------------------- Enlace de salto · WCAG 2.4.1 ---------------------------------------------------------------------- */ .ea-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 14px 22px; background: #14213d; color: #fff !important; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0; } .ea-skip-link:focus { left: 0; outline: 3px solid #fff !important; outline-offset: -6px !important; } /* Destino del salto: que no muestre contorno al recibir el foco por programa */ #ea-main:focus { outline: none; } /* ------------------------------------------------------------------------- Título de la tienda ---------------------------------------------------------------------- */ .ea-shop-title { margin: 0 0 0.6em; } /* ------------------------------------------------------------------------- Contraste de color · WCAG 1.4.3 No hay reglas aquí a propósito. En este sitio los colores están escritos a mano en la hoja del tema, en los módulos de Divi y en varios plugins, así que ningún conjunto de selectores los alcanza todos. La sustitución se hace en a11y.js leyendo el color calculado de cada elemento, y la tabla de colores está en PHP (EA_Frontend::contrast_map), editable con el filtro `ea_contrast_colors`. Aviso: algunos botones de Divi y de WooCommerce no se dejan cambiar ni con un estilo en línea marcado !important. Esos hay que corregirlos en su origen: en el módulo de Divi o en el CSS del tema hijo. ---------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Tamaño de objetivo táctil · WCAG 2.5.8 ---------------------------------------------------------------------- */ body.ea-targetsize .et_pb_text_inner a, body.ea-targetsize .product-categories a, body.ea-targetsize .widget_product_categories a, body.ea-targetsize .et_pb_menu .sub-menu a, body.ea-targetsize footer a { min-height: 24px; display: inline-block; padding-block: 2px; } /* ------------------------------------------------------------------------- Reducir movimiento · WCAG 2.2.2 ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.ea-motion *, body.ea-motion *::before, body.ea-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- Utilidad: visible solo para lectores de pantalla ---------------------------------------------------------------------- */ .ea-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }