Accessibility

Accessibility in Slowly starts with the markup, not a checkbox added at the end. Blocks render real HTML elements, so most of the accessible behaviour comes for free, and the places where a choice is yours are called out below.

Semantic markup first

Blocks output the element they mean. A Nav is a <nav>, a Section is a <section>, a Heading keeps its level, a collapsible Table of Contents uses a native <details> and <summary> rather than a scripted widget. Native elements bring keyboard support and screen reader semantics with them, so a collapse toggles with the keyboard and a landmark announces itself without any extra attributes.

ARIA is used only where it adds meaning a native element cannot. Breadcrumbs follow the WAI-ARIA pattern (nav with a label, aria-current="page" on the current crumb, separators hidden from screen readers). The Table of Contents marks the in-view link with aria-current="location". The Reading Progress bar is deliberately aria-hidden with no progress role, because a screen reader user does not read a page by scroll percentage and a constantly changing number is noise.

Choices that are yours

• Contrast. Colour is yours to set, so the contrast is yours to meet. Aim for at least 4.5:1 for body text. Colour should never be the only signal that distinguishes two things.
• Alt text. The Image and Gallery blocks take alt text. Write what the image means, and leave it empty for purely decorative images so screen readers skip them.
• Preference states. The states selector lets you design the version a reduced-motion, high-contrast, or reduced-data preference should produce. It is for building a still alternative that stands on its own, not for adding motion back. Slowly does not yet reduce motion automatically, so a section that leans on animation needs a state that reads well without it.
• Pagination labels. Give pagination controls descriptive labels rather than bare numbers, and prefer a "Load more" button over scroll-triggered loading for keyboard users.

Each block page notes anything specific to that block under its own Accessibility heading.