Command Palette

Search for a command to run...

Accessibility

Accessibility overview

அணுகல் கண்ணோட்டம்

Tamil DS targets WCAG 2.1 AA compliance across every component. Accessibility is not a feature we add at the end — it is a hard requirement baked into every design and implementation decision.

ஒவ்வொரு கூறிலும் WCAG 2.1 AA இணக்கத்தை இலக்காகக் கொள்கிறது.

Assistive technology use-case pages

Accessibility support must include people who use tactile input, switch input, alternate text-entry systems, spoken output, voice control, captions, magnification, high contrast, and cognitive support. These detailed guides explain how those workflows feel in real use.

Braille Keyboard AccessHow braille keyboards and refreshable braille displays translate UI structure into tactile reading and chorded input.Morse Code Assistive InputHow switch-based Morse input supports text entry, commands, timing calibration, and error recovery.Screen Reader NavigationHow blind and low-vision people navigate pages through headings, landmarks, links, controls, labels, states, and announcements instead of visual layout, grounded in W3C WCAG 1.3.1 (Info and Relationships) and WCAG 4.1.2 (Name, Role, Value).Text to Speech ReadingHow people use spoken output to read content effectively, guided by WCAG 3.1.1 (Language of Page) and WCAG 3.1.2 (Language of Parts).Speech to Text DictationHow people dictate text when typing is unavailable, prioritizing WCAG 3.3.1 (Error Identification) and WCAG 3.3.4 (Error Prevention).Voice Control NavigationHow people operate interfaces by speaking commands, emphasizing WCAG 2.5.3 (Label in Name) and WCAG 2.1.1 (Keyboard).Switch Control and ScanningHow people use switches to navigate, supported by WCAG 2.4.3 (Focus Order) and WCAG 2.1.2 (No Keyboard Trap).Keyboard Only AccessHow people complete every interaction without a pointer, addressing WCAG 2.4.7 (Focus Visible) and WCAG 2.4.11 (Focus Not Obscured).Captions and TranscriptsHow users access audio/video via text, mapped to WCAG 1.2.2 (Captions) and WCAG 1.2.3 (Audio Description).Sign Language and Visual Language SupportHow sign-language users benefit from visual support, meeting WCAG 1.2.6 (Sign Language - Prerecorded).Magnification and ZoomHow low-vision users read content via zoom, supported by WCAG 1.4.4 (Resize Text) and WCAG 1.4.10 (Reflow).High Contrast and Color VisionHow people with color blindness, low vision, and contrast needs perceive information, aligned with WCAG 1.4.1 (Use of Color), 1.4.3 (Contrast Minimum), and 1.4.11 (Non-text Contrast).Dyslexia and Reading SupportHow people with dyslexia benefit from typography, supported by WCAG 1.4.12 (Text Spacing) and WCAG 3.1.5 (Reading Level).Cognitive AccessibilityHow users complete tasks with less confusion, supporting WCAG 3.2.1 (On Focus) and WCAG 3.3.4 (Error Prevention).Motor Accessibility and Tremor SupportHow people interact with controls safely, supporting WCAG 2.5.1 (Pointer Gestures) and 2.5.8 (Target Size).Seizure and Motion SafetyHow users stay safe from flashing or harmful motion, supported by WCAG 2.2.2 (Pause, Stop, Hide) and 2.3.1 (Three Flashes).

POUR principles

Tamil DS implements all four WCAG POUR principles — the foundation of web accessibility — as described in WCAG 2.1.

P

Perceivable

உணரக்கூடியது

All UI information and components must be presentable to users in ways they can perceive — including alternative text, captions, and colour contrast.

O

Operable

இயக்கக்கூடியது

UI components and navigation must be operable via keyboard, voice, and switch access — not just a mouse or touch.

U

Understandable

புரிந்துகொள்ளக்கூடியது

Information and UI operation must be understandable — clear language, predictable behaviour, helpful error messages.

R

Robust

வலிமையானது

Content must be interpretable by a wide variety of assistive technologies, including current and future user agents.

