Bug 28242

Summary: Accessibility: OPAC - add captions and legends to tables and forms
Product: Koha Reporter: wainuiwitikapark
Component: OPACAssignee: wainuiwitikapark
Status: CLOSED FIXED QA Contact: Tomás Cohen Arazi <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
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 wainuiwitikapark 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 wainuiwitikapark 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 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 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 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 wainuiwitikapark 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 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 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