Web Accessibility (a11y)

[dannycolin]

Here's a couple of thing we could change to make the website more accessible :

• Make we can navigate the website with the keyboard only
• HTML semantic (I found a couple of bugs with the headings tag)

I can't promise but I'm willing to help on that issue if needed.

Here's some interesting tools and resources :

• https://khan.github.io/tota11y/
• https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ (there's also a CLI version on their website)
• https://www.w3.org/TR/WCAG21/

UPDATE: Moved Ensure color ratio is at least WCAG AA compliant specifically to the Québec site issue tracker.

[millette]

Merci Danny!

The thing is, out of the box it's straight bootstrap, but sites can configure a bootswatch theme and add any css. It's a starter, after all.

I should probably open an issue tracker just for http://dev.rollodeqc.com/ if this is your reference.

UPDATE: New issue track for http://dev.rollodeqc.com/: https://github.com/rollodeqc/dev.rollodeqc.com/issues

UPDATE#2: Thanks for the axe tip, I'm running the cli against all the bootswatch themes and plan to report upstream but first, I'm going to switch RoLLodeQc to the most accessible bootswatch theme (currently using sandstone).

[dannycolin]

I should probably open an issue tracker just for http://dev.rollodeqc.com/ if this is your reference.

Yes. It was.

The thing is, out of the box it's straight bootstrap , but sites can configure a bootswatch theme and add any css. It's a starter, after all.

That explains a lot ;). Sadly, Bootstrap is really bad at supporting a11y out-of-the-box. The CSS part is easy to change but the biggest problem is the JS part.

[millette]

@dannycolin JS part of bootstrap? Because that's not used at all. It's React though.

UPDATE: More on JavaScript

I planned the site to work (somewhate) without JavaScript and just gave it a spin. As expected, the pages all load and properly display their content. The language chooser won't open and neither will the main navigation (on narrow screens). These two could probably be fixed.

The form on the frontpage is another matter. The site is shipped as a static html site, so there's nothing to handle forms on the server side. There are a few options if this is really necessary:

1. Move to a web server app instead of static html
2. Generate more static pages for the first few results of the various filter options

For example, https://millette.github.io/gpqc/ uses the same static site generator (Gatsby) but generates all the html pages instead of handling a JS form.

[millette]

PS.: you're welcome to hang in #rollodeqc on Freenode (IRC) :-)

[millette]

@dannycolin can you move (copy) your issue here please?
https://github.com/rollodeqc/dev.rollodeqc.com/issues/new

Also, tell me more about the headings tags bugs you saw. Thanks.

[millette]

En regardant seulement les erreurs de color contrast, les thèmes bootswatch se comparent ainsi:

1. 54 simplex
2. 58 sketchy
3. 69 darkly
4. 69 materia
5. 70 pulse
6. 97 slate
7. 99 default
8. 106 solar
9. 125 cosmo
10. 136 journal
11. 136 sandstone
12. 137 cerulean
13. 139 cyborg
14. 149 united
15. 155 superhero
16. 163 lumen
17. 166 yeti
18. 174 flatly
19. 190 spacelab
20. 191 litera
21. 198 lux
22. 283 minty

Le RoLLodeQc se situe à 150. Je peux passer à simplex comme point de départ, qu'est-ce que tu en penses @dannycolin ?

[dannycolin]

Le RoLLodeQc se situe à 150. Je peux passer à simplex comme point de départ

C'est peut-être 150 fois la même CSS rule qui est utilisée à différentes places. C'est sûr que c'est plus simple chercher dans moins, mais ça veut pas dire que ce soit plus long en gardant le thème actuel.

Essaye de changer le contrast des links et buttons. Ça devrait drop rapidement.

[dannycolin]

Maybe we can close this issue and continue on https://github.com/rollodeqc/dev.rollodeqc.com/issues/1

[millette]

tell me more about the headings tags bugs you saw

Some of the issues you raised apply wholy to the starter, I think we can persue some of that here.

The headings and JS stuff for instance.

[dannycolin]

Ok for the JS stuff those issue should be open (are probably already opened) upstream. But last time I searched on the bootstrap repo people weren't really open minded about a11y :/.

Anyway I'm wondering if it'd be less work to move to Foundation. All the JS like menu, dropdown, etc I've been reworked in the latest version to be a11y friendly.

[millette]

Like I said, I'm not using any of Bootstrap's JS.

I don't think I'll be switching css at this point, unless I make it completely open (to use foundation, bulma, vanilla, etc.) In this case, bootstrap was more of a business decision (well, sort of).