Bug 40330

Summary: Accessibility of the OPAC Labels
Product: Koha Reporter: Nina Martinez <nina.martinez>
Component: AccessibilityAssignee: Nina Martinez <nina.martinez>
Status: Pushed to stable --- QA Contact: Emily Lamancusa (emlam) <emily.lamancusa>
Severity: enhancement    
Priority: P5 - low CC: emily.lamancusa, julian.maurice, martin.renvoize, matt.blenkinsop, oleonard
Version: unspecified   
Hardware: All   
OS: All   
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:
Bug Depends on:    
Bug Blocks: 23003    
Attachments: Bug 40330: Conform and add labels to the OPAC
Bug 40330: Conform and add labels to the OPAC
Bug 40330: Conform and add labels to the OPAC

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