Accessibility pass

A step of the Cloud application tree on Gradus, in the Frontend area: Second app, UI, browser tests.

Keyboard, contrast, names and a screen reader through the whole journey, with automated checks in CI to keep it that way.

Usually comes after: Design tokens & components.

Prompt for your AI assistant

Read the screens of the first journey and the landing page if there is one. Add an automated accessibility check such as axe to the browser tests or CI and fix what it finds. Then check by hand what tools miss: lang on every page and one h1 per page, a skip to content link, accessible names that start with the visible text, links in body text told apart by more than colour, targets of at least 24 by 24 pixels or spaced to match, meaningful alt text with an empty alt on decorative images, visible focus and contrast in both themes. Walk the whole journey with the keyboard alone, including menus, dialogs and any cookie or consent banner, then with a screen reader such as VoiceOver or NVDA. Fix what you can and write the rest into docs/ in the order you would fix it.

This is https://gradus.kazet.blog/tree/cloud-application/step/accessibility-pass as plain HTML. In a browser the page also lets you mark the step forged and copy a message for your AI assistant.