Bug 28242 - Accessibility: OPAC - add captions and legends to tables and forms
Summary: Accessibility: OPAC - add captions and legends to tables and forms
Status: Pushed to stable
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low minor (vote)
Assignee: wainuiwitikapark
QA Contact: Tomás Cohen Arazi
URL:
Keywords:
Depends on: 27740 27610 27876
Blocks:
  Show dependency treegraph
 
Reported: 2021-04-28 04:20 UTC by wainuiwitikapark
Modified: 2021-11-04 12:05 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
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


Attachments
Bug 28242: added captions to tables and legends to forms (58.10 KB, patch)
2021-05-19 03:12 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 28242: added captions to tables and legends to forms (58.16 KB, patch)
2021-05-19 21:59 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 28242: added captions to tables and legends to forms (57.90 KB, patch)
2021-06-14 18:43 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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