You might have noticed recently we've been focusing some effort on both fixing historic accessibility issues in the codebase, and also optimising some features in terms of accessibility.
In the last few months this has included work such as:
- A revamp of all modals with proper focus management
- Changes to design-system dropdowns to ensure focus management and expanded/collapsed state being communicated to screen reader users
- Adding skip links to our pages to make navigation by keyboard more streamlined
- Updating our navigation "tabs" component to communicate the currently selected page to screen reader users
- Adding an accessibility linter for posts
As we continue to focus on accessibility enhancements, I thought it might be interesting to share how I would go about auditing a user flow with screen reader users in mind - so I've recorded myself doing just that!
The user journey I'm auditing is:
- Select a post from the home feed
- View the post
- Like and share the post
I'm using VoiceOver on Mac (the default built-in screen reader), and I'm auditing the flow on the DEV Forem.
If you watch the video, you'll see that I was able to successfully complete the actions I set out to do, but there were a couple of friction points in the journey:
- Each "story" card in the feed has a lot of links, many of which point to the same destination, or have slightly confusing labels
- Article "Save" buttons all have the same label, leading to a long list of indistinguishable "Save" controls being surfaced
- Skip link functionality didn't behave as expected when I moved to the new page (an open issue already exists to look further at this functionality)
- I didn't receive any feedback after liking the article
As a result of this audit:
- I've started discussions internally via our RFC (Request For Comments) process on how we could streamline the home feed cards
- I raised a small issue for enhancements to the reaction buttons, which has already been implemented by one of our amazing community contributors 😄