Bug 28140 - Accessibility: OPAC - "sort_by" select isn't labelled on search results page
Summary: Accessibility: OPAC - "sort_by" select isn't labelled on search results page
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor (vote)
Assignee: Henry Bolshaw
QA Contact: Testopia
URL:
Keywords: Academy, accessibility
Depends on:
Blocks:
 
Reported: 2021-04-13 10:31 UTC by Henry Bolshaw
Modified: 2021-12-13 21:11 UTC (History)
3 users (show)

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


Attachments
Bug 28140: Accessibility: OPAC - "sort_by" select isn't labelled on search results page (1.69 KB, patch)
2021-04-13 11:18 UTC, Henry Bolshaw
Details | Diff | Splinter Review
Bug 28140: Accessibility: OPAC - "sort_by" select isn't labelled on search results page (1.74 KB, patch)
2021-04-14 10:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28140: Accessibility: OPAC - "sort_by" select isn't labelled on search results page (1.80 KB, patch)
2021-04-16 14:12 UTC, Martin Renvoize
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-13 10:31:10 UTC
The <select> element used to sort search results on the OPAC search results page (opac-search.pl) isn't labelled. This makes it harder for users of screen readers and other assistive technologies to identify the purpose of the sort function.


<select id="sort_by" class="resort form-control form-control-sm" name="sort_by">

should become:

<label for="sort_by" class="sr-only">Sort by:</label>
<select id="sort_by" class="resort form-control form-control-sm" name="sort_by">

We should add a <label> with class .sr-only to identify this to screenreaders only because the purpose of the sort function is clear from visual context. (We could use an aria-label instead of <label> but the 'first rule of ARIA' is to use native HTML where possible:

"2.1 First Rule of ARIA Use
If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."
(From https://www.w3.org/TR/using-aria/#firstrule)
Comment 1 Henry Bolshaw 2021-04-13 11:18:08 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2021-04-14 10:28:28 UTC Comment hidden (obsolete)
Comment 3 Martin Renvoize 2021-04-16 14:12:24 UTC
Created attachment 119750 [details] [review]
Bug 28140: Accessibility: OPAC - "sort_by" select isn't labelled on search results page

This patch adds a label to the sort function on the OPAC
results page to provide context to screen readers and improve
accessibility.

The label is visually hidden and does not change how the page
displays.

To test:
- Search for something on the OPAC
- Change how the results are sorted and confirm sort still works
- Confirm that there are no visual changes to the page
- Inspect the sort function to confirm it now has a label
- Ideally confirm the label works with a screenreader

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 4 Martin Renvoize 2021-04-16 14:12:57 UTC
Nice one Henry!

Passing QA
Comment 5 Jonathan Druart 2021-04-16 14:31:38 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 6 Fridolin Somers 2021-04-29 09:35:49 UTC
Pushed to 20.11.x for 20.11.06
Comment 7 Andrew Fuerste-Henry 2021-05-24 15:19:58 UTC
Doesn't apply cleanly to 20.05. Please rebase if needed.