SAP-samples

Ui5con 2026 A11y Hands On — Development skill for Claude Code

Development community

A hands-on workshop repo that teaches UI5 developers how to fix real accessibility issues in a small UI5 (TypeScript) app — first by hand, then at scale with a Claude Code skill.

How to install Ui5con 2026 A11y Hands On

This entry records only its repository, not the path inside it, so there is no exact command to give. Open SAP-samples/ui5con-2026-a11y-hands-on and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Ui5con 2026 A11y Hands On does

A hands-on workshop repo that teaches UI5 developers how to fix real accessibility issues in a small UI5 (TypeScript) app — first by hand, then at scale with a Claude Code skill.

Alternatives in Development

Example Plugin — Reference implementation for plugin developers 14k ★
Claude On Rails — A development framework for Ruby on Rails developers using Claude Code, inspired by SuperClaude 779 ★
AgentHandover — What if OpenClaw, Claude Code, Codex etc. knew how to do your work without you saying it 600 ★

README

![OpenUI5 logo](http://openui5.org/images/OpenUI5_new_big_side.png)

Fixing Accessibility Issues in UI5 Apps

**UI5con 2026 Hands-on Workshop:** Identify and fix accessibility (a11y) issues in a UI5 application — a series of guided hand-fixes covering the most common defects you'll see in real UI5 apps.

[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5con-2026-a11y-hands-on)](https://api.reuse.software/info/github.com/SAP-samples/ui5con-2026-a11y-hands-on)

Requirements

Node.js ^20.17.0 or >=22.9.0, and npm >=8 — to run the UI5 dev server
Git — to clone this repository
A modern browser (Chrome, Edge, or Firefox) with the axe DevTools and HeadingsMap extensions installed
Claude Code CLI or a claude.ai account — for Exercise 6

Full step-by-step setup instructions (with install commands and verification steps) are in [hands-on-lectures/prerequisites.md](hands-on-lectures/prerequisites.md).

Description

This repository contains the demo project for the **Accessibility Hands-On** at [UI5con 2026](https://openui5.org/ui5con/). You will work with a small UI5 application that contains several intentional accessibility issues — broken heading hierarchy, missing image alt text, unlabelled form controls, missing dialog labels, missing page landmarks, and more — and fix them step by step.

The workshop is **research-driven**: each exercise shows you the defect (with axe DevTools, HeadingsMap, or a screen reader) and points you at the UI5 docs and WCAG criteria you need to work out the fix. We'll debrief the fixes together — you get more out of *finding* the right property than out of copy-pasting one.

[!IMPORTANT] This project **intentionally contains accessibility issues** for educational purposes. Attendees will identify and fix these issues step-by-step during the workshop.