SuperAPI AI 工具集

text-resizing

前端与建站

查看项目

更新于 10-16 06:08

技能介绍

用途

该技能用于在代码审查或设计系统评审中,检查页面与组件是否支持将文本放大至 200%。其目标是保障低视力用户的可访问性:这类用户依赖浏览器设置放大文字,如果布局在 200% 缩放时错乱,或文字在固定容器中被裁剪,他们就无法阅读内容。

主要能力

  • 提供快速参考要点:使用 rem/em 单位设置字号而非固定 px;避免会裁剪文字的固定高度容器;确保容器随文字增大而扩展;在 200% 缩放下测试所有内容仍可见。
  • 提供检查项:将文字放大至 200%(使用浏览器仅文字缩放设置),验证无内容被裁剪、截断或重叠,确认所有功能仍可访问,文字容器适当扩展。
  • 提供修复建议:改用相对单位(rem、em)设置字号,确保容器可随文字内容增长,避免固定高度容器裁剪溢出文字,并使用浏览器文字大小偏好进行测试。
  • 提供解释:说明低视力用户如何通过浏览器设置调整文字大小,以及为何固定像素尺寸或裁剪容器会阻止用户以偏好的阅读尺寸访问内容。
  • 提供代码审查指导:审查影响该规则的已渲染标记与交互状态,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何用浏览器无障碍工具或辅助技术验证修复。

使用方式

该技能以规则形式提供,包含快速参考、检查、修复、解释与代码审查几个部分。完整实现细节、代码示例与框架特定指南见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/accessibility/text-resizing。

适用场景

适用于前端代码审查、设计系统模式评审、无障碍审计,以及任何需要验证文本在 200% 放大下仍可读、可用的场景。

限制

该技能聚焦于文本放大至 200% 的可访问性规则,不涉及其他无障碍或性能议题。具体实现细节与框架特定指导需查阅 references/rule.md,本介绍未提供这些内容。