Command Palette

Search for a command to run...

Accessibility use case

Magnification and Zoom

Magnification access guidance for Tamil DS

How low-vision users read content via zoom, supported by WCAG 1.4.4 (Resize Text) and WCAG 1.4.10 (Reflow).

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

Who this supports

Low-vision users, older adults, users on small screens, users outdoors in glare, and people who need larger text temporarily.

Assistive technology

Browser zoomOS magnifieriOS ZoomAndroid MagnificationLarge text settings

Primary risk

Fixed layouts, clipped text, horizontal overflow, and hidden controls make zoomed interfaces unusable.

Reflow Scale Simulator

Zoom level: 100%
Fluid Card 1

Notice how columns collapse cleanly as width scales relative to the viewport.

Fluid Card 2

No sideways scrolling! Text reflows into a single readable column.

Real user scenario

An older adult opens a pension status page at 200% zoom. They need labels, values, buttons, and navigation to reflow into a single readable column. If the card grid stays four columns wide, content disappears off-screen.

How people use this access method

1

The person enlarges the page with browser zoom, system magnification, text size settings, or all three.

2

Only part of the screen may be visible at once, so context and labels must stay close to values.

3

Horizontal scrolling creates a heavy burden because the user must pan repeatedly.

4

Sticky headers and floating panels can cover content when zoomed.

5

Responsive reflow is the main accessibility behavior, not a cosmetic mobile concern.

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.

Ensure text can be resized up to 200% without loss of content or function (WCAG 1.4.4 Resize text).

Ensure layout reflows into a single column at 400% zoom (320px width) to prevent two-dimensional scrolling (WCAG 1.4.10 Reflow).

Do not disable pinch-to-zoom on mobile.

Keep sticky headers small so they do not consume the zoomed viewport.

Ensure tooltips and dropdowns stay on screen when text is enlarged.

Use responsive typography that scales with user preferences.

Provide alternative access to dense tables that cannot be zoomed easily.

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:

/* Flexbox Wrap and Relative REM Sizing for Zoom Reflow */
.zoom-reflow-grid {
  display: flex;
  flex-wrap: wrap; /* Collapses columns vertically on zoom */
  gap: 1.25rem; /* Scales relative to document font size */
  width: 100%;
}

.zoom-reflow-card {
  flex: 1 1 280px; /* Minimum width anchor before wrapping */
  min-height: 12rem;
  padding: 1.5rem;
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

/* Fluid Responsive Typography */
.zoom-fluid-text {
  font-size: clamp(0.875rem, 1vw + 0.75rem, 1.25rem);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .zoom-reflow-card {
    transition: none !important;
  }
}
Technical breakdown: To meet WCAG 2.1 Success Criterion 1.4.10 (Reflow), text must reflow without requiring horizontal scrolling at 400% zoom (equivalent to a responsive width of 320px). Using fluid relative CSS units (rem, em, clamp()) and avoiding fixed absolute widths/heights (px) allows elements to collapse cleanly into a single vertical column, preserving full reading flow.

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.

Cards must grow with content instead of clipping summaries.

Tables need responsive alternatives or carefully managed horizontal scrolling.

Toolbars should wrap instead of shrinking text below recognition.

Dialogs should fit within small viewport height and allow internal scrolling only where necessary.

Navigation should remain reachable without covering page content.

Badges should not force important text into one line.

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.

Test every page at 200% browser zoom.

Test a narrow viewport at 400% zoom for reflow.

Check for clipped buttons, hidden text, and horizontal page scroll.

Check sticky headers, sidebars, and floating accessibility controls.

Use long Tamil and English sample labels.

Navigate with keyboard while zoomed.

Confirm no content is available only through hover.

Common failures and fixes

Failure

Text clips inside fixed-height cards

Remove fixed height or use responsive min-height with natural content flow.

Failure

Toolbar buttons shrink until labels are unreadable

Allow wrapping, icon-only with tooltips where appropriate, or a menu for overflow.

Failure

Sticky sidebar covers content on short viewports

Limit sticky panel height and allow interior scroll only inside the panel.

Failure

Horizontal scrolling appears on the page

Fix the child layout with min-w-0, wrapping, and responsive grid tracks.

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 text often needs more vertical space, so line-height and wrapping are essential.

Outdoor use in bright sunlight makes contrast and larger text important for public-service products.

Older users may combine browser zoom with the Tamil DS accessibility panel text-size control.

Release checklist

Pages work at 200% zoom.

Content reflows at 400% zoom.

No important text clips.

Sticky UI does not cover content.

Keyboard navigation remains visible while zoomed.