/** * Accessibility CSS Utilities & Fixes * WCAG 2.1 Level AA Compliance Helper * * This file provides reusable accessibility utilities that can be injected * into all pages to improve WCAG 2.1 AA compliance. * * Include this file after other stylesheets: * */ /* ============================================================================ 1. SKIP NAVIGATION LINK ============================================================================ */ /** * Skip to main content link * Should be the first focusable element on the page * Add this HTML at the very beginning of : * */ .skip-link { position: absolute; top: -40px; left: 0; background-color: #1a2b4a; color: #fff; padding: 8px 16px; text-decoration: none; border-radius: 0 0 4px 0; z-index: 9999; font-weight: 600; font-size: 14px; transition: top 0.3s ease; } .skip-link:focus { top: 0; outline: 3px solid #d4a843; outline-offset: 2px; } /* ============================================================================ 2. VISIBLE FOCUS INDICATORS ============================================================================ */ /** * Ensure all interactive elements have visible focus indicators * These are critical for keyboard navigation accessibility */ /* Links */ a:focus { outline: 3px solid #d4a843; outline-offset: 2px; } /* Buttons */ button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: 3px solid #d4a843; outline-offset: 2px; } /* Form inputs */ input:focus, select:focus, textarea:focus, [contenteditable]:focus { outline: 3px solid #d4a843; outline-offset: 2px; } /* Generic focusable elements */ [role="button"]:focus, [role="link"]:focus, [role="menuitem"]:focus, [role="tab"]:focus { outline: 3px solid #d4a843; outline-offset: 2px; } /** * Remove default browser outline only if we have our custom focus style * Never remove outline without providing a visible alternative */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #d4a843; outline-offset: 2px; } /* ============================================================================ 3. FORM FIELD ACCESSIBILITY IMPROVEMENTS ============================================================================ */ /** * Ensure form labels are visually associated with inputs * Add aria-required for better screen reader support */ label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } /** * Placeholder text should not be the only label * Ensure input groups are semantic */ input::placeholder, textarea::placeholder, select::placeholder { color: #999; opacity: 1; } /** * Required field indicators * Use aria-required="true" on the input for screen readers */ .required, [aria-required="true"] { color: #d32f2f; } /** * Error field styling for accessibility * Use role="alert" and aria-describedby for error messages */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .input-error { border-color: #d32f2f; outline-color: #d32f2f; } /* ============================================================================ 4. REDUCED MOTION SUPPORT (WCAG 2.3.3 AAA) ============================================================================ */ /** * Disable animations and transitions for users who prefer reduced motion * This is critical for users with vestibular disorders * * Respects user's prefers-reduced-motion system setting */ @media (prefers-reduced-motion: reduce) { /** * Disable ALL animations and transitions * for users who have indicated motion sensitivity */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Specific animation-heavy elements */ [class*="animate"], [class*="fade"], [class*="slide"], [class*="bounce"], [class*="pulse"], [class*="spin"], [class*="wiggle"], .hero, .timeline, .step, .trust-item, .calculator-results { animation: none !important; transition: none !important; } /* Keep hover states but without animation */ button:hover, a:hover, input:hover { background-color: inherit; color: inherit; transform: none; } } /* ============================================================================ 5. SCREEN READER ONLY CONTENT ============================================================================ */ /** * Visually hide content that should only be available to screen readers * Use this class for extra context or labels needed by assistive tech * * Example: Current page */ .sr-only, .screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /** * Alternative method using visibility * Better browser support but less optimal for some screen readers */ .sr-only-alt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /** * Skip links and other interactive elements should become visible on focus */ .sr-only:focus, .screen-reader-only:focus { position: static; width: auto; height: auto; padding: inherit; margin: inherit; overflow: visible; clip: auto; white-space: normal; } /* ============================================================================ 6. COLOR CONTRAST IMPROVEMENTS ============================================================================ */ /** * Fix gold color (#d4a843) contrast issues on light backgrounds * Original gold on white: 2.21:1 (FAILS AA 4.5:1) * * Solution: Use darker shade (#b8860b) or primary (#1a2b4a) on light backgrounds * Gold works well on dark backgrounds (5.70:1 contrast ratio) */ /** * Light background text colors * On white or light backgrounds, use darker colors */ .on-light { color: #1a2b4a; } .on-light.accent { color: #b8860b; /* Darker gold for contrast */ } /** * Dark background text colors * On dark backgrounds, use light colors */ .on-dark { color: #fff; } .on-dark.accent { color: #d4a843; /* Original gold works on dark */ } /** * Links in various contexts * Ensure sufficient contrast in all cases */ a { color: #1a2b4a; text-decoration: underline; } a:visited { color: #1a2b4a; } a:hover, a:active { color: #b8860b; /* Darker gold for contrast */ } /** * Dark background links */ .dark-section a { color: #fff; text-decoration: underline; } .dark-section a:visited { color: #f0f0f0; } .dark-section a:hover { color: #d4a843; } /* ============================================================================ 7. SEMANTIC HTML EMPHASIS ============================================================================ */ /** * Ensure semantic elements are properly styled * Don't use or
when semantic elements would be better */ /* Navigation landmarks */ nav { display: block; } /* Main content area */ main { display: block; } /* Content sections */ section { display: block; } /* Articles and blog posts */ article { display: block; } /* Sidebar content */ aside { display: block; } /* Strong emphasis (visual and semantic) */ strong, b { font-weight: 700; } /* Emphasis (visual and semantic) */ em, i { font-style: italic; } /* ============================================================================ 8. TABLE ACCESSIBILITY ============================================================================ */ /** * Ensure data tables have proper structure for screen readers * * Use semantic structure: * * * * * * * * *
Table title
Header
Data
*/ table { border-collapse: collapse; width: 100%; } caption { text-align: left; margin-bottom: 1rem; font-weight: 700; } thead { background-color: #1a2b4a; color: #fff; } th { padding: 12px; text-align: left; font-weight: 700; } td { padding: 12px; border-bottom: 1px solid #e0e0e0; } tbody tr:nth-child(odd) { background-color: #f9f9f9; } /* ============================================================================ 9. CHECKBOX AND RADIO ACCESSIBILITY ============================================================================ */ /** * Ensure checkboxes and radio buttons are properly accessible * Increase click target size for motor control accessibility */ input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin-right: 8px; cursor: pointer; } input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 3px solid #d4a843; outline-offset: 2px; } /** * Wrap in label for larger click target * */ /* ============================================================================ 10. MODAL AND DIALOG ACCESSIBILITY ============================================================================ */ /** * For modal dialogs, ensure: * - role="dialog" or use element * - aria-labelledby pointing to dialog title * - aria-modal="true" * - Focus trap (focus stays inside modal) * - Close button is easily identifiable */ dialog { padding: 2rem; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } dialog:focus { outline: 3px solid #d4a843; outline-offset: -3px; } dialog::backdrop { background-color: rgba(0, 0, 0, 0.3); } /* ============================================================================ 11. UTILITY CLASSES FOR ACCESSIBILITY ============================================================================ */ /** * Text sizing for readability * Support users who increase text size (up to 200%) */ .text-large { font-size: 1.25rem; line-height: 1.5; } .text-small { font-size: 0.875rem; line-height: 1.5; } /** * Line height for readability * Recommended: 1.5 or greater */ .line-height-loose { line-height: 1.8; } .line-height-normal { line-height: 1.6; } /** * Letter spacing for readability * Can help with dyslexia */ .letter-spacing-loose { letter-spacing: 0.05em; } /** * Text decoration for links * Always provide text decoration, not just color */ .link-underline { text-decoration: underline; } .link-underline:hover { text-decoration: underline; } /* ============================================================================ 12. FOCUS MANAGEMENT & VISIBLE INDICATORS ============================================================================ */ /** * High contrast mode support (Windows High Contrast) * Ensures outline is visible even in high contrast mode */ @media (prefers-contrast: more) { a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 4px solid #1a2b4a; outline-offset: 2px; } } /* ============================================================================ 13. PRINT ACCESSIBILITY ============================================================================ */ /** * Ensure content is accessible when printed */ @media print { /* Show skip links in print */ .skip-link { position: static; top: auto; left: auto; } /* Expand links to show full URL */ a[href]:after { content: " (" attr(href) ")"; } /* Prevent page breaks in key content */ section { page-break-inside: avoid; } /* Remove decorative elements */ [aria-hidden="true"] { display: none; } } /* ============================================================================ 14. RESPONSIVE ACCESSIBILITY ============================================================================ */ /** * Ensure accessibility on mobile devices */ @media (max-width: 768px) { /** * Increase touch target size for motor control * Recommended: 48px × 48px minimum */ button, input[type="button"], input[type="submit"], a[role="button"], [role="button"] { min-width: 48px; min-height: 48px; padding: 12px 16px; } /** * Ensure form inputs are large enough on mobile */ input, select, textarea { min-height: 44px; font-size: 16px; } /** * Don't zoom on input focus (prevents mobile zoom) */ input, select, textarea { font-size: 16px; } } /* ============================================================================ 15. COLOR BLINDNESS SUPPORT ============================================================================ */ /** * Don't rely on color alone to convey information * Always combine with icons, patterns, or text */ /** * Success state (usually green) * Add checkmark icon or text */ .success { color: #10b981; position: relative; } .success::before { content: "✓ "; font-weight: 700; } /** * Error state (usually red) * Add X icon or text */ .error { color: #d32f2f; position: relative; } .error::before { content: "✗ "; font-weight: 700; } /** * Warning state (usually yellow) * Add warning icon or text */ .warning { color: #f57c00; position: relative; } .warning::before { content: "⚠ "; font-weight: 700; } /** * Info state (usually blue) * Add info icon or text */ .info { color: #1976d2; position: relative; } .info::before { content: "ℹ "; font-weight: 700; } /* ============================================================================ END: Accessibility CSS ============================================================================ */