Bug 29070

Summary:	Accessibility: OPAC Purchase Suggestions on search results page has insufficient contrast
Product:	Koha	Reporter:	Henry Bolshaw <bolshawh>
Component:	OPAC	Assignee:	Henry Bolshaw <bolshawh>
Status:	CLOSED FIXED	QA Contact:	Testopia <testopia>
Severity:	minor
Priority:	P5 - low	CC:	jonathan.druart, kyle
Version:	Main	Keywords:	accessibility
Hardware:	All
OS:	All
Change sponsored?:	---	Patch complexity:	Trivial patch
Documentation contact:		Documentation submission:
Text to go in the release notes:		Version(s) released in:	21.11.00,21.05.05
Circulation function:
Bug Depends on:
Bug Blocks:	28188
Attachments:	Bug 29070: Accessibility OPAC Purchase suggestions box on search results page has insufficient contrast Bug 29070: Accessibility OPAC Purchase suggestions box on search results page has insufficient contrast Bug 29070: Accessibility OPAC Purchase suggestions box on search results page has insufficient contrast Bug 29070: Use a variable to store the #666666 color

Description Henry Bolshaw 2021-09-20 23:35:41 UTC

The "Not finding what you're looking for? Make a purchase suggestion" text box on the search results page (opac-search.pl) is hard to read and fails to meet accessibility guidelines.

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 Henry Bolshaw 2021-09-22 07:45:58 UTC Comment hidden (obsolete)

Created attachment 125127 [details] [review]
Bug 29070: Accessibility OPAC Purchase suggestions box on search results page has insufficient contrast

This patch changes the text colour for the purchase
suggestion box on the OPAC search results page to
make the text easier to read and improve accessibility.

To test:

1. Log in to the OPAC and search for something
2. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to check the contrast ratio
3. Confirm that the Purchase suggestion text
   fails to meet accessibility requirements
4. Apply the patch and rebuild CSS:
   yarn build --view opac
5. Confirm the text contrast ratio now meets
   minimum accessibility requirements
6. Check that the OPAC still looks ok after
   the changes.

Comment 2 Owen Leonard 2021-09-22 14:51:22 UTC

Created attachment 125136 [details] [review]
Bug 29070: Accessibility OPAC Purchase suggestions box on search results page has insufficient contrast

This patch changes the text colour for the purchase
suggestion box on the OPAC search results page to
make the text easier to read and improve accessibility.

To test:

1. Log in to the OPAC and search for something
2. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to check the contrast ratio
3. Confirm that the Purchase suggestion text
   fails to meet accessibility requirements
4. Apply the patch and rebuild CSS:
   yarn build --view opac
5. Confirm the text contrast ratio now meets
   minimum accessibility requirements
6. Check that the OPAC still looks ok after
   the changes.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Comment 3 Katrin Fischer 2021-09-26 12:46:49 UTC

Created attachment 125325 [details] [review]
Bug 29070: Accessibility OPAC Purchase suggestions box on search results page has insufficient contrast

This patch changes the text colour for the purchase
suggestion box on the OPAC search results page to
make the text easier to read and improve accessibility.

To test:

1. Log in to the OPAC and search for something
2. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to check the contrast ratio
3. Confirm that the Purchase suggestion text
   fails to meet accessibility requirements
4. Apply the patch and rebuild CSS:
   yarn build --view opac
5. Confirm the text contrast ratio now meets
   minimum accessibility requirements
6. Check that the OPAC still looks ok after
   the changes.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Comment 4 Jonathan Druart 2021-09-28 12:41:12 UTC

Created attachment 125402 [details] [review]
Bug 29070: Use a variable to store the #666666 color

To prevent repetition

Comment 5 Jonathan Druart 2021-09-28 12:42:48 UTC

Hi Henry,
As we are reusing the same HTML color code (#666666) it seems better to create a variable to reuse, instead of copying the same code everywhere. Better for maintainability if we need to modify it later on.

Comment 6 Jonathan Druart 2021-09-28 13:40:00 UTC

Pushed to master for 21.11, thanks to everybody involved!

Comment 7 Kyle M Hall (khall) 2021-10-08 12:14:08 UTC

 Pushed to 21.05.x for 21.05.05