Bug 28101 - Accessibility: OPAC - Breadcrumbs should be more accessible
Summary: Accessibility: OPAC - Breadcrumbs should be more accessible
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement (vote)
Assignee: wainuiwitikapark
QA Contact: Testopia
URL:
Keywords: accessibility
Depends on:
Blocks:
 
Reported: 2021-04-07 03:08 UTC by wainuiwitikapark
Modified: 2021-10-29 14:11 UTC (History)
2 users (show)

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


Attachments
Bug 28101: changed styling for breadcrumbs (2.14 KB, patch)
2021-04-21 04:35 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 28101: changed breadcrumbs in the OPAC (82.84 KB, patch)
2021-04-21 04:48 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 28101: changed styling for breadcrumbs (2.18 KB, patch)
2021-09-23 11:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility (85.03 KB, patch)
2021-09-23 11:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility (85.09 KB, patch)
2021-10-10 22:56 UTC, Henry Bolshaw
Details | Diff | Splinter Review
Bug 28101: changed styling for breadcrumbs (2.25 KB, patch)
2021-10-24 11:18 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility (85.44 KB, patch)
2021-10-24 11:18 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 28101: (follow-up) Correct breadcrumb divider image (2.78 KB, patch)
2021-10-25 13:17 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28101: (follow-up) Correct breadcrumb divider image (2.76 KB, patch)
2021-10-25 13:22 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description wainuiwitikapark 2021-04-07 03:08:18 UTC
Breadcrumbs should adhere to the guidelines in https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html i.e. be a <nav aria label="Breadcrumb" class="breadcrumb"> with an ordered list inside, with appropriate styling to make it appear as breadcrumbs. It should also have aria-current="page" to specify where the current page is.
Comment 1 wainuiwitikapark 2021-04-21 04:35:32 UTC Comment hidden (obsolete)
Comment 2 wainuiwitikapark 2021-04-21 04:48:04 UTC Comment hidden (obsolete)
Comment 3 wainuiwitikapark 2021-04-21 04:49:34 UTC
Please refer to Bug 27846 for discussion around the styling of breadcrumbs
Comment 4 Owen Leonard 2021-04-22 12:56:02 UTC
I'm curious about your choice to remove the Bootstrap classes from the markup:

-            <li class="breadcrumb-item" aria-current="page">
+            <li>
+                <a href="#" aria-current="page">
                     Blocked record
+                </a>
             </li>

I see that the "aria-current" information has moved to the link, and that's fine with me--I see that it fits the guidelines better. But I think there is value to keeping the Bootstrap 4 markup classes for consistency's sake and to be able to inherit existing Bootstrap classes.
Comment 5 wainuiwitikapark 2021-04-23 02:40:29 UTC
(In reply to Owen Leonard from comment #4)
> I'm curious about your choice to remove the Bootstrap classes from the
> markup:
> 
> -            <li class="breadcrumb-item" aria-current="page">
> +            <li>
> +                <a href="#" aria-current="page">
>                      Blocked record
> +                </a>
>              </li>
> 
> I see that the "aria-current" information has moved to the link, and that's
> fine with me--I see that it fits the guidelines better. But I think there is
> value to keeping the Bootstrap 4 markup classes for consistency's sake and
> to be able to inherit existing Bootstrap classes.

Hi Owen, thanks for your comment. I was just attempting make it the same as Bug 27846. Please feel free to make any amendments that you believe would work better but that also keep in line with accessibility standards.
Comment 6 Owen Leonard 2021-09-23 11:36:19 UTC Comment hidden (obsolete)
Comment 7 Owen Leonard 2021-09-23 11:36:22 UTC Comment hidden (obsolete)
Comment 8 Henry Bolshaw 2021-10-10 22:56:19 UTC Comment hidden (obsolete)
Comment 9 Katrin Fischer 2021-10-24 11:18:44 UTC
Created attachment 126804 [details] [review]
Bug 28101: changed styling for breadcrumbs

Updates opac.scss file so the breadcrumbs will appear the same as Bug
27846 (Staff Client breadcrumbs).

This works but the file may need to be changed/cleaned up so that there
is not unnecessary information in it.

Sponsored-by: Catalyst IT

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

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 10 Katrin Fischer 2021-10-24 11:18:48 UTC
Created attachment 126805 [details] [review]
Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility

Modified breadcrumbs to be accessible, in particular for a
screen-reader. Also ensured the breadcrumbs were all consistent.

Made the block of breadcrumbs to be a <nav id="breadcrumbs"
aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list
inside. The last breadcrumb also has aria-current="page" to specify that
it is the current page.

To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

- Confirm that OPAC templates are updated consistently to use
  breadcrumbs markup beginning with '<nav
  id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">'
- Pages in the OPAC should look consistent, with the last breadcrumb
  styled as text and with the "aria-current" attribute "page."

Sponsored-by: Catalyst IT
Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 11 Jonathan Druart 2021-10-25 12:27:44 UTC
In the first patch there is a li::before with a svg image background (that is the ">" I think). However I am not seeing it, it's still "/", not ">" like on the staff interface.

Am I reading wrongly those changes?
Comment 12 Owen Leonard 2021-10-25 13:17:53 UTC Comment hidden (obsolete)
Comment 13 Owen Leonard 2021-10-25 13:22:55 UTC
Created attachment 126834 [details] [review]
Bug 28101: (follow-up) Correct breadcrumb divider image

This patch corrects the CSS for generating a chevron-style divider
between breadcrumb items. The CSS copied from staff-global.scss needed
some tweaks to make it work in the OPAC with Bootstrap 4.

Also changed: The Base64-encoded SVG is converted to plain based on
https://css-tricks.com/probably-dont-base64-svg/
Comment 14 Jonathan Druart 2021-10-25 13:57:43 UTC Comment hidden (obsolete)
Comment 15 Jonathan Druart 2021-10-25 13:58:29 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 16 Jonathan Druart 2021-10-25 14:02:36 UTC
Nitpicking, why height: 0.8em?

This is 0.8em: https://snipboard.io/r2anVS.jpg

Vs 0.6em: https://snipboard.io/PGHrtz.jpg

The chevron is more vertically aligned with the text.

This is for a follow-up bug anyway.

Thanks for the follow-up, Owen!