Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility testing #247

Open
16 tasks
loleg opened this issue Dec 2, 2019 · 0 comments
Open
16 tasks

Accessibility testing #247

loleg opened this issue Dec 2, 2019 · 0 comments

Comments

@loleg
Copy link
Contributor

loleg commented Dec 2, 2019 •
edited
Loading

The website accessibility is already quite okay, and potentially could be very good with a few improvements. I'm not an accessibility expert, and only did 10 minutes of testing - please use the comment or open separate issue for any gaping flaws I miss.

Here are a few areas I could pick up at a cursory glance and with basic tools:

  • Without JavaScript the map is blank and says "0 Events registered so far", which can be rather discouraging. Just hide the div until it's loaded.
  • The main content should be quickly readable from the top in screen readers, however there are a lot of blank ARIA role containers, which you can see in the screenshot from the Firefox Accessibility console below.
  • Due to the HTML some of the lead content might not make sense to a voice reader - I have not tried this myself. For example the top banner links are broken up into individual span elements at .banner > a:nth-child(1) > p:nth-child(2) > span
  • Contrast is an issue, in particular on all the buttons and white-on-blue texts, which I find it difficult to read myself on anything but my graphics workstation screen.
  • <html> element does not have a [lang] attribute, for a multinational, multilingual site just a no-go.
  • the top a.logo needs a link text, like "home page"..

Chrome's audit (88/100) suggests additional areas of manual testing:

  • The page has a logical tab order
  • Interactive controls are keyboard focusable
  • Interactive elements indicate their purpose and state
  • The user's focus is directed to new content added to the page
  • User focus is not accidentally trapped in a region
  • Custom controls have associated labels and ARIA roles
  • Visual order on the page follows DOM order
  • Offscreen content is hidden from assistive technology
  • Headings don't skip levels
  • HTML5 landmark elements are used to improve navigation

Screenshot from 2019-12-02 14-36-02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@loleg