Command Palette

Search for a command to run...

Accessibility use case

Dyslexia and Reading Support

Dyslexia Support access guidance for Tamil DS

How people with dyslexia benefit from typography, supported by WCAG 1.4.12 (Text Spacing) and WCAG 3.1.5 (Reading Level).

Detailed guidance for real users, assistive technology, component behavior, testing, and release checks.

Who this supports

Dyslexic users, users with reading fatigue, multilingual learners, children, older adults, and people reading under stress.

Assistive technology

Dyslexia-friendly fontsText spacing controlsRead aloudLine focus toolsReader mode

Primary risk

Dense text, weak hierarchy, moving content, and unclear labels make reading slower and error-prone.

Real user scenario

A learner reads a design-system page about forms. They increase text size, use relaxed spacing, listen to a paragraph, and scan headings before reading details. If the page has cramped paragraphs and decorative wording, they lose the concept.

How people use this access method

1

Some users need more spacing between lines, paragraphs, and sections.

2

Consistent layout helps users predict where information will appear.

3

Read-aloud can support comprehension when visual reading is tiring.

4

Plain language reduces decoding effort.

5

Motion and layout shifts can interrupt reading focus.

Design requirements

These requirements are product requirements, not optional polish. If a Tamil DS component or page breaks one of these rules, users may be blocked even when the visual interface looks finished.

Use clear headings and short paragraphs to lower cognitive load (WCAG 3.1.5 Reading Level).

Ensure the interface does not break when users apply custom text spacing (WCAG 1.4.12 Text Spacing).

Avoid justified text and cramped line height.

Keep line length comfortable.

Use plain language and concrete examples.

Avoid unnecessary animation near reading content.

Support dyslexia-friendly font preferences where available.

Keep labels and helper text close to fields.

Use lists for steps, requirements, and choices.

Accessible code implementation

Use this correct, semantic React/HTML/CSS implementation pattern as a template when building or styling components for this specific access method:

// React component enforcing reading-friendly layout for Dyslexic readers
import React from "react";

export function DyslexiaReaderCard({ title, titleTa, children }) {
  return (
    <div className="rounded-md border border-border bg-card p-6 md:p-8 space-y-4 max-w-xl">
      {/* Generous spacing and font class fallbacks */}
      <h3 className="text-xl font-bold leading-normal tracking-wide text-foreground font-lexend">
        {title}
        {titleTa && <span className="block mt-1 text-sm font-tamil text-muted-foreground font-normal leading-relaxed" lang="ta">{titleTa}</span>}
      </h3>
      
      {/* 1.6x line-height and letter-spacing for increased decoding clarity */}
      <div className="text-sm text-muted-foreground font-lexend leading-[1.75] tracking-wide space-y-4">
        {children}
      </div>
    </div>
  );
}
Technical breakdown: Readers with dyslexia benefit heavily from typography configurations that increase character legibility: generous line spacing (at least 1.5x or 1.75x), letters spacing (at least 0.12em), and optimized fonts like Lexend. This React component utilizes the font-lexend CSS class to enforce readable font metrics and locks line-height and word spacing to relaxed values.

Component behavior implications

Accessibility becomes real at component level. The same page may pass content review but fail when dialogs, forms, menus, cards, or status messages do not expose the right behavior.

Accordion content should not hide essential instructions.

Forms need examples and clear error recovery.

Cards should have strong titles and concise summaries.

Tabs should not reset reading position unexpectedly.

Tooltips should not contain core instructions.

Long pages need table of contents or clear section starts.

Testing script

Run this script before release. Automated checks are useful, but they do not replace trying the actual access method and completing a real task from start to finish.

Read the page at normal and large text settings.

Enable relaxed spacing in the accessibility panel.

Scan only headings and confirm the topic is still understandable.

Listen with text-to-speech.

Check whether paragraphs are too long.

Review labels and errors for plain language.

Disable motion or use reduced-motion settings.

Common failures and fixes

Failure

Long dense paragraphs hide the action

Break content into headings, short paragraphs, examples, and lists.

Failure

Helper text appears far from the field

Place guidance directly below the relevant label or input.

Failure

Animation distracts from reading

Respect reduced motion and keep content areas stable.

Failure

Error message uses technical wording

State what happened and how to fix it in plain language.

Tamil public-service context

Tamil DS must work for Tamil-first, English-first, and bilingual users across phones, desktops, kiosks, classrooms, offices, and public-service counters. These notes keep the guidance connected to local product reality.

Tamil paragraphs can become visually dense; use generous line-height and section breaks.

Bilingual pages should avoid switching language too often inside a single instruction.

Plain Tamil examples help users understand official or technical concepts faster.

Release checklist

Text is scannable.

Line length and spacing are comfortable.

Plain language is used.

Motion does not interrupt reading.

Reading controls are respected.