SuperAPI AI 工具集

accordion-accessibility

前端与建站

查看项目

更新于 10-16 08:11

技能介绍

用途:本规则属于前端检查清单,用于让折叠面板(accordion)支持键盘导航。实现不当的折叠面板会把键盘用户困住,并让屏幕阅读器用户无法理解或浏览折叠内容。

主要能力:检查与修复折叠面板的无障碍标记与交互,覆盖触发器元素、展开状态、面板关联和键盘导航。

要点:使用 button 元素作为折叠面板触发器,并带有 aria-expanded;用 aria-controls 把面板与触发器关联;支持方向键在标题之间移动;为文档结构恰当使用标题元素。检查项要求验证折叠面板是否使用带 aria-expanded、aria-controls 的 button 触发器,以及正确键盘导航(Enter、Space、方向键)。修复方式是使用 button 元素、aria-expanded 状态、aria-controls 链接内容面板并支持键盘。

使用方式:在代码审查时,对模板、服务端渲染 HTML 和共享组件中输出相关标记的地方进行审查,指出渲染后 HTML 违反规则的具体元素、属性和路由。应校验最终面向浏览器的标记,而非仅看源码。完整实现细节、代码示例和框架相关指导见 references/rule.md;规则页面为 https://frontendchecklist.io/rules/html/accordion-accessibility。

适用场景:无障碍审查、组件库与模板质量检查、服务端渲染页面验收。

限制:资料未提供具体框架实现示例、浏览器兼容范围、自动化检测工具、收费或平台信息,这些暂未提供。