A11Y checklist - Kesko Design System

This checklist uses the WCAG 2.2 guidelines as a reference point. It’s used to improve the experience for everyone and ensure our high standards for accessibility are met.

Content #

Content uses consistent and clear language.
<button>, <a>, and <label> text is unique and descriptive.
List content uses <ol>, <ul>, or <dl>.
A keyboard-focusable skip link jumps to the main content.
Body text has a line height of at least 1.5× the font size.
Page is usable when text is scaled to 200%.
Content reflows correctly when zoomed to 400%.
Auto-updating or moving content can be paused, stopped, or hidden.
Time limits can be extended, adjusted, or removed.

Headings #

Heading elements are used to introduce new content.
Each page has exactly one <h1> heading.
Headings (<h1>-<h6>) follow a logical order based on content depth.
No heading levels are skipped.

Markup #

Keyboard #

Interface is tested for keyboard accessibility.
Interactive elements have visible focus styles.
Focus order matches the visual layout.
No off-screen elements remain focusable.
Buttons activate with both Space and Enter.
Dialogs and overlays close with the Esc key.
Tooltips and popovers are dismissible, hoverable, and persistent.

Images #

All meaningful <img> elements have an alt attribute.
Decorative images use alt="".
Complex charts and graphs have text alternatives.
Decorative <svg> uses aria-hidden="true".
Informative <svg> uses role="img" with an accessible name.
Real text is used instead of text in images.

Forms #

Every input has an associated <label>.
Related inputs are grouped with <fieldset> and <legend>.
Inputs support autocomplete where relevant.
Error messages are linked to their input via aria-describedby.

Color #

Color is not the only way meaning is conveyed.
Text color contrast is at least 4.5:1.
UI component color contrast is at least 3:1.
Interface is tested with a color-blindness simulator.

Mobile #

Page works in both portrait and landscape orientation.
Page works at 320 CSS pixels wide.
The whole page does not scroll horizontally.
Touch targets are at least 24 × 24 px (inline exceptions allowed).
Viewport zoom is not disabled in the meta tag.

Tooling #

Interface has automated accessibility tests.
Passes a scan with the AXE tool.
Works with NVDA on Windows.
Works with JAWS on Windows.
Works with VoiceOver on macOS and iOS.
Works with TalkBack on Android.
Works in Windows high-contrast mode.

Attribution #

This checklist was inspired by The A11Y Project, licensed under the Apache License 2.0.

A11Y checklist Draft, not ready for production use
View as Markdown Open in Claude Open in ChatGPT

On this page

Content #

Headings #

Markup #

Keyboard #

Images #

Forms #

Color #

Mobile #

Tooling #

Attribution #

A11Y checklist Draft, not ready for production use Copy page Copy content for LLMs View as Markdown Open in Claude Open in ChatGPT

On this page

Content 0 / 9 #

Headings 0 / 4 #

Markup 0 / 13 #

Keyboard 0 / 7 #

Images 0 / 6 #

Forms 0 / 4 #

Color 0 / 4 #

Mobile 0 / 5 #

Tooling 0 / 6 #

Attribution #

A11Y checklist Draft, not ready for production use
View as Markdown Open in Claude Open in ChatGPT

Content #

Headings #

Markup #

Keyboard #

Images #

Forms #

Color #

Mobile #

Tooling #