Support text resizing to 200%

SkillMedia

Text resizing is a skill for AI agents that reviews rendered HTML, interactive components, and design-system patterns for support of text resizing to 200%. It guides the agent to check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output, so pages and UI code stay usable when users enlarge text to twice its size.

Available today. Use it from your connected AI after setup.

Have an AI agent that can load skills.

Then ask your AI: use the Support text resizing to 200% skill

What your AI can do with it

  • Reviews rendered HTML for behavior when text is enlarged to 200%
  • Checks interactive components and design-system patterns for resize support
  • Inspects native semantics before other checks
  • Examines keyboard behavior and focus flow
  • Verifies accessible names and screen-reader output where relevant

Getting started

  1. Have an AI agent that can load skills.
  2. Add the text-resizing skill to the agent's available skills.
  3. Ask the agent to review a rendered page, component, or design-system pattern for 200% text resizing.
  4. The agent will check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output.

What this skill tells your AI

The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/text-resizing/SKILL.md and read by ahel’s review.

Users with low vision need larger text—if your layout breaks at 200% zoom or clips text in fixed containers, they can't read your content.

Quick Reference

  • Use rem/em units for font sizes instead of fixed px
  • Avoid fixed-height containers that clip text
  • Ensure containers grow when text size increases
  • Test at 200% zoom—all content should remain visible

Check

Resize text to 200% using browser text-only zoom settings and verify no content is clipped, truncated, or overlaps. Confirm all functionality remains accessible and text containers expand appropriately.

Fix

Use relative units (rem, em) for font sizes instead of fixed pixels. Ensure containers can grow with text content. Avoid fixed-height containers that clip overflowing text. Test with browser text-size preferences.

Explain

Explain how users with low vision adjust text size through browser settings, and why fixed pixel sizes or clipping containers prevent users from accessing content at their preferred reading size.

Code Review

Review the rendered markup and interactive states that affect Support text resizing to 200%. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/text-resizing

Signals

GitHub stars
74k
Forks
7k
Last commit
Aug 2026

Questions

When should this skill be used?
Use it when reviewing rendered HTML, interactive components, or design-system patterns related to support for text resizing to 200%.
What does the agent check first?
Native semantics come first. After that, the agent inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Does it work on any UI framework?
The skill reviews rendered HTML, interactive components, and design-system patterns; the item does not list specific frameworks.
Advanced
Item type
skill
Key
text-resizing
Source
github.com/thedaviddias/front-end-checklist