/* * SkillUp Business School — Accessibility Layer (a11y.css) * WCAG 2.1 AA additive helpers. Low specificity; safe on every page. * Load AFTER style.css and dashboard.css. * * Covers: * 1. Visible :focus-visible outlines (keyboard only) * 2. .visually-hidden utility * 3. .skip-link (hidden until focused) * 4. Minimum 44 × 44 px tap targets for interactive controls * 5. Contrast-safe class overrides for brand colours that fail AA * 6. Reduced-motion safe defaults (reinforces existing overrides) * 7. Form error / aria-live region visibility * 8. Modal overlay baseline focus trap indicator */ /* ── 1. Focus-Visible Outlines ──────────────────────────────────────────── Replaces the blanket outline:none reset in style.css and dashboard.css. Uses :focus-visible so mouse users see no extra outline. Brand blue #1A56DB with a 2 px transparent gap (white offset) ensures the ring is always visible on both light and dark backgrounds. ──────────────────────────────────────────────────────────────────────── */ *:focus { outline: none; /* keep mouse default neutral */ } *:focus-visible { outline: 3px solid #1A56DB; outline-offset: 2px; border-radius: 4px; /* softens the ring on rounded elements */ } /* On dark backgrounds (stats band, CTA banner, footer) switch to white ring */ .stats-band *:focus-visible, .cta-banner *:focus-visible, footer *:focus-visible, .course-hero *:focus-visible, .contact-hero *:focus-visible { outline-color: #ffffff; } /* Dashboard sidebar dark panel */ .dash-sidebar *:focus-visible, .sidebar *:focus-visible, .player-sidebar *:focus-visible { outline-color: #93C5FD; /* light blue visible on dark sidebar bg */ } /* Buttons already have border-radius — carry it through to ring */ .btn:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid #1A56DB; outline-offset: 3px; border-radius: 10px; } /* Input / select / textarea focus ring supplements the existing box-shadow */ .form-control:focus-visible, .form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #1A56DB; outline-offset: 1px; } /* Checkboxes and radio buttons */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid #1A56DB; outline-offset: 2px; } /* Range inputs */ input[type="range"]:focus-visible { outline: 3px solid #1A56DB; outline-offset: 3px; } /* ── 2. Visually Hidden Utility ──────────────────────────────────────────── Hides content visually while keeping it accessible to screen readers. Use on labels, legend text, sr-only descriptions, etc. ──────────────────────────────────────────────────────────────────────── */ .visually-hidden, .sr-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; } /* Focusable variant — re-shows when focused (for skip links etc.) */ .visually-hidden-focusable:not(:focus):not(:focus-within), .sr-only-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── 3. Skip-to-Content Link ─────────────────────────────────────────────── Must be the very first focusable element in . Hidden off-screen; slides in when focused by keyboard. ──────────────────────────────────────────────────────────────────────── */ .skip-link { position: fixed; top: -100%; left: 50%; transform: translateX(-50%); z-index: 99999; padding: 0.85rem 1.75rem; background: #1A56DB; color: #ffffff; font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem; font-weight: 700; border-radius: 0 0 10px 10px; text-decoration: none; white-space: nowrap; transition: top 0.2s ease; box-shadow: 0 4px 16px rgba(26, 86, 219, 0.45); } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid #ffffff; outline-offset: 2px; } /* ── 4. Minimum 44 × 44 px Tap Targets ──────────────────────────────────── WCAG 2.5.5 (AA) requires interactive targets to be at least 44 × 44 px, or have enough spacing. We use min-height / min-width on small controls that currently fall below this threshold. ──────────────────────────────────────────────────────────────────────── */ /* Navbar hamburger — 3 thin spans, padded wrapper only ~30 px tall. Only enforce the 44px tap-target SIZE here. Do NOT set `display` — that is controlled by style.css (hidden on desktop, shown under the 768px breakpoint). Setting display here would override the desktop `display:none` and wrongly show the hamburger on large screens. */ .hamburger, .navbar-toggle, .hamburger-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } /* Social icon buttons in footer and contact page — currently 36 × 36 px */ .social-btn { min-width: 44px; min-height: 44px; } /* Nav user avatar button — 36 × 36 px */ .nav-user-btn, .user-avatar-sm { min-width: 44px; min-height: 44px; } /* Topbar icon buttons in dashboard — 36 × 36 px */ .topbar-icon-btn { min-width: 44px; min-height: 44px; } /* Password-reveal toggle buttons — currently unpadded absolute buttons */ .password-toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Pagination buttons — 36 × 36 px */ .page-btn { min-width: 44px; min-height: 44px; } /* Filter checkboxes — small hit area; increase via padding on parent label */ .filter-option, .checkbox-group, .interest-checkbox { min-height: 44px; display: flex; align-items: center; } /* Tab switcher buttons on login page */ .tab-btn { min-height: 44px; } /* ── 5. Colour Contrast Safe Overrides ──────────────────────────────────── Audit results (WCAG 1.4.3, normal text must achieve 4.5:1 on white): a) #E5117F (brand pink) on #FFFFFF = 4.35:1 → FAILS AA for body text Used in: currently no direct text use found in main CSS, but flag added Safe accessible variant: #C10A6B (5.03:1 on white) b) --text-4 (#94A3B8) on #FFFFFF = 2.85:1 → FAILS AA Used for: placeholder text, small labels, meta text CSS fix: raise contrast via a class rather than overriding the token to avoid side-effects. c) #8898B8 footer text on #0B1629 background = 4.6:1 → PASSES AA (just) No override needed. d) rgba(255,255,255,.7) / rgba(255,255,255,.8) on dark gradients: At 0.7 opacity on #0F2A5E ≈ 5.5:1 → passes. No override needed. e) .stat-label rgba(255,255,255,.7) on stats-band gradient ≈ 5.2:1 → passes. f) .nav-links a color: var(--text-3) #475569 on white = 4.6:1 → passes AA. ──────────────────────────────────────────────────────────────────────── */ /* * If you use brand pink #E5117F for body-size text (< 18 pt / < 14 pt bold), * add class="accessible-pink" to the element to switch to the AA-safe shade. */ .accessible-pink { color: #C10A6B; /* 5.03:1 on white — AA pass for normal text */ } /* * Muted / secondary text that falls below 4.5:1 on white (#94A3B8 = 2.85:1). * Replace --text-4 uses on white backgrounds with this class where text * conveys meaning (not purely decorative). * e.g. breadcrumb separators, course meta icons, filter counts. */ .accessible-muted { color: #64748B; /* 4.64:1 on white — AA pass */ } /* * .logo-sub / .logo-tagline small text (#94A3B8) on white navbar = fails. * Override for that specific context. */ .navbar .logo-sub, .navbar .logo-tagline, .nav-logo-text small { color: #64748B; /* raise to 4.64:1 on white */ } /* * Footer small text: .logo-sub on dark footer (#0B1629) background. * #8898B8 on #0B1629 is acceptable (4.6:1). No change needed there. * But .footer-logo-text small (same class) is on the dark footer, so * we only need to correct the light navbar instance above. */ /* * .filter-count (#94A3B8 on #F1F5F9) — very low contrast badge. * Raise to slate-500 for legibility. */ .filter-count { color: #64748B; background: #E2E8F0; } /* * .cat-count (#94A3B8 on white card) — small text, fails AA. */ .cat-count { color: #64748B; } /* * .course-cat (.7rem uppercase) in #1A56DB on white = 4.52:1 → borderline pass. * No override needed but tracking here for awareness. */ /* * Dashboard --text-muted (#64748B) on white = 4.64:1 → passes AA. * No override needed. */ /* ── 6. Reduced-Motion Safe Defaults ────────────────────────────────────── style.css already includes a broad prefers-reduced-motion block, but it applies to *, which can affect third-party widgets injected later. This block reinforces the intent with explicit animation-play-state and scroll behaviour for scroll-triggered reveals. ──────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } /* Ensure reveal animation does not lock opacity at 0 for reduced-motion */ .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* Pause looping decorative animations */ .hero-img-wrap, .hero-eyebrow .dot, .hero-eyebrow .dot::after, .page-loader-spinner, .spinner, .spinner-sm, .skeleton, .progress-fill, .nav-logo-icon, .logo-icon { animation: none !important; } } /* ── 7. Form Error / ARIA Live Region Visibility ────────────────────────── Ensure error messages linked via aria-describedby are always visible when present (not accidentally hidden by a stray .hidden class added alongside aria-live content). ──────────────────────────────────────────────────────────────────────── */ /* When JS removes .hidden from error spans, guarantee they display */ .form-error:not(.hidden), [role="alert"]:not(.hidden), [aria-live]:not(.hidden) { display: block !important; } /* Alert boxes — ensure enough padding for readability */ .alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; line-height: 1.55; } /* ── 8. Modal / Dialog Accessibility ────────────────────────────────────── Modals that overlay the page need a visible focus indicator and should trap focus inside. The CSS layer adds a strong border to help identify the modal boundary visually for low-vision users. ──────────────────────────────────────────────────────────────────────── */ .modal-overlay[style*="flex"], .modal-overlay.open, .ov.open { /* Ensure overlay dims the background sufficiently (4.5:1 implied) */ background: rgba(15, 23, 42, 0.65); } .modal { outline: 2px solid transparent; /* focus ring target */ } .modal:focus-visible { outline: 3px solid #1A56DB; outline-offset: 2px; } /* ── End of a11y.css ──────────────────────────────────────────────────── */