galaxyproject / galaxyproject/training-material
Accessibility next round
- Dominant language
- HTML
- Stars
- 367
- Forks
- 1.1k
- Avg merge
- 16h 27m
- Merged PRs (30d)
- 49
Description
- [ ] Install @axe-core/cli
- [ ] Use it to test our content (see below)
- [ ] fix remaining w3c issues.
- [ ] prevent h1s in tutorials, as we already have an H1 on the page: the tutorial title. I don't know a good way to solve this at all, and it's very frustrating. I'd love if we could replace ALL section headings on the fly, just adding +1 to their value, but there's no good place to hook into the markdown processing pipeline for this. I'm not sure what we should do here. I don't want to update every tutorial, it's not something tutorial authors should have to worry about, they should be free to use `#` as a heading level.
- [ ] Maybe re-design the author list again to not use presentational tables. dd/dl/dt flowed really poorly though so that felt like a good semantic but bad display fit.
I don't know if we need to test every page, we can probably spot-test these on:
- main page
- topic index (several)
- tutorial page (admin, dev, science, teaching)
- slides-plain page
Axe reports:
```
14:37:52|(asdf‽) [hxr@cosima:~/arbeit/galaxy/training-material]1$ $(npm bin)/axe http://cosima:4002/training-material/topics/admin/tutorials/ansible-galaxy/tutorial.html
Running axe-core 4.5.1 in chrome-headless
Testing http://cosima:4002/training-material/topics/admin/tutorials/ansible-galaxy/tutorial.html ... please wait, this may take a minute.
Violation of "link-in-text-block" with 48 occurrences!
Ensure links are distinguished from surrounding text in a way that does not rely on color. Correct invalid elements at:
- .warning:nth-child(1) > p > a
- #tutorial-content > p:nth-child(2) > a
- .quote:nth-child(3) > p > a
- p:nth-child(4) > a[href$="#installing-galaxy"]
- #tutorial-content > p:nth-child(10) > a:nth-child(1)
- a[href$="galaxy.ansible.com/"]
Violation of "region" with 1 occurrences!
Ensures all page content is contained by landmarks. Correct invalid elements at:
- .gitter-open-chat-button
For details, see: https://dequeuniversity.com/rules/axe/4.5/region
Violation of "scrollable-region-focusable" with 22 occurrences!
Ensure elements that have scrollable content are accessible by keyboard. Correct invalid elements at:
- .language-yaml:nth-child(31) > .highlight > pre
- div[data-commit="Add hosts"] > .highlight > pre
- .hands_on:nth-child(69) > ol > li:nth-child(1) > .language-diff > .highlight > pre
```
I... do not believe most of the `link-in-text-block` warnings. They're all WCAG AAA by firefox (in my branch) I suspect it can't figure out the background colour, because underlines are not strictly necessary (and not widely used these days, moreso on hover.) The gitter button is hopelessly broken, maybe we replace it with a link to matrix?
The pres, I'm not sure what to do for longer code blocks. *None* of them have scrollbars, there's just nothing focusable (you can pagedown?) within them. maybe we can get line numbers rendered or something.
https://www.powermapper.com/products/sortsite/checks/accessibility-checks/ does some additional checks that are slightly different from axe, and we can check this as well.
Contributor guide
Assessment
This issue has not been assessed yet.