Bug 37586 - Improve accessibility of top navigation in the OPAC with aria-labels
Summary: Improve accessibility of top navigation in the OPAC with aria-labels
Status: Pushed to oldstable
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal
Assignee: Laura Escamilla
QA Contact: Martin Renvoize (ashimema)
URL:
Keywords: accessibility
Depends on:
Blocks:
 
Reported: 2024-08-06 18:52 UTC by Laura Escamilla
Modified: 2024-11-04 00:01 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: String patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
24.11.00,24.05.04,23.11.10
Circulation function:


Attachments
Bug 37586: Added aria-labels to the masthead links. (4.42 KB, patch)
2024-08-06 20:51 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37586: Updated aria-labels for masthead links (3.62 KB, patch)
2024-08-07 13:39 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37586: Added aria-label for Login icon (2.65 KB, patch)
2024-08-07 13:45 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37586: Updated aria-labels for masthead links (3.67 KB, patch)
2024-08-19 16:39 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37586: Added aria-label for Login icon (2.71 KB, patch)
2024-08-19 16:39 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37586: Updated aria-labels for masthead links (3.74 KB, patch)
2024-08-21 08:13 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 37586: Added aria-label for Login icon (2.77 KB, patch)
2024-08-21 08:13 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Laura Escamilla 2024-08-06 18:52:38 UTC
When the OPAC screen width is reduced, the link texts "Log in to your account", "Cart" and "Lists" are removed, causing the links to lose their text alternative. This violates accessibility guidelines which require that all links have a text alternative, even if it is not visible.
Comment 1 Laura Escamilla 2024-08-06 20:51:26 UTC
Created attachment 170118 [details] [review]
Bug 37586: Added aria-labels to the masthead links.

1. **Check the OPAC Interface**:
   - Open the OPAC in a normal-sized browser window.
   - You’ll see the text next to the 'Cart' and 'Login' icons clearly.
   - Gradually reduce the window size until the text next to these icons disappears.
   - Inspect the icon elements. You’ll find that there is no alternative text (like `aria-label`) provided for these links. This lack of alternative text is an accessibility issue.

2. **Apply the Patch**:
   - Implement the provided patch to address the accessibility issue.
   - Restart_all

3. **Verify the Fix**:
   - Inspect the icons again.
   - For the 'Cart' icon, you should see an `aria-label` attribute with the text "View your shopping cart".
   - For the 'Login' icon, you should see an `aria-label` attribute with the text "Log in to your account".
   - These changes will improve accessibility for users relying on screen readers.

4. **Sign Off**:
   - Sign off and Have an amazing day! :D
Comment 2 Laura Escamilla 2024-08-06 20:52:24 UTC
Note: In my original description I listed the "Lists" icon as an issue but I was incorrect. It already has it's own aria-label.
Comment 3 Laura Escamilla 2024-08-07 13:39:53 UTC
Created attachment 170134 [details] [review]
Bug 37586: Updated aria-labels for masthead links

Update to my last comment: The Lists aria-label had an accessibility issue as the label did not match the visible text.

New test plan:

Check the OPAC Interface:
* Open the OPAC in a normal-sized browser window.
* You’ll see the text next to the 'Cart', 'Lists', and 'Login' icons clearly.
* Gradually reduce the window size until the text next to these icons disappears.
* Inspect the icon elements. You’ll find that there is no alternative text (like aria-label) provided for 'Cart' and 'Login'. The aria-label for 'Lists' does not match the visible text. It currently says "Show dropdown with detailed list information". This lack of alternative text is an accessibility issue and labels should match visible text.
Apply the Patch:
* Apply the patch
* Restart_all
Verify the Fix:
* Inspect the icons again.
* For the 'Cart' icon, you should see an aria-label attribute with the text "View your shopping cart".
* For the 'Login' icon, you should see an aria-label attribute with the text "Log in to your account".
* For the 'Lists' icon, you should see an updated aria-label attribute with the new text of "Lists".
* These changes will improve accessibility for users relying on screen readers.
Sign Off:
* Sign off and Have an amazing day!
Comment 4 Laura Escamilla 2024-08-07 13:45:23 UTC
Created attachment 170135 [details] [review]
Bug 37586: Added aria-label for Login icon
Comment 5 Nicolas Hunstein 2024-08-09 12:45:33 UTC
Hi Laura,

