关于 ui5-best-practices-accessibility
面向 UI5 应用开发者的无障碍审查技能,可检查视图和控制器中的问题。它覆盖八个主题,并为每项问题说明影响、原因和最小代码修复。
主要功能
- 01发现相关 UI5 源文件
- 02审查八类无障碍主题
- 03说明问题影响与用户影响
- 04提供最小 XML 或 JS 修复
- 05按影响级别汇总结果
适用场景
- 01发布前审查 UI5 视图
- 02查找缺失的标签和键盘支持
- 03确定无障碍修复优先级
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ ui5/ plugins-coding-agents --skill ui5-best-practices-accessibility安装后在 Claude Code 中输入/ui5-best-practices-accessibility确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/heading.mdinvisible-message.mdkeyboard.mdlabeling.mdlandmark.mdreading-order.mdshortcut.mdtarget-size.mdtests/eval.jsonREADME.mdtests/fixtures/gap-dialog.controller.jsgap-heading-levels.view.xmlgap-invisible-message.controller.jsgap-keyboard.view.xmlgap-labeling.view.xmlgap-landmarks.view.xmlgap-reading-order.view.xmlgap-shortcut.view.xmlgap-target-size.view.xmlok-all-correct.view.xmlok-dialog.controller.jsok-invisible-message.controller.jsok-simpleform.view.xmlok-target-size.view.xml详细介绍
无障碍审查
UI5 在两个层面融入了无障碍功能:框架和应用。 本审查旨在帮助应用开发者了解仍需明确提供哪些内容, 以提升应用的无障碍体验。
步骤 1 — 查找文件
如果 $ARGUMENTS 列出了特定文件,则仅审查这些文件。
否则,自动发现所有应用源文件:
find . \( -name "*.view.xml" -o -name "*.fragment.xml" -o -name "*.controller.js" \) \
-not -path "*/node_modules/*" \
-not -path "*/dist/*" \
-not -path "*/test/*" \
-not -path "*/resources/*" \
| sort
如果找到的文件超过 15 个,请使用 AskUserQuestion 让用户选择:
- 审查所有内容(可能需要一些时间)
- 聚焦于特定文件夹或区域
读取范围内的每个文件。
步骤 2 — 审查
根据以下八个主题检查代码。对于发现问题的每个主题, 在编写修复方案之前,先阅读对应的主题文件——其中包含正确的 API 用法模式以及错误和正确示例。
| # | 主题 | 检查内容 | 主题文件 |
|---|---|---|---|
| 1 | 地标 | DynamicPage、Page、Panel、ObjectPage、FlexibleColumnLayout 缺少 landmarkInfo 或 accessibleRole;设置了地标角色但未设置对应的标签(例如,设置了 rootRole,却没有 rootLabel) | references/landmark.md |
| 2 | 标签 | 输入控件未设置 <Label labelFor>(位于 SimpleForm 内的除外);表格未设置 ariaLabelledBy;仅含图标的 Button 未设置 tooltip;独立的 Icon 未设置 alt 且未标记为 decorative;Image 设置了 decorative=false 但未设置 alt;Dialog 设置了 showHeader:false 但未设置 ariaLabelledBy | references/labeling.md |
| 3 | 标题级别 | <Title> 未明确设置 level;视图内标题级别跳跃(例如 H1 → H3) | references/heading.md |
| 4 | 焦点和键盘 | Dialog 或 Popover 在需要指定起始元素时未设置 initialFocus;充当不同逻辑区域、因而需要 sap-ui-fastnavgroup CustomData 条目的大型组合区域;渲染后的 HTML 中 tabindex 值大于 0 | references/keyboard.md |
| 5 | 键盘快捷键 | 操作按钮(保存、删除等)使用了普通的 press=".onX",本应支持键盘快捷键,却未设置 CommandExecution | references/shortcut.md |
| 6 | 不可见消息 | 动态状态变化(保存确认、错误、筛选结果)仅对视觉用户可见,处理程序中未调用 InvisibleMessage.announce() | references/invisible-message.md |
| 7 | 阅读顺序 | 控件通过 CSS/布局进行了视觉重排,但在 XML 中顺序不一致;ariaDescribedBy 指向了 DOM 中较后位置出现的 ID | references/reading-order.md |
| 8 | 目标尺寸 | Link、ObjectIdentifier、ObjectStatus、ObjectNumber、ObjectMarker、ObjectAttribute 位于交互容器内,但未设置 reactiveAreaMode;或位于其他密集布局中却没有间距 | references/target-size.md |
步骤 3 — 报告
针对发现的每个问题:
问题:用一行说明控件名称和缺失的属性/关联
影响:critical(完全阻碍辅助技术用户)| serious(造成重大障碍)| moderate(造成部分障碍)| minor(最佳实践问题,直接影响较小)
原因:用一句话说明对用户的影响
修复:最精简的修正后 XML 或 JS 片段(仅包含更改部分)
按主题对问题分组,并在每组内将严重和关键问题排在前面。最后按影响级别汇总问题数量。 如果未发现问题,请明确说明。
评论
支持 Markdown