From ui5
Audits and fixes accessibility (a11y) in UI5 views, fragments, and controllers. Covers ARIA, WCAG, landmarks, labeling, headings, focus, keyboard navigation, screen readers.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui5:ui5-best-practices-accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Accessibility in UI5 is incorporated in two levels: framework and application.
references/heading.mdreferences/invisible-message.mdreferences/keyboard.mdreferences/labeling.mdreferences/landmark.mdreferences/reading-order.mdreferences/shortcut.mdreferences/target-size.mdtests/README.mdtests/eval.jsontests/fixtures/gap-dialog.controller.jstests/fixtures/gap-heading-levels.view.xmltests/fixtures/gap-invisible-message.controller.jstests/fixtures/gap-keyboard.view.xmltests/fixtures/gap-labeling.view.xmltests/fixtures/gap-landmarks.view.xmltests/fixtures/gap-reading-order.view.xmltests/fixtures/gap-shortcut.view.xmltests/fixtures/gap-target-size.view.xmltests/fixtures/ok-all-correct.view.xmlAccessibility 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.
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:
Read each file in scope.
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.
| # | Topic | What to detect | Topic file |
|---|---|---|---|
| 1 | Landmarks | DynamicPage, Page, Panel, ObjectPage, FlexibleColumnLayout missing landmarkInfo or accessibleRole; landmark role set without its corresponding label (e.g. rootRole without rootLabel) | references/landmark.md |
| 2 | Labeling | Inputs 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 ariaLabelledBy | references/labeling.md |
| 3 | Heading levels | <Title> without explicit level; heading level jumps (e.g. H1 → H3) within a view | references/heading.md |
| 4 | Focus & keyboard | Dialog 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 HTML | references/keyboard.md |
| 5 | Keyboard shortcuts | Action buttons (save, delete, etc.) using plain press=".onX" that should support keyboard shortcuts but have no CommandExecution | references/shortcut.md |
| 6 | Invisible messaging | Dynamic state changes (save confirmations, errors, filter results) that are visible-only with no InvisibleMessage.announce() call in the handler | references/invisible-message.md |
| 7 | Reading order | Controls visually reordered via CSS/layout but out of sequence in XML; ariaDescribedBy pointing to IDs that appear later in the DOM | references/reading-order.md |
| 8 | Target size | Link, ObjectIdentifier, ObjectStatus, ObjectNumber, ObjectMarker, ObjectAttribute inside an interactive container without reactiveAreaMode; or in other dense layout without spacing | references/target-size.md |
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.
claude plugin install ui5@claude-plugins-officialAudits specific design system components for WCAG 2.1 AA accessibility across keyboard navigation, screen readers, color contrast, focus management, and ARIA. Provides PASS/FAIL/WARN with remediation guidance.
Reviews frontend UI for WCAG 2.2 AA compliance: semantic structure, keyboard navigation, ARIA, screen reader behavior, focus management, contrast, and touch accessibility. Outputs a structured report.
Runs a Maestro-style accessibility audit covering WCAG compliance, ARIA usage, keyboard navigation, focus management, color contrast, and screen reader compatibility.