Bug 28242

Summary:	Accessibility: OPAC - add captions and legends to tables and forms
Product:	Koha	Reporter:	Wainui Witika-Park <wainuiwitikapark>
Component:	OPAC	Assignee:	Wainui Witika-Park <wainuiwitikapark>
Status:	CLOSED FIXED	QA Contact:	Tomás Cohen Arazi (tcohen) <tomascohen>
Severity:	minor
Priority:	P5 - low	CC:	david, fridolin.somers, jonathan.druart, kyle, lucas, tomascohen
Version:	unspecified
Hardware:	All
OS:	All
Change sponsored?:	---	Patch complexity:	---
Documentation contact:		Documentation submission:
Text to go in the release notes:	As part of improving OPAC accessibility this change ensures that all tables have relevant captions and all forms have relevant legends - this makes navigation easier for people using a screen reader. Note: Many of the captions and legends have class="sr-only" so they are not visible, but are available for people who use a screen reader.	Version(s) released in:	21.11.00,21.05.02
Circulation function:
Bug Depends on:	27610, 27740, 27876
Bug Blocks:
Attachments:	Bug 28242: added captions to tables and legends to forms Bug 28242: added captions to tables and legends to forms Bug 28242: added captions to tables and legends to forms

Description Wainui Witika-Park 2021-04-28 04:20:25 UTC

Many of the tables, forms and other elements do not have a caption, legend or label. This is not accessible and makes it hard for navigation when using a screen-reader. However, adding these things to elements can create redundancy and appear unnecessary.

Therefore, it would be beneficial for these captions/legends/labels to be in the class "sr-only" so that they are not visible, they are just available for those who use screen readers.

Comment 1 Wainui Witika-Park 2021-05-19 03:12:33 UTC

Created attachment 121140 [details] [review]
Bug 28242: added captions to tables and legends to forms

Ensured that in the OPAC, all tables have relevant captions and all forms have relevant legends.

Many of these have class="sr-only" so they are not visible but will be
available for people who use screen-readers.

To test:
1) Go to OPAC
2) Apply patch and dependencies
3) Check that on all pages, any tables have a caption (many of them will
    not be visible, but will be in the markup code)
4) Check that on all pages, any forms have a legend (many of them will
    not be visible, but will be in the markup code)
5) Check that the captions are appropriate and relevant
6) Check that the legends are appropriate and relevant

Sponsored-by: Catalyst IT

Comment 2 Lucas Gass (lukeg) 2021-05-19 21:59:44 UTC

Created attachment 121203 [details] [review]
Bug 28242: added captions to tables and legends to forms

Ensured that in the OPAC, all tables have relevant captions and all forms have relevant legends.

Many of these have class="sr-only" so they are not visible but will be
available for people who use screen-readers.

To test:
1) Go to OPAC
2) Apply patch and dependencies
3) Check that on all pages, any tables have a caption (many of them will
    not be visible, but will be in the markup code)
4) Check that on all pages, any forms have a legend (many of them will
    not be visible, but will be in the markup code)
5) Check that the captions are appropriate and relevant
6) Check that the legends are appropriate and relevant

Sponsored-by: Catalyst IT

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Comment 3 Lucas Gass (lukeg) 2021-05-19 22:01:11 UTC

This is a very nice improvement to overall OPAC accessibility.
I checked the following templates and, to me, everything looks good:

clubs/clubs-tab.tt
clubs/enroll.tt
opac-MARCdetail.tt
opac-authoritiessearchresultlist.tt
opac-basket.tt
opac-browse.tt
opac-browser.tt
opac-course-details.tt
opac-course-reserves.tt
opac-detail.tt
opac-downloadshelf.tt
opac-full-serial-issues.tt
opac-holdshistory.tt
opac-idref.tt
opac-illrequests.tt
opac-issue-note.tt
opac-main.tt
opac-messaging.tt
opac-passwd.tt
opac-password-recovery.tt
opac-patron-consent.tt
opac-privacy.tt
opac-readingrecord.tt
opac-reportproblem.tt
opac-request-article.tt
opac-reserve.tt
opac-results.tt
opac-review.tt
opac-routing-lists.tt
opac-search-history.tt
opac-sendbasketform.tt
opac-sendshelfform.tt
opac-serial-issues.tt
opac-shareshelf.tt
opac-shelves.tt
opac-showreviews.tt
opac-suggestions.tt
opac-user.tt
sci/sci-main.tt
sco/sco-main.tt

Comment 4 Tomás Cohen Arazi (tcohen) 2021-06-12 13:04:08 UTC

I'm not familiar with accessibility guidelines, but understand this changes. I would like to know if this is on purpose. In this case, the <h2> tag is removed in the resulting caption:

-   <div id="opac-user-fines">  <h2>Credits</h2>
+   <div id="opac-user-fines">
        <table class="table table-bordered table-striped">
+       <caption>Credits</caption>

but in some others it is kept:

-   <h2>Results</h2>
    <table id="sci_bcheckins_table" class="table table-bordered table-striped dataTable no-footer">
+     <caption><h2>Results</h2></caption>

Maybe there's a reason, but I would like it commented on the commit message, unless it needs to be fixed for consistency.

Great work BTW!

Comment 5 Wainui Witika-Park 2021-06-13 04:27:05 UTC

(In reply to Tomás Cohen Arazi from comment #4)
> I'm not familiar with accessibility guidelines, but understand this changes.
> I would like to know if this is on purpose. In this case, the <h2> tag is
> removed in the resulting caption:
> 
> -   <div id="opac-user-fines">  <h2>Credits</h2>
> +   <div id="opac-user-fines">
>         <table class="table table-bordered table-striped">
> +       <caption>Credits</caption>
> 
> but in some others it is kept:
> 
> -   <h2>Results</h2>
>     <table id="sci_bcheckins_table" class="table table-bordered
> table-striped dataTable no-footer">
> +     <caption><h2>Results</h2></caption>
> 
> Maybe there's a reason, but I would like it commented on the commit message,
> unless it needs to be fixed for consistency.
> 
> Great work BTW!

Hi Tomás,

Thank you for your comment!

Yes I understand this is quite confusing.

Basically Koha is set up without a lot of accessibility in mind and there is a lot of inconsistency. Therefore, I sort of just chose to do things on a case by case basis and sometimes it is unnecessary to have headings, and sometimes it makes sense to have both captions and headings.

I will make a point to try and document these decisions more.

Thanks!

Comment 6 Tomás Cohen Arazi (tcohen) 2021-06-14 18:43:33 UTC

Created attachment 121924 [details] [review]
Bug 28242: added captions to tables and legends to forms

Ensured that in the OPAC, all tables have relevant captions and all forms have relevant legends.

Many of these have class="sr-only" so they are not visible but will be
available for people who use screen-readers.

To test:
1) Go to OPAC
2) Apply patch and dependencies
3) Check that on all pages, any tables have a caption (many of them will
    not be visible, but will be in the markup code)
4) Check that on all pages, any forms have a legend (many of them will
    not be visible, but will be in the markup code)
5) Check that the captions are appropriate and relevant
6) Check that the legends are appropriate and relevant

Sponsored-by: Catalyst IT

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Comment 7 Jonathan Druart 2021-06-21 12:04:02 UTC

Pushed to master for 21.11, thanks to everybody involved!

Comment 8 Kyle M Hall (khall) 2021-07-09 12:01:40 UTC

Considering this a bug for the sake of accessibility. Backported to 21.05.x for 21.05.02

Comment 9 Fridolin Somers 2021-08-02 20:11:35 UTC

Missing dependancies, not pushed to 20.11.x