A site more people can use, comfortably.
We want Mindful to work for people who read with a keyboard, a screen reader, zoomed-in text or a small phone. Our target is theWeb Content Accessibility Guidelines (WCAG) 2.2, level AA.
What is in place
- Every page has one main heading, a header, a main region and a footer, and a “Skip to content” link as the first thing you can tab to.
- The menu is a native dialog. It opens and closes from the keyboard, closes with Escape, and puts focus back on the menu button when it closes.
- Focus is always visible, and the sticky header leaves room so it never covers the element you have tabbed to.
- The link to the page you are on is marked as the current page.
- Colours follow your system’s light or dark setting, and animations are switched off when you ask your system to reduce motion.
- Essay photos have alternative text.
How we check
Code is linted with the jsx-a11y accessibility rules. Automated browser tests, run on a desktop and a Pixel 5 screen size, check the page landmarks, the skip link, the menu dialog with Escape, and the footer links.
Known gaps
The essay photos are placeholders from Picsum, not pictures chosen for each essay. Many essays have no written image description, so their photo’s alternative text is the essay title, which tells you little about the photo itself.
Automated tests only catch some problems. Your combination of device, browser and assistive technology may turn up barriers we have not seen.
Report a problem
If something on Mindful is hard to use, please open an issue onthe Mindful repository on GitHub. Tell us the page, what you were trying to do, what got in the way, and the device and assistive technology you use if you are happy to share it.