Ensure that I'm following a11y standards

[darcydriscoll]

🏖️ Definition of done

• [x] Feel confident that I've done everything I can to make the primary room accessible

🏕️ Problem-solving

🎠 Explore the problem

A FreeCodeCamp article on the subject.

• It suggests setting the page title when we route to a new page -- clever
  • Some libraries that simplify this for me if necessary:
    • vue-meta
    • vue-head
• I should make sure I'm specifying the text content's language
• There are some tips on making elements focusable I should look at

Accessible Vue -- a book about the subject

• There's so much to think about...

Is my accessibility auditing up to snuff?

• I'm using Firefox -- Firefox notes some accessibility issues, but maybe not all?
• vue-axe exists. It's an accessibility auditing application. It's probably worth checking out.

Can someone navigate my pages easily with a keyboard?

• The primary room, yes
• The sign in page: no! They can access the submit button but nothing else.

Can someone navigate my pages easily with a screen reader?

• I've used HTML5 semantic elements. 95% of users are using browsers that support these elements.
• Vue Announcer seems to help Vue apps alert screen readers in coherent ways. I'm not sure if it's necessary for the scope of my project.

Is Vue Router accessible?

• Not out of the box.
  • The article recommends a skip link. Because my app is so small, I don't think this is necessary (it would actually take longer to get to the content if a skip link was implemented).
  • I don't need to signal to the screen reader that a link in the collection has been routed to, because there are no links in no collections!

Should I make all possible changes in this task?

• No
• Not all of the possible changes are relevant to this task or this user story.
• I'll write down what is relevant in the method section below, then write an Issue handling what else I need to change and in what artefact I should do it

🛫 Method

• [x] Ensure I'm setting the text content's language (on the html tag)
• [x] Set the page title when I go between the sign in screen and primary room
  • [x] Sign in screen
  • [x] Primary room
• [x] Read FreeCodeCamp's tips on making elements focusable -- here, all I needed to do was ensure the focus ring colour contrasted against the normal border well enough!
• [x] Read the marcus.io blog post on improved accessible routing in Vue.js -- anything to do here?
  • [x] Focus management (using outermost container as a fallback since we don't have a skip link)
    • [x] Set tabindex="-1" on the outermost wrapper element + set route wrapper focus on each route transition (following advice on accessible-app.com instead)
  • [x] Use vue-announcer to announce newly loaded content after route transition
• [x] Anything to learn from https://accessible-app.com/? Nope -- except that we need progress indication on the sign in page. Added that to the relevant issue.
• [x] Read Marcus' 'Accessible Vue' -- anything to implement from this?
  • [x] Convey heading hierarchy with props (accessibility maintenance)
  • [x] Possibly: a BaseTextInput component that includes an input element and a label element (forces me to use labels!). Seems like too much work for so little value. I'll just remember to use labels for now.
  • [x] Make a skip link after all using vue-skip-to
  • [x] Install Vue.js accessibility linter
  • [x] Consider installing nerde-focus
• [x] Install Vue Axe and fix any other problems it picks up (in the primary room)

📝 Notes

[darcydriscoll]

a11y is a massive field. There's no one-size-fits-all solution to accessibility -- go figure.

[darcydriscoll]

Done!