Bug 40330 - Accessibility of the OPAC Labels
Summary: Accessibility of the OPAC Labels
Status: Pushed to stable
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement
Assignee: Nina Martinez
QA Contact: Emily Lamancusa (emlam)
URL:
Keywords:
Depends on:
Blocks: 23003
  Show dependency treegraph
 
Reported: 2025-07-08 15:06 UTC by Nina Martinez
Modified: 2025-07-24 08:20 UTC (History)
5 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
25.11.00,25.05.02
Circulation function:


Attachments
Bug 40330: Conform and add labels to the OPAC (17.64 KB, patch)
2025-07-08 15:21 UTC, Nina Martinez
Details | Diff | Splinter Review
Bug 40330: Conform and add labels to the OPAC (17.75 KB, patch)
2025-07-09 12:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40330: Conform and add labels to the OPAC (17.80 KB, patch)
2025-07-11 14:46 UTC, Emily Lamancusa (emlam)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Nina Martinez 2025-07-08 15:06:13 UTC
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the <label> element.

Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls.

A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control.

We can improve the labelling of the OPAC to provide the label as a clickable area. 

https://www.w3.org/WAI/tutorials/forms/labels/
Comment 1 Nina Martinez 2025-07-08 15:21:35 UTC
Created attachment 183868 [details] [review]
Bug 40330: Conform and add labels to the OPAC

Test plan:

Enable the system preference: marcflavour: choose UNIMAR, PrivacyPolicyConsent, ILLModule, TagsEnabled, OpacCloud.

1- Apply the patch
2- Go to the OPAC, log in to a patron account. Go to personal details, check the html code of the date of birth field, and notice that there is a aria-hidden="false".
3- Inspect the search bar, and notice in the library select, there is a label with a for attribute which match the id.
4- Search a record, click on "save to list" and check the Category select, inspect if the label has a for attribute and match the select id.
5- Go to interlibrary Loan Request in the user menu, Check if the "Note" field has a label for attribute which match the id.
6- Go to Consent, check if the checkbox has a label for "Yes" and "No".
7- Go to Suggestions and check that the checkbox has the same id as the label in the Summary column.
8- Go to "Tag Cloud", inspect the HTML code of the "Tags to show from other users" label, notice that there is a for attribute which match the id of the input tag. and check if in the html code there is an aria-label with the term of the tag.
9- Go to Subject Cloud, check the html code, and notice that there is a label that surounds the input tag.
10- Go to Advanced Search, click on "More options", and check that all the additional options have a label with a for attribute which match the id of the select.
Comment 2 Owen Leonard 2025-07-09 12:31:00 UTC
Created attachment 183890 [details] [review]
Bug 40330: Conform and add labels to the OPAC

Test plan:

Enable the system preference: marcflavour: choose UNIMAR,
PrivacyPolicyConsent, ILLModule, TagsEnabled, OpacCloud.

1- Apply the patch
2- Go to the OPAC, log in to a patron account. Go to personal details,
   check the html code of the date of birth field, and notice that there
   is a aria-hidden="false".
3- Inspect the search bar, and notice in the library select, there is a
   label with a for attribute which match the id.
4- Search a record, click on "save to list" and check the Category
   select, inspect if the label has a for attribute and match the select
   id.
5- Go to interlibrary Loan Request in the user menu, Check if the "Note"
   field has a label for attribute which match the id.
6- Go to Consent, check if the checkbox has a label for "Yes" and "No".
7- Go to Suggestions and check that the checkbox has the same id as the
   label in the Summary column.
8- Go to "Tag Cloud", inspect the HTML code of the "Tags to show from
   other users" label, notice that there is a for attribute which match
   the id of the input tag. and check if in the html code there is an
   aria-label with the term of the tag.
9- Go to Subject Cloud, check the html code, and notice that there is a
   label that surounds the input tag.
10- Go to Advanced Search, click on "More options", and check that all
    the additional options have a label with a for attribute which match
    the id of the select.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 3 Emily Lamancusa (emlam) 2025-07-11 14:46:06 UTC
Created attachment 183999 [details] [review]
Bug 40330: Conform and add labels to the OPAC

Test plan:

Enable the system preference: marcflavour: choose UNIMAR,
PrivacyPolicyConsent, ILLModule, TagsEnabled, OpacCloud.

1- Apply the patch
2- Go to the OPAC, log in to a patron account. Go to personal details,
   check the html code of the date of birth field, and notice that there
   is a aria-hidden="false".
3- Inspect the search bar, and notice in the library select, there is a
   label with a for attribute which match the id.
4- Search a record, click on "save to list" and check the Category
   select, inspect if the label has a for attribute and match the select
   id.
5- Go to interlibrary Loan Request in the user menu, Check if the "Note"
   field has a label for attribute which match the id.
6- Go to Consent, check if the checkbox has a label for "Yes" and "No".
7- Go to Suggestions and check that the checkbox has the same id as the
   label in the Summary column.
8- Go to "Tag Cloud", inspect the HTML code of the "Tags to show from
   other users" label, notice that there is a for attribute which match
   the id of the input tag. and check if in the html code there is an
   aria-label with the term of the tag.
9- Go to Subject Cloud, check the html code, and notice that there is a
   label that surounds the input tag.
10- Go to Advanced Search, click on "More options", and check that all
    the additional options have a label with a for attribute which match
    the id of the select.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov>
Comment 4 Lucas Gass (lukeg) 2025-07-11 21:29:52 UTC
Nice work everyone!

Pushed to main for 25.11
Comment 5 Paul Derscheid 2025-07-24 08:20:39 UTC
Nice work everyone!

Pushed to 25.05.x