Adds accessibility fixes per WCAG 2.1 level AA, audited with pa11y#1351
Adds accessibility fixes per WCAG 2.1 level AA, audited with pa11y#1351
Conversation
Bubballoo3
left a comment
Bubballoo3
left a comment
There was a problem hiding this comment.
Overall I think this looks alright, but there are a few places where I think we are going a little too far with the CSS styles. I haven't dug into each and every new rule, but I have pointed out a few where it seems like we can take a more minimal approach to achieve contrast compliance.
The same goes for the searchbar, it seems like adding the 'Go' submit button definitely improves the experience for screenreader users, but there are a lot of other modifications there that have debatable impacts (like an additional region or the duplication of labels).
Finally, it looks like the div.version above the searchbar is still below contrast requirements.
| @@ -0,0 +1,20 @@ | |||
| <div id="searchbox" role="search"> | |||
| <h3 id="searchlabel">{{ _('Quick search') }}</h3> | |||
There was a problem hiding this comment.
Is the 'Quick search' label necessary? It seems to take valuable vertical space, and the searchbar itself is separately labelled below. In the same vein, I think a role='search' region for a single form element is probably extraneous.
| <h3 id="searchlabel">{{ _('Quick search') }}</h3> | ||
| <div class="searchformwrapper"> | ||
| <form class="search" action="{{ pathto('search') }}" method="get" id="rtd-search-form" class="wy-form"> | ||
| <label for="search-input" class="sr-only">{{ _('Search docs') }}</label> |
There was a problem hiding this comment.
This seems more complicated than a simple aria-label on the input, is there a reason to place it in its own element?
| color: #ffffff; | ||
| } | ||
| .wy-nav-side .wy-menu-vertical p.caption span.caption-text { | ||
| color: #ffffff; |
There was a problem hiding this comment.
This line makes the headers and items the same color, despite the headers not presenting any contrast issues
I think the visual distinction between headers and items is pretty important here, so is there another reason to change them that I am missing?
|
|
||
| /* Force readable contrast on admonition body content */ | ||
| .admonition { | ||
| background-color: #ffffff !important; |
There was a problem hiding this comment.
I think this is a little harsh (moving straight to white instead of a lighter background) when normal text seems to be fine wrt contrast. A less invasive fix IMO would be to darken the links within notices/warnings, since those are the only elements that currently introduce issues.
3 participants
Modify this link to include the branch name, and possibly the page this PR modifies:
https://osc.github.io/ood-documentation-test/accessibility_fixes_v2/
Add your description here
Replaces #1333, rebuilt against current
latestafter the rename ofsource/customization.rsttosource/customizations.rst. Same scope of changes and same end state (zero pa11y errors across the site), but now cleaned up for an easier merge.