opendataday icon indicating copy to clipboard operation
opendataday copied to clipboard

Published 20 hours ago • verified publisher icon okfn

Accessibility testing

Open loleg opened this issue 5 years ago • 0 comments

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

loleg avatar Dec 02 '19 13:12 loleg