/* ============================================================ a11y.css — Accessibility primer for NLU Delhi Career Portal Phase 4.0 foundation (2026-04-19) ------------------------------------------------------------ Depends on design-tokens.css for colour + focus-ring tokens. Include AFTER Bootstrap 4 so our overrides win the cascade. Scope of this sheet: 1. Skip-to-content link (visible only on keyboard focus). 2. Global :focus-visible ring replacing Bootstrap's default blue glow with a design-token-driven indigo halo that meets WCAG 2.1 SC 1.4.11 non-text contrast ≥ 3:1. 3. Reduced-motion safeguards on AOS / fade helpers. 4. Screen-reader-only utility (.visually-hidden) matching the Bootstrap 5 spelling so the eventual migration is a pure class rename, not a semantic change. 5. Minimum tap-target safeguards for mobile (≥ 44 × 44 px per WCAG 2.5.5 target-size, AAA). What this sheet deliberately does NOT do: - Fix every contrast violation across existing pages. Targeted overrides live alongside each page's own CSS during Phase 4.1+ redesigns. Here we only patch tokens that are *demonstrably* reused everywhere. ============================================================ */ /* ---------- 1. Skip-to-content link ------------------------- Place as the very first element inside . Every entry-point page (login.php, index.php, dashboard.php, applications-*.php) should also add id="main-content" to its primary landmark. -------------------------------------------------------------- */ .skip-link { position: absolute; top: -100px; /* off-screen by default */ left: var(--space-4, 1rem); z-index: var(--z-skiplink, 1100); padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem); background-color: var(--color-brand-primary-700, #4e61c4); color: var(--color-neutral-000, #ffffff); font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-base, 1rem); text-decoration: none; border-radius: var(--radius-md, 0.25rem); box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.15)); transition: top var(--motion-duration-base, 200ms) var(--motion-ease-standard, ease); } .skip-link:focus, .skip-link:focus-visible { top: var(--space-3, 0.75rem); /* slides in on Tab */ outline: 3px solid var(--color-focus-ring, #667eea); outline-offset: 2px; } /* ---------- 2. Focus-visible ring --------------------------- Bootstrap 4 uses `outline: 0` on .btn / form-control and swaps in a faint box-shadow. That faint ring fails 3:1 contrast on white in some browsers. We force a visible, token-driven halo using :focus-visible so mouse-click focus rings stay quiet while keyboard focus stays loud. -------------------------------------------------------------- */ :focus:not(:focus-visible) { /* Mouse / touch focus — let the browser's default ring (or none, on buttons) apply without our halo. */ } :focus-visible { outline: 3px solid var(--color-focus-ring, #667eea); outline-offset: 2px; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(102, 126, 234, 0.45)); } /* Form inputs + textareas: inset focus so the halo doesn't clash with the input border radius. */ .form-control:focus-visible, .form-select:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; /* defer to box-shadow */ border-color: var(--color-brand-primary-500, #667eea); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35), inset 0 0 0 1px var(--color-brand-primary-500, #667eea); } /* Links: keep Bootstrap's colour but swap the dotted ring for our solid outline on keyboard focus. */ a:focus-visible { outline: 2px solid var(--color-focus-ring, #667eea); outline-offset: 3px; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; /* no halo on links */ } /* ---------- 3. Reduced-motion guards ------------------------ AOS (Animate-On-Scroll) is used on the marketing pages. Kill its transforms when the user prefers reduced motion so no content slides in — it just appears. -------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-aos] { opacity: 1 !important; transform: none !important; } } /* ---------- 4. Screen-reader-only utility ------------------- Bootstrap 4 ships .sr-only; Bootstrap 5 renamed it to .visually-hidden. Provide both so migrating pages don't have to change HTML when we move to BS5 in Phase 4.1. -------------------------------------------------------------- */ .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ---------- 5. Mobile tap-target safeguard ------------------ WCAG 2.5.5 (AAA) recommends ≥ 44 × 44 px touch targets. Bootstrap 4's default .btn-sm and inline icon buttons fall well below this. Only enforce on viewports < 768 px so the desktop density isn't disturbed. -------------------------------------------------------------- */ @media (max-width: 767.98px) { .btn, .nav-link, .dropdown-item, a.list-group-item { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } /* Icon-only buttons (e.g. close × in modals) need centring so the 44-px box doesn't throw the glyph off-centre. */ .btn-icon, button.close { justify-content: center; } } /* ---------- 6. High-contrast mode support ------------------- Windows "forced-colors" mode re-paints everything with system colours. Ensure our custom button gradients don't disappear by pinning a visible border. -------------------------------------------------------------- */ @media (forced-colors: active) { .btn, .form-control, .card { border: 1px solid ButtonText; } .btn-primary, .btn-save { background: ButtonFace !important; color: ButtonText !important; background-image: none !important; } :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; } }