Accessibility panel

Every page in Tamil DS ships with a persistent accessibility panel — the floating button in the bottom-left corner. It provides real-time controls for:

  • Text size — 5 levels from Small to XX-Large
  • Line spacing — Compact / Normal / Relaxed
  • Contrast mode — Normal or High Contrast (WCAG AAA targets)
  • Dyslexia-friendly font — Switches body font to Lexend (optimized for reading proficiency)
  • Reduced motion — Disables all Framer Motion animations
  • Hide images — Reduces visual noise for users with cognitive differences
  • Highlight links — Underlines and colour-highlights all hyperlinks
  • Screen reader hints — Toggles additional ARIA live regions
அணுகல் கட்டுப்பாட்டு பெட்டி (Accessibility Sandbox)

சேவை மையம் - அத்தியாவசிய விவரங்கள்

lang="ta"

தமிழ்நாடு அரசின் பொது விநியோகத் திட்ட சேவைகள் மூலம், குடும்ப அட்டைதாரர்கள் அத்தியாவசிய பொருட்களை எளிதாகப் பெறலாம். இந்தச் சேவையில் எந்தவொரு பயனரும் விடுபடாமல் இருக்க, மாற்றுத்திறனாளிகள் மற்றும் முதியோர்களுக்கு முன்னுரிமை வழங்கப்படுகிறது. முக்கிய வழிகாட்டுதல்களை அறிய, கீழே உள்ள அணுகல் வழிகாட்டி (Accessibility Manual) பக்கத்தைக் காணவும்.

முக்கியத் தகவல் (System Alert)

ஒவ்வொரு பொத்தானின் தொடு பரப்பு குறைந்தது 44×44px இருக்க வேண்டும். இதன் மூலம் நடுக்கம் மற்றும் தசைச் சோர்வு உடைய பயனர்கள் தவறான தேர்வுகளைத் தவிர்க்கலாம்.

Component checklist

Every component in Tamil DS is shipped only when it passes all items in this checklist:

Colour contrast

All text/background pairs meet AA (4.5:1) or better

Focus indicators

2px brand ring on all interactive elements, never hidden

Keyboard navigation

All interactions operable via keyboard — Tab, Enter, Space, Escape, Arrow keys

ARIA attributes

Roles, labels, states, and properties on every custom component

Screen reader announcements

Live regions for dynamic updates (toasts, form errors, loading)

Page title (WCAG 2.4.2)

Every page must have a unique, descriptive <title> element

Alt text (WCAG 1.1.1)

Descriptive alt text for informative images, empty alt="" for decorative

Reduced motion

All animations respect prefers-reduced-motion and the panel toggle

Touch targets

Minimum 44×44px hit area on all interactive elements

Text spacing (WCAG 1.4.12)

Layouts must reflow cleanly when users override CSS text spacing

Error identification

Errors identified by text and icon, not colour alone

Language attribute

lang="ta" on Tamil content, lang="en" on English

Skip links

Skip to main content available at top of every page

Testing with screen readers

Tamil DS is tested with the following assistive technology combinations:

  • NVDA + Firefox on Windows — primary test environment
  • VoiceOver + Safari on macOS and iOS
  • TalkBack + Chrome on Android

Tamil script is announced correctly by all three when lang="ta" is present on the element. Always set the language attribute on Tamil text blocks.

Keyboard navigation map

Tab / Shift+Tab

Move focus forward/backward through interactive elements

Enter / Space

Activate buttons, checkboxes, toggles

Arrow keys

Navigate within radio groups, select menus, sliders, tabs

Escape

Close dialogs, sheets, popovers, dropdowns

Home / End

Jump to first/last item in lists, sliders

Page Up / Down

Scroll or paginate within scroll areas

Reporting accessibility issues

If you find an accessibility issue in any Tamil DS component, please open a GitHub issue tagged accessibility. Include the component name, the assistive technology and version, and a description of the expected vs actual behaviour. We treat accessibility bugs as P0 — highest priority.