galaxyproject / galaxyproject/training-material

Accessibility next round

Open
#3,733 1 comment 0 reactions 1 assignee Assigned to @hexylena View on GitHub
accessibility work-in-progress
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.