the text I see in OPAC doesn't match to the test plan.
Can you please check?
Comment 6 Laura Escamilla 2024-08-19 13:02:12 UTC
Hi Nicholas, 

Were all the labels not matching or just a specific one?
Comment 7 Nicolas Hunstein 2024-08-19 14:04:13 UTC
Hello Laura,

i don't see the new texts for all icons.
Comment 8 Lucas Gass (lukeg) 2024-08-19 16:39:13 UTC
Created attachment 170472 [details] [review]
Bug 37586: Updated aria-labels for masthead links

Update to my last comment: The Lists aria-label had an accessibility issue as the label did not match the visible text.

New test plan:

Check the OPAC Interface:
* Open the OPAC in a normal-sized browser window.
* You’ll see the text next to the 'Cart', 'Lists', and 'Login' icons clearly.
* Gradually reduce the window size until the text next to these icons disappears.
* Inspect the icon elements. You’ll find that there is no alternative text (like aria-label) provided for 'Cart' and 'Login'. The aria-label for 'Lists' does not match the visible text. It currently says "Show dropdown with detailed list information". This lack of alternative text is an accessibility issue and labels should match visible text.
Apply the Patch:
* Apply the patch
* Restart_all
Verify the Fix:
* Inspect the icons again.
* For the 'Cart' icon, you should see an aria-label attribute with the text "View your shopping cart".
* For the 'Login' icon, you should see an aria-label attribute with the text "Log in to your account".
* For the 'Lists' icon, you should see an updated aria-label attribute with the new text of "Lists".
* These changes will improve accessibility for users relying on screen readers.
Sign Off:
* Sign off and Have an amazing day!

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 9 Lucas Gass (lukeg) 2024-08-19 16:39:16 UTC
Created attachment 170473 [details] [review]
Bug 37586: Added aria-label for Login icon

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 10 Katrin Fischer 2024-08-20 12:36:33 UTC
Hm, it looks like something went wrong with the status here. I only see a sign-off from Lucas and Nicolas had trouble making the change visible (with me sitting next to him). Can we have another set of eyes please?
Comment 11 Martin Renvoize (ashimema) 2024-08-21 08:13:26 UTC
Created attachment 170530 [details] [review]
Bug 37586: Updated aria-labels for masthead links

Update to my last comment: The Lists aria-label had an accessibility issue as the label did not match the visible text.

New test plan:

Check the OPAC Interface:
* Open the OPAC in a normal-sized browser window.
* You’ll see the text next to the 'Cart', 'Lists', and 'Login' icons clearly.
* Gradually reduce the window size until the text next to these icons disappears.
* Inspect the icon elements. You’ll find that there is no alternative text (like aria-label) provided for 'Cart' and 'Login'. The aria-label for 'Lists' does not match the visible text. It currently says "Show dropdown with detailed list information". This lack of alternative text is an accessibility issue and labels should match visible text.
Apply the Patch:
* Apply the patch
* Restart_all
Verify the Fix:
* Inspect the icons again.
* For the 'Cart' icon, you should see an aria-label attribute with the text "View your shopping cart".
* For the 'Login' icon, you should see an aria-label attribute with the text "Log in to your account".
* For the 'Lists' icon, you should see an updated aria-label attribute with the new text of "Lists".
* These changes will improve accessibility for users relying on screen readers.
Sign Off:
* Sign off and Have an amazing day!

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 12 Martin Renvoize (ashimema) 2024-08-21 08:13:29 UTC
Created attachment 170531 [details] [review]
Bug 37586: Added aria-label for Login icon

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 13 Martin Renvoize (ashimema) 2024-08-21 08:13:51 UTC
Great to see this getting looked at, thanks Laura.

Passing QA
Comment 14 Katrin Fischer 2024-08-22 14:47:37 UTC
Pushed for 24.11!

Well done everyone, thank you!
Comment 15 Lucas Gass (lukeg) 2024-09-12 22:19:11 UTC
Backported to 24.05.x for upcoming 24.05.04
Comment 16 Fridolin Somers 2024-10-21 12:33:39 UTC
Pushed to 23.11.x for 23.11.10
Comment 17 Wainui Witika-Park 2024-11-04 00:01:17 UTC
Not backporting to 23.05.x unless requested