mcpField
U
ui5-best-practices-accessibility

ui5-best-practices-accessibility

github.com/ui5Design & UI44174 installsUpdated 1w ago
Repository

About ui5-best-practices-accessibility

A review skill for UI5 application developers that checks views and controllers for accessibility gaps. It covers eight areas and reports each issue with impact, rationale, and a minimal code fix.

Key features

  1. 01Discovers relevant UI5 source files
  2. 02Reviews eight accessibility topics
  3. 03Provides impact and user rationale
  4. 04Suggests minimal XML or JS fixes
  5. 05Summarizes findings by impact

Use cases

  1. 01Reviewing UI5 views before release
  2. 02Finding missing labels and keyboard support
  3. 03Prioritizing accessibility fixes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ui5/plugins-coding-agents --skill ui5-best-practices-accessibility

After installing, type/ui5-best-practices-accessibilityin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

Accessibility Review

Accessibility in UI5 is incorporated in two levels: framework and application. This review supports what application developers must still provide explicitly to improve the accessibility of their application.

Step 1 — Find the files

If $ARGUMENTS lists specific files, review only those.

Otherwise, discover all app source files automatically:

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

If more than 15 files are found, use AskUserQuestion to let the user choose:

  • Review everything (may take a moment)
  • Focus on a specific folder or area

Read each file in scope.

Step 2 — Review

Check the code against the eight topics below. For each topic where you find a gap, read the corresponding topic file before writing the fix — it contains the correct API pattern and wrong/correct examples.

#TopicWhat to detectTopic file
1LandmarksDynamicPage, Page, Panel, ObjectPage, FlexibleColumnLayout missing landmarkInfo or accessibleRole; landmark role set without its corresponding label (e.g. rootRole without rootLabel)references/landmark.md
2LabelingInputs without <Label labelFor> (except inside SimpleForm); Tables without ariaLabelledBy; icon-only Button without tooltip; standalone Icon without alt and not marked decorative; Image with decorative=false and no alt; Dialog with showHeader:false and no ariaLabelledByreferences/labeling.md
3Heading levels<Title> without explicit level; heading level jumps (e.g. H1 → H3) within a viewreferences/heading.md
4Focus & keyboardDialog or Popover without initialFocus when a specific starting element is required; larger composite areas that act as distinct logical regions and need a sap-ui-fastnavgroup CustomData entry; tabindex values greater than 0 in rendered HTMLreferences/keyboard.md
5Keyboard shortcutsAction buttons (save, delete, etc.) using plain press=".onX" that should support keyboard shortcuts but have no CommandExecutionreferences/shortcut.md
6Invisible messagingDynamic state changes (save confirmations, errors, filter results) that are visible-only with no InvisibleMessage.announce() call in the handlerreferences/invisible-message.md
7Reading orderControls visually reordered via CSS/layout but out of sequence in XML; ariaDescribedBy pointing to IDs that appear later in the DOMreferences/reading-order.md
8Target sizeLink, ObjectIdentifier, ObjectStatus, ObjectNumber, ObjectMarker, ObjectAttribute inside an interactive container without reactiveAreaMode; or in other dense layout without spacingreferences/target-size.md

Step 3 — Report

For each gap found:

Issue: one line — names the control and the missing property/association Impact: critical (blocks AT users entirely) | serious (significant barrier) | moderate (partial barrier) | minor (best practice, low direct impact) Why: one sentence on user impact Fix: minimal corrected XML or JS snippet (only the changed part)

Group findings by topic, critical/serious first within each group. End with a summary count by impact level. If no gaps are found, say so.

Comments

Markdown supported