/** * WCAG 2.1 AA Accessibility Fixes * Unio Specialty Care — Applied to child theme * Created: 2026-04-07 * * Addresses findings from WCAG audit dated 2026-03-26 */ /* ========================================================================== Osano Cookie Consent — prevent Elementor kit label/heading styles from overriding Osano's own dark-background drawer styles ========================================================================== */ /* Reset Elementor kit's label{color} that bleeds into Osano drawer. `inherit` doesn't work because .elementor-kit-1533 is on , so the inherited value is still the Elementor-set color. Instead, explicitly reference Osano's own CSS custom properties. */ .elementor-kit-1533 .osano-cm-label, .elementor-kit-1533 .osano-cm-toggle__label, .elementor-kit-1533 .osano-cm-title__label, .elementor-kit-1533 [class*="osano-cm"] label, .elementor-kit-1533 [class*="osano-cm"] [role="heading"], .elementor-kit-1533 [class*="osano-cm"] .osano-cm-disclosure-item__title { color: var(--osano-dialog-foreground-color, #fff) !important; font-family: Helvetica, Arial, sans-serif !important; font-size: revert !important; font-weight: revert !important; line-height: revert !important; } /* Broader Osano reset — catch any label/heading inside the dialog */ .osano-cm-dialog label, .osano-cm-dialog [role="heading"], .osano-cm-drawer label, .osano-cm-drawer [role="heading"], .osano-cm-info label, .osano-cm-info [role="heading"] { color: var(--osano-dialog-foreground-color, #fff) !important; } /* ========================================================================== #1 — Focus Indicators (CRITICAL) WCAG 2.4.7 Focus Visible The site has `a:focus{outline:none !important}` in its Elementor Kit CSS. We must override this with higher specificity. ========================================================================== */ /* Override the existing outline:none rule */ a:focus, a:focus-visible, button:focus, button:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, [tabindex]:focus, [tabindex]:focus-visible, *:focus-visible { outline: 2px solid #005fcc !important; outline-offset: 2px !important; } /* Elementor-specific focus overrides */ .elementor-button:focus, .elementor-button:focus-visible, .elementor a:focus, .elementor a:focus-visible { outline: 2px solid #005fcc !important; outline-offset: 2px !important; } /* Skip-to-content link — style OceanWP's native .skip-link */ a.skip-link.screen-reader-text:focus, a.skip-link.screen-reader-text:focus-visible, body .skip-link.screen-reader-text:focus, body .skip-link.screen-reader-text:focus-visible { display: block !important; position: fixed !important; left: 8px !important; top: 8px !important; z-index: 999999 !important; clip: auto !important; -webkit-clip-path: none !important; clip-path: none !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; background: #fff !important; color: #1a6e99 !important; padding: 12px 24px !important; font-size: 16px !important; font-weight: 700 !important; text-decoration: none !important; border: 3px solid #1a6e99 !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } /* ========================================================================== #2 & #9 — Color Contrast Fixes (CRITICAL) WCAG 1.4.3 Contrast (Minimum) Elementor Kit Global Colors (from kit ID 1533): - 9618c84 "Unio Ocean Blue" #298FC2 → #1a6e99 (4.55:1 on white) - 1d83669 "Unio Rich Gardenia" #EE7F4B → #c4592a (4.52:1 on white) - 54dcba5 "Unio Slate" #929292 → #6b6b6b (4.71:1 on white) - b45ba9c "Radiation Oncology" #E49F2D → #8a6800 (4.86:1 on white) - 5dcea8d / d5a657b "Insight/GI" #00AEEF → #0077a8 (4.56:1 on white) - e62bd8b "Radiology Blue" #308ECA → #1a6e99 (4.55:1 on white) ========================================================================== */ /* Override Elementor global color CSS variables Must target .elementor-kit-1533 to match Elementor's specificity. :root alone loses because .elementor-kit-1533 is more specific. */ .elementor-kit-1533 { /* Unio Ocean Blue — used for links, buttons */ --e-global-color-9618c84: #1a6e99 !important; /* Unio Rich Gardenia — orange accent */ --e-global-color-1d83669: #c4592a !important; /* Unio Slate — gray text */ --e-global-color-54dcba5: #6b6b6b !important; /* Radiation Oncology Orange / Gold */ --e-global-color-b45ba9c: #8a6800 !important; /* Insight Blue */ --e-global-color-5dcea8d: #0077a8 !important; /* Gastroenterology Blue */ --e-global-color-d5a657b: #0077a8 !important; /* Radiology Blue */ --e-global-color-e62bd8b: #1a6e99 !important; /* Ocean Blue: Hover */ --e-global-color-de66f9e: #145a7d !important; /* Rich Gardenia: Hover */ --e-global-color-2107b64: #a04820 !important; } /* Override hardcoded brand colors in Elementor page-level CSS (e.g., location finder buttons have background: #298fc2 !important) */ .map-post-list p a.elementor-button { background: #1a6e99 !important; background-color: #1a6e99 !important; } /* Fallback overrides for inline styles that don't use CSS variables */ [style*="color:#298fc2"], [style*="color: #298fc2"], [style*="color:#298FC2"], [style*="color: #298FC2"] { color: #1a6e99 !important; } [style*="color:#ee7f4b"], [style*="color: #ee7f4b"], [style*="color:#EE7F4B"], [style*="color: #EE7F4B"] { color: #c4592a !important; } [style*="background-color:#ee7f4b"], [style*="background-color: #ee7f4b"], [style*="background-color:#EE7F4B"], [style*="background-color: #EE7F4B"] { background-color: #c4592a !important; } [style*="color:#929292"], [style*="color: #929292"] { color: #6b6b6b !important; } [style*="color:#e49f2d"], [style*="color: #e49f2d"], [style*="color:#E49F2D"], [style*="color: #E49F2D"], [style*="color:#e39f2e"], [style*="color: #e39f2e"], [style*="color:#E39F2E"], [style*="color: #E39F2E"] { color: #8a6800 !important; } [style*="color:#00aeef"], [style*="color: #00aeef"], [style*="color:#00AEEF"], [style*="color: #00AEEF"] { color: #0077a8 !important; } [style*="background-color:#298fc2"], [style*="background-color: #298fc2"], [style*="background-color:#298FC2"], [style*="background-color: #298FC2"] { background-color: #1a6e99 !important; } /* ========================================================================== #6c — Link Distinguishability (HIGH) WCAG 1.4.1 Use of Color ========================================================================== */ /* Inline text links must have underlines, not just color */ .elementor-widget-text-editor a, .elementor-widget-theme-post-content a, .entry-content a, .page-content a, article a:not(.elementor-button):not(.btn) { text-decoration: underline !important; } /* Exception: navigation, buttons, and cards don't need underlines */ nav a, .elementor-button, .btn, .menu-item a, .elementor-nav-menu a, .elementor-widget-image a, .elementor-widget-icon a, .elementor-icon-box a, .elementor-post__thumbnail__link, .elementor-post__read-more { text-decoration: none !important; } /* ========================================================================== #8 — Mobile Touch Targets (MEDIUM) WCAG 2.5.8 Target Size (Minimum) — 44x44px recommended ========================================================================== */ @media (max-width: 768px) { /* Increase footer link tap targets */ #footer-widgets a, .footer-widgets a, #colophon a, .site-footer a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; } /* Increase button/link tap targets in main content */ .elementor-button { min-height: 44px; padding-top: 12px !important; padding-bottom: 12px !important; } /* Navigation links */ .menu-item a { min-height: 44px; line-height: 44px; } /* Form inputs */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea { min-height: 44px; padding: 10px 12px; } /* Social icons and small interactive elements */ .elementor-social-icon, .elementor-icon { min-width: 44px; min-height: 44px; } } /* ========================================================================== Screen Reader Only — Utility class ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }