mcpField
U
ui5-best-practices-accessibility

ui5-best-practices-accessibility

github.com/ui5设计与 UI44174 次安装1 周前更新
代码仓库

关于 ui5-best-practices-accessibility

面向 UI5 应用开发者的无障碍审查技能,可检查视图和控制器中的问题。它覆盖八个主题,并为每项问题说明影响、原因和最小代码修复。

主要功能

  1. 01发现相关 UI5 源文件
  2. 02审查八类无障碍主题
  3. 03说明问题影响与用户影响
  4. 04提供最小 XML 或 JS 修复
  5. 05按影响级别汇总结果

适用场景

  1. 01发布前审查 UI5 视图
  2. 02查找缺失的标签和键盘支持
  3. 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.md
invisible-message.md
keyboard.md
labeling.md
landmark.md
reading-order.md
shortcut.md
target-size.md
tests/
eval.json
README.md
tests/fixtures/
gap-dialog.controller.js
gap-heading-levels.view.xml
gap-invisible-message.controller.js
gap-keyboard.view.xml
gap-labeling.view.xml
gap-landmarks.view.xml
gap-reading-order.view.xml
gap-shortcut.view.xml
gap-target-size.view.xml
ok-all-correct.view.xml
ok-dialog.controller.js
ok-invisible-message.controller.js
ok-simpleform.view.xml
ok-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 但未设置 ariaLabelledByreferences/labeling.md
3标题级别<Title> 未明确设置 level;视图内标题级别跳跃(例如 H1 → H3)references/heading.md
4焦点和键盘Dialog 或 Popover 在需要指定起始元素时未设置 initialFocus;充当不同逻辑区域、因而需要 sap-ui-fastnavgroup CustomData 条目的大型组合区域;渲染后的 HTML 中 tabindex 值大于 0references/keyboard.md
5键盘快捷键操作按钮(保存、删除等)使用了普通的 press=".onX",本应支持键盘快捷键,却未设置 CommandExecutionreferences/shortcut.md
6不可见消息动态状态变化(保存确认、错误、筛选结果)仅对视觉用户可见,处理程序中未调用 InvisibleMessage.announce()references/invisible-message.md
7阅读顺序控件通过 CSS/布局进行了视觉重排,但在 XML 中顺序不一致;ariaDescribedBy 指向了 DOM 中较后位置出现的 IDreferences/reading-order.md
8目标尺寸Link、ObjectIdentifier、ObjectStatus、ObjectNumber、ObjectMarker、ObjectAttribute 位于交互容器内,但未设置 reactiveAreaMode;或位于其他密集布局中却没有间距references/target-size.md

步骤 3 — 报告

针对发现的每个问题:

问题:用一行说明控件名称和缺失的属性/关联 影响:critical(完全阻碍辅助技术用户)| serious(造成重大障碍)| moderate(造成部分障碍)| minor(最佳实践问题,直接影响较小) 原因:用一句话说明对用户的影响 修复:最精简的修正后 XML 或 JS 片段(仅包含更改部分)

按主题对问题分组,并在每组内将严重和关键问题排在前面。最后按影响级别汇总问题数量。 如果未发现问题,请明确说明。

评论

支持 Markdown