SuperAPI AI 工具集

decorative-elements

前端与建站

查看项目

更新于 10-16 05:45

技能介绍

用途:本规则属于前端无障碍审查项,目标是把纯装饰性的图片、图标和视觉分隔元素从辅助技术(屏幕阅读器)中隐藏,避免它们被逐条朗读为无意义的“图像、装饰边框、图像、项目符号”,减少噪声干扰。

主要能力与检查方式:审查已渲染的 HTML 与交互状态,确认装饰性图片使用空 alt(alt='',而非 alt='image' 或缺失 alt);装饰性 SVG 和图标字体添加 aria-hidden='true';纯装饰视觉使用 CSS background-image;需要移除语义时可用 role='presentation'。只有代码显示具体问题(如真实布局不稳定)才报告为无障碍或性能失败,不应仅凭装饰性微资源就自动提出性能发现。例如 <img src="/divider.svg" alt="" aria-hidden="true"> 通常是无害的装饰性用法,本身不构成问题。

修复方式:为装饰性 img 添加 alt='';为装饰性 SVG 和图标字体添加 aria-hidden='true';纯装饰视觉改用 CSS background-image 而非 img 元素。

适用场景:检查渲染后的标记与交互状态,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何用浏览器无障碍工具或辅助技术验证修复。详细实现、代码示例与框架特定指引见 references/rule.md,规则页为 https://frontendchecklist.io/en/rules/accessibility/decorative-elements。

限制:资料未提供具体框架实现细节、版本要求或性能基准,暂未提供。