Others
Accessibility Bar
Accessibility Bar provides users with quick access to features that enhances usability and inclusivity, such as text resizing, contrast adjustments, screen reader support and other accessibility settings.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Skip link is the first focusable element on the page, satisfying Bypass Blocks (WCAG 2.4.1)
- Text-resize controls let users scale text up to 200% without loss of content (WCAG 1.4.4)
- Layout reflows to a single column at 320px / 400% zoom without horizontal scrolling (WCAG 1.4.10)
- Bar text (#fafafa on #4a2bc2) and controls exceed the 4.5:1 contrast minimum (WCAG 1.4.3)
- Every icon-only control carries a descriptive aria-label
- Controls are full-size touch targets (≥ 24×24px, WCAG 2.5.8) within the 46px bar
- Decorative emblem and launch icons are hidden from assistive tech with aria-hidden
- Respects prefers-reduced-motion, no transition on the skip-link reveal when reduced motion is set
When to use this component
✓Do's
- •Building any Government of India website or service (GIGW 3.0 mandates it)
- •You need a global, always-visible entry point for skip-to-content, text resize and language
- •The page has a masthead/header that keyboard users should be able to bypass
- •You want the national emblem and official "Government of India" attribution at the top of the page
✗Don'ts
- •You only need primary site navigation, use the Header / Navbar instead
- •You only need a standalone language switch, use the Language Selector
- •The full accessibility menu (contrast, spacing, reading mode) is needed, use the Accessibility Widget
- •You would hide it behind a toggle or place it below the header, it must be the first element on the page
Do's and Don'ts
✓ Do's
Place the bar at the very top of the page, before the masthead, so the skip link is the first focusable element.
✗ Don'ts
Don't strip the bar down to a single icon or hide the skip link and resize controls "for aesthetics", they are required utilities.
✓ Do's
Persist the chosen text size (e.g. in localStorage) so the preference carries across every page of the service.
✗ Don'ts
Don't drop the emblem and "Government of India" attribution, it is part of the mandated identity for official services.