Auditing Data UIs with a Screen Magnifier
Permalink to "Auditing Data UIs with a Screen Magnifier"Screen magnifier users see a small part of the screen at a time, typically 2 to 16 times enlarged. Data UIs are hard for them in particular ways: a toast appears in the bottom right corner while they are working top left; a validation error shows at the top of a form while they edit a cell at the bottom; a wide table’s row identifier is three viewport widths away from the value they are reading; a tooltip opens off the edge of the magnified view. A magnifier audit finds these problems, which automated tools and screen reader tests miss.
This guide belongs to manual accessibility audits.
Spec reference
Permalink to "Spec reference"- SC 1.4.4 Resize Text (AA) and 1.4.10 Reflow (AA) — related to browser zoom; magnifiers enlarge without reflow, so additional issues appear.
- SC 3.3.1 Error Identification (A) — errors must be perceivable; near the field helps magnifier users.
- SC 1.4.13 Content on Hover or Focus (AA) — hoverable, persistent tooltips matter at high magnification.
- SC 2.4.7 (AA) — focus tracking depends on a visible, programmatically exposed focus.
When to use — and when not to
Permalink to "When to use — and when not to"Run a magnifier audit on key data workflows during each major release, and include magnifier users in usability testing.
Do not substitute browser zoom for a magnifier; browser zoom reflows content, a magnifier does not. The misapplication: testing at 400% browser zoom and assuming magnifier users have the same experience.
Annotated code example
Permalink to "Annotated code example"<!-- Errors next to the cell, not only in a top banner -->
<td>
<input aria-label="Amount for INV-1042" aria-invalid="true" aria-describedby="e-1042">
<span id="e-1042" class="cell-error">Enter an amount above 0</span> <!-- near focus -->
</td>
/* Toasts near the triggering control when possible, or at a consistent, documented position */
.toast-anchor { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; }
/* Tooltips flip to stay inside the viewport */
.tooltip[data-flip="true"] { inset-inline-end: 0; inset-inline-start: auto; }
Keyboard & AT behaviour
Permalink to "Keyboard & AT behaviour"| Magnifier feature | What to check |
|---|---|
| Focus tracking | View follows keyboard focus in grids (roving tabindex and active descendant) |
| Caret tracking | View follows text cursor in cell editors |
| Pointer tracking | Tooltips appear near the pointer |
| Smoothing and colour filters | Text and focus indicators remain readable |
| Speech (ZoomText) | Reads focused content; overlaps with screen reader checks |
Step-by-step implementation
Permalink to "Step-by-step implementation"- Set up. Windows Magnifier (Win+Plus), macOS Zoom (Option+Command+8) or ZoomText; set 200% and 400%; turn on focus and caret tracking.
- Pick tasks. Filter a table, edit a cell, sort, run a bulk action, read a chart tooltip, respond to an error.
- Work through tasks. Use keyboard and mouse; note every time you must pan to find feedback.
- Check tracking. Confirm the view follows focus in custom grids; if not, the grid may not move real focus (active descendant without scrolling).
- Report. Include magnification level, screen region and what was missed.
Integration context
Permalink to "Integration context"Zoom testing is covered in zoom and reflow testing at 400 percent. Toast placement follows notifications and toasts for data operations, and tooltips tooltips, popovers and overlays in data UIs. Keyboard audits pair well with this one: keyboard-only audit script for data grids. Bug reporting is in writing actionable accessibility bug reports.
Gotchas
Permalink to "Gotchas"aria-activedescendant and tracking. Magnifiers track the focused element; with active descendant, the DOM focus stays on the container, so the view may not follow. Scroll the active cell into view, and test.
Animations. Moving content at high magnification is disorienting; respect reduced motion.
Colour inversion. Many magnifier users invert colours; check charts and status colours under inversion.
Edge cases
Permalink to "Edge cases"- Multi-monitor setups. Magnifier users sometimes use a second monitor for a full view; do not assume.
- Small text in charts. Axis labels at 10 px become blurry when magnified; use larger minimums.
- Hover-dependent UI. Hover reveals are hard to discover at high magnification; ensure focus reveals too.
Worked example
Permalink to "Worked example"A magnifier audit of a claims processing grid at 400% found that validation errors appeared only in a banner at the top of the page, toasts appeared bottom right, and the grid used active descendant without scrolling the active cell, so ZoomText’s view stayed on the grid’s top-left corner. The team added inline errors, moved toasts near the triggering control, scrolled active cells into view and increased chart label sizes. A magnifier user completed the claim review task without panning to hunt for feedback.
Common mistakes
Permalink to "Common mistakes"- Treating browser zoom as magnifier testing.
- Feedback far from focus.
- Active descendant without scrolling.
- Tiny chart labels.
Testing checklist
Permalink to "Testing checklist"Testing it with a screen reader
Permalink to "Testing it with a screen reader"ZoomText Fusion and similar products combine magnification and speech, so many magnifier users also hear content. During the audit, turn on the magnifier’s speech or run NVDA alongside Windows Magnifier and confirm that what is spoken matches what is visible in the magnified view. Mismatches — speech about a toast the user cannot see — point to feedback placement problems.
Recruiting magnifier users
Permalink to "Recruiting magnifier users"Magnifier users are underrepresented in many usability panels, which are often recruited through screen reader communities. Reach out through low-vision organisations and include magnification software in the screening questions. Ask participants which product, magnification level and colour settings they use, and let them bring their own setup when possible. Observing a real user’s workflow at 8× magnification reveals problems no checklist predicts.
Charts under magnification
Permalink to "Charts under magnification"Charts reveal their own magnifier problems: thin lines that break up when enlarged, axis labels too small to read even at 4×, legends far from the series they describe and tooltips that open on the far side of the chart. During the audit, read a value from each chart type using only the magnified view, and note every time you had to pan to the legend. Direct labels and a data table close to the chart reduce panning.
Key points
Permalink to "Key points"- Magnifiers enlarge without reflow; test with a real magnifier, not browser zoom.
- Keep feedback — errors, confirmations, toasts — near the focused element.
- Make sure custom grids move real focus or scroll the active cell so tracking works.
- Report findings with magnification level and screen region.
Design system notes
Permalink to "Design system notes"Define placement rules for feedback (near the triggering control) in the design system, and test components with magnifiers as part of release checks.
FAQ
Permalink to "FAQ"Which magnifier should I use?
Windows Magnifier and macOS Zoom are free; ZoomText is common in workplaces.
What magnification levels?
At least 200% and 400%; users go much higher.
Is browser zoom testing enough?
No; it tests reflow, not magnification.
How do I make toasts magnifier-friendly?
Place them near the triggering control or keep a persistent log.
Does colour inversion matter?
Yes, many magnifier users use it.
Should magnifier users be in usability tests?
Yes; they find issues others miss.
Related
Permalink to "Related"- Zoom and reflow testing at 400 percent — browser zoom
- Voice control testing for data grids — another input method
- Keyboard-only audit script for data grids — keyboard audits