Bug 28188 - Accessibility: OPAC - the contrast ratio for text is insufficient [OMNIBUS]
Summary: Accessibility: OPAC - the contrast ratio for text is insufficient [OMNIBUS]
Status: BLOCKED
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor (vote)
Assignee: Henry Bolshaw
QA Contact: Testopia
URL:
Keywords: accessibility
Depends on: 29069 29034 29035 29036 29037 29038 29065 29068 29070 29126
Blocks:
  Show dependency treegraph
 
Reported: 2021-04-21 15:45 UTC by Henry Bolshaw
Modified: 2024-04-11 13:14 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient (3.21 KB, patch)
2021-08-26 23:19 UTC, Henry Bolshaw
Details | Diff | Splinter Review
Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient (3.26 KB, patch)
2021-08-28 11:51 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Henry Bolshaw 2021-04-21 15:45:40 UTC
This is a collector bug for cases where the contrast ratio of text is insufficient (usually less than 4.5:1). This makes the text difficult to read and fails to meet accessibility criteria.

WCAG 2.1 1.4.3 Contrast (Minimum) Level AA:

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: 

- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

- Logotypes: Text that is part of a logo or brand name has no contrast requirement."

(https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#contrast-minimum)

There are several free websites for checking the contrast ratio, e.g. https://webaim.org/resources/contrastchecker/ 

You can also use the built-in accessibility functions in Firefox and Chrome, as well as specialist accessibility browser extensions like WAVE (https://wave.webaim.org/)
Comment 1 Martin Renvoize 2021-05-04 11:01:40 UTC
Good call Henry.. I look forward to seeing some work happen on this during the next cycle :)
Comment 2 Henry Bolshaw 2021-08-26 23:19:47 UTC
Created attachment 124128 [details] [review]
Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient

This patch makes minor changes to the OPAC SCSS
files to improve the contrast ratio for text on
the OPAC, including the main navigation links
and buttons. These issues were identified using
the WebAIM WAVE accessibility browser extension,
Chrome's Lighthouse tool, and Khan Academy's
Tota11y bookmarklet (the results using the three
tools were very similar).

To Test:
1. Use an accessibility tool (e.g. Chrome's
   Lighthouse Tool or WebAim's Wave Extension) to
   test the contrast ratio for text.
2. Confirm that the OPAC has contrast ratio issues
   affecting the main navigation links, the buttons,
   and the text of search results.

3. Apply the patch and rebuild the OPAC CSS:
   yarn build --view opac
4. Use the accessibility tool to confirm the
   contrast ratio issues have been fixed
5. Check that the OPAC still looks ok
   after the changes.
Comment 3 Katrin Fischer 2021-08-28 11:51:05 UTC
Created attachment 124208 [details] [review]
Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient

This patch makes minor changes to the OPAC SCSS
files to improve the contrast ratio for text on
the OPAC, including the main navigation links
and buttons. These issues were identified using
the WebAIM WAVE accessibility browser extension,
Chrome's Lighthouse tool, and Khan Academy's
Tota11y bookmarklet (the results using the three
tools were very similar).

To Test:
1. Use an accessibility tool (e.g. Chrome's
   Lighthouse Tool or WebAim's Wave Extension) to
   test the contrast ratio for text.
2. Confirm that the OPAC has contrast ratio issues
   affecting the main navigation links, the buttons,
   and the text of search results.

3. Apply the patch and rebuild the OPAC CSS:
   yarn build --view opac
4. Use the accessibility tool to confirm the
   contrast ratio issues have been fixed
5. Check that the OPAC still looks ok
   after the changes.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 4 Katrin Fischer 2021-08-28 11:54:36 UTC
Hi Henry, thanks a lot for this! Especially for the tips on how to test. It was the first time for me using Chrome dev tools and the lighthouse audit tool. Lots of interesting things there.

I noticed that there is another warn on the OPAC front page, that is only visible if you are logged in, have some checkouts and OPACUserSummary active. The "heading" of the summary table has bad contrast (grey script on grey background).

Owen, would you mind having a look here too and give us your opinion?

I also wonder if we could automate tests for accessibility using these kind of tools somehow. So we'd get a warn if the accessibility rate of a page drops after pushing a new feature or patch.
Comment 5 Katrin Fischer 2021-08-28 11:55:29 UTC
Ah, just a tip: if we do this for more pages, it might be good to file separate bugs for separate pages/elements to be changed and link it to this omnibus bug, instead of posting the bugs directly here.
Comment 6 Henry Bolshaw 2021-08-30 22:02:07 UTC
Thanks for testing and for spotting that summary heading issue. (I'd seen that issue before but I'd forgotten about it...)

Thanks for the tip about filing separate bugs, I'm not sure why I didn't do that in the first place. Would it be helpful if I broke the issues from this patch into separate bugs and then added them as dependencies for this bug? Then I could add the OPACusersummary as a new bug at the same time. Or would that overcomplicate things?

The biggest visual change I made is the change to the button colour. The green we were using isn't accessible with white text so I changed it to a green that is. Alternatively we could change the text to black (which keeps the Koha green) or choose a completely different button colour.
Comment 7 Henry Bolshaw 2021-09-16 03:57:44 UTC
Comment on attachment 124208 [details] [review]
Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient

I'm breaking this down into smaller patches on other bugs so I've marked this obsolete. Thank you for testing!
Comment 8 Henry Bolshaw 2021-09-16 07:21:28 UTC
I agree about the automated testing. I've found some instructions for setting up automated accessibility tests: https://accessibility-manual.dwp.gov.uk/best-practice/automated-testing-using-axe-core-and-pa11y/#acceptance-tests-using-axe-core-and-selenium

This can be done with selenium or puppeteer. I don't have any experience with these but I think we already use selenium for testing: https://wiki.koha-community.org/wiki/Using_Selenium_with_Koha

The tests rely on Pa11y (https://pa11y.org/) and axe-core (https://github.com/dequelabs/axe-core)