ui5-best-practices-accessibility について
UI5 アプリ開発者向けに、ビューやコントローラーのアクセシビリティ上の不足を調べるスキルです。8 つの観点で確認し、各問題の影響、理由、最小限の修正例を示します。
主な機能
- 01対象となる UI5 ソースの検出
- 028 つのアクセシビリティ観点の確認
- 03問題の影響とユーザーへの理由を提示
- 04最小限の XML または JS 修正案
- 05影響度別の結果集計
活用シーン
- 01リリース前の UI5 ビューのレビュー
- 02ラベルやキーボード対応の不足検出
- 03アクセシビリティ修正の優先順位付け
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、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 のアクセシビリティは、フレームワークとアプリケーションの 2 つのレベルで組み込まれています。 このレビューは、アプリケーションのアクセシビリティを向上させるために、アプリケーション開発者が明示的に対応する必要がある点を支援します。
ステップ 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 — レビューする
以下の 8 つのトピックに照らしてコードを確認します。問題が見つかったトピックについては、修正を書く前に対応するトピックファイルを読んでください。正しい API パターンと誤った例・正しい例が記載されています。
| # | トピック | 検出する内容 | トピックファイル |
|---|---|---|---|
| 1 | ランドマーク | DynamicPage、Page、Panel、ObjectPage、FlexibleColumnLayout に landmarkInfo または accessibleRole がない、もしくは対応するラベルなしでランドマークロールが設定されている（例：rootLabel のない rootRole） | references/landmark.md |
| 2 | ラベル付け | <Label labelFor> のない入力（SimpleForm 内を除く）；ariaLabelledBy のないテーブル；tooltip のないアイコンのみの Button；alt がなく decorative にも設定されていない単独の Icon；decorative=false で alt のない Image；showHeader:false で ariaLabelledBy のない Dialog | references/labeling.md |
| 3 | 見出しレベル | 明示的な level のない <Title>；ビュー内で見出しレベルが飛んでいる（例：H1 → H3） | references/heading.md |
| 4 | フォーカスとキーボード | 特定の開始要素が必要なのに initialFocus のない Dialog または Popover；個別の論理領域として機能する大きな複合領域で、sap-ui-fastnavgroup の CustomData エントリーが必要なもの；レンダリングされた HTML で 0 より大きい tabindex 値 | references/keyboard.md |
| 5 | キーボードショートカット | キーボードショートカットに対応すべきアクションボタン（保存、削除など）で、CommandExecution がなく、通常の press=".onX" を使用しているもの | references/shortcut.md |
| 6 | 非表示の通知 | ハンドラー内で InvisibleMessage.announce() が呼び出されず、表示のみで通知される動的な状態変化（保存の確認、エラー、フィルター結果など） | references/invisible-message.md |
| 7 | 読み上げ順序 | CSS／レイアウトによって視覚的な順序が変更されているが、XML では順序が異なるコントロール；DOM 内で後に現れる ID を参照する ariaDescribedBy | references/reading-order.md |
| 8 | ターゲットサイズ | インタラクティブなコンテナー内にあり reactiveAreaMode のない Link、ObjectIdentifier、ObjectStatus、ObjectNumber、ObjectMarker、ObjectAttribute；または、間隔が確保されていない他の密集したレイアウト内のもの | references/target-size.md |
ステップ 3 — 報告する
見つかった問題ごとに、次の内容を示します：
問題：1 行で、コントロール名と不足しているプロパティ／関連付けを示す
影響度：critical（支援技術のユーザーが完全に利用できない） | serious（重大な障壁） | moderate（部分的な障壁） | minor（ベストプラクティスだが、直接的な影響は小さい）
理由：ユーザーへの影響を 1 文で説明する
修正：最小限の修正済み XML または JS のスニペット（変更部分のみ）
トピックごとに指摘をまとめ、各グループ内では critical／serious を先に記載します。最後に、影響度ごとの件数をまとめます。
問題が見つからなかった場合は、その旨を伝えます。