[Bug 28188] New: Accessibility: OPAC - the contrast ratio for text is insufficient [OMNIBUS]
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Bug ID: 28188 Summary: Accessibility: OPAC - the contrast ratio for text is insufficient [OMNIBUS] Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Keywords: accessibility Severity: minor Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: bolshawh@parliament.uk QA Contact: testopia@bugs.koha-community.org 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/) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |martin.renvoize@ptfs-europe | |.com --- Comment #1 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Good call Henry.. I look forward to seeing some work happen on this during the next cycle :) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |bolshawh@parliament.uk -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |ASSIGNED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 --- Comment #2 from Henry Bolshaw <bolshawh@parliament.uk> --- Created attachment 124128 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=124128&action=edit 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #124128|0 |1 is obsolete| | --- Comment #3 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 124208 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=124208&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |oleonard@myacpl.org --- Comment #4 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 --- Comment #5 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 --- Comment #6 from Henry Bolshaw <bolshawh@parliament.uk> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29034 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29034 [Bug 29034] Accessibility: OPAC nav-links don't have sufficient contrast ratio -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29035 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29035 [Bug 29035] Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29036 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29036 [Bug 29036] Accessibility: OPAC buttons don't have sufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29037 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29037 [Bug 29037] Accessibility: OPAC breadcrumb links don't have sufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29038 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29038 [Bug 29038] Accessibility: OPACUserSummary heading doesn't have sufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #124208|0 |1 is obsolete| | --- Comment #7 from Henry Bolshaw <bolshawh@parliament.uk> --- Comment on attachment 124208 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=124208 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! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |BLOCKED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 --- Comment #8 from Henry Bolshaw <bolshawh@parliament.uk> --- 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-usin... 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) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29065 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29065 [Bug 29065] Accessibility: OPAC clear search history link has insufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29068 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29068 [Bug 29068] Accessibility: OPAC search results summary text has insufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29069 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29069 [Bug 29069] Accessibility: "Refine your search" link doesn't have sufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Henry Bolshaw <bolshawh@parliament.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29070 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29070 [Bug 29070] Accessibility: OPAC Purchase Suggestions on search results page has insufficient contrast -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |29126 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29126 [Bug 29126] Accessibility: More corrections to contrast in the OPAC -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Bug 28188 depends on bug 29126, which changed state. Bug 29126 Summary: Accessibility: More corrections to contrast in the OPAC https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29126 What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Bug 28188 depends on bug 29036, which changed state. Bug 29036 Summary: Accessibility: OPAC buttons don't have sufficient contrast https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29036 What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to oldstable |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 claire.hernandez@biblibre.com <claire.hernandez@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Component|OPAC |Accessibility CC| |claire.hernandez@biblibre.c | |om, | |matt.blenkinsop@ptfs-europe | |.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28188 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC|martin.renvoize@ptfs-europe | |.com | -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org