Bug 22672 - Replace `i` tags with `em` AND `b` tags with `strong` in the OPAC
Summary: Replace `i` tags with `em` AND `b` tags with `strong` in the OPAC
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P1 - high major (vote)
Assignee: Lucas Gass
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2019-04-09 15:19 UTC by Lucas Gass
Modified: 2021-12-13 21:09 UTC (History)
8 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00, 20.05.02, 19.11.08, 19.05.13


Attachments
Bug 22672: Change <i> to <em> and <b> to <em> in templates, includes, xslt (34.55 KB, patch)
2020-05-27 22:01 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 22672: Change <i> to <em> and <b> to <strong> in templates, includes, xslt (37.92 KB, patch)
2020-06-15 09:33 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 22672: Change <i> to <em> and <b> to <strong> in templates, includes, xslt (38.04 KB, patch)
2020-06-19 08:03 UTC, Julian Maurice
Details | Diff | Splinter Review
Bug 22672: Change <i> to <em> and <b> to <strong> in templates, includes, xslt (38.12 KB, patch)
2020-06-27 23:21 UTC, Victor Grousset/tuxayo
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Lucas Gass 2019-04-09 15:19:48 UTC
Since screen readers typically ignore <i> and <b> tags. Instead we should use <em> and <strong> tags which look the same visually but are more meaningful from an accessibility standpoint.
Comment 1 Hayley Pelham 2019-04-30 04:38:11 UTC
Hi Lucas,

You are listed as the assignee but the bug status is not Assigned. Do you need someone else to take this or did you just forget to change the status?
Comment 2 Lucas Gass 2019-04-30 14:20:55 UTC
Thanks Hayley, 

I'll take it, I forgot to change the status.
Comment 3 Timothy Alexis Vass 2020-05-26 13:51:43 UTC
Changed to Importance: P1 - high / Critical as all 100+ library sites in Sweden are required to comply with something called Webbtillgänglighetsdirektivet (Web Accessibility Directive) by 23rd September 2020.
Comment 4 Jonathan Druart 2020-05-27 10:32:40 UTC
Lowering to major, sorry Timothy but that does not sound critical to me.

Any news on this Lucas?
Comment 5 Lucas Gass 2020-05-27 14:10:21 UTC
I will have a patch very soon.
Comment 6 Lucas Gass 2020-05-27 22:01:01 UTC
Created attachment 105405 [details] [review]
Bug 22672: Change <i> to <em> and <b> to <em> in templates, includes, xslt

This patch attempts to replace <i> with <em> AND <b> with <strong> in order to more accessible to screen readers. This patch makes no attempt to change Font Awesome icons which typically use <i>. I found templates, includes and XSLT by using 'git grep ‘<b>’ koha-tmpl/opac-tmpl/bootstrap/en/' and git grep ‘<i>’ koha-tmpl/opac-tmpl/bootstrap/en/

TEST PLAN:
There should be no visible difference on the changed pages. The files changed are:
koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-note.inc
koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-opensearch.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results-grouped.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
koha-tmpl/opac-tmpl/bootstrap/en/xslt/MARC21slim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/NORMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/UNIMARCslim2OPACResults.xsl

Read the changes and make sure everything looks correct, try to visit as many pages as possible and confirm that everything looks as it should.
grep around for cases  of <b> or <i> that I could have missed.
Comment 7 Victor Grousset/tuxayo 2020-05-28 18:55:44 UTC
> I found templates, includes and XSLT by using 'git grep ‘<b>’ koha-tmpl/opac-tmpl/bootstrap/en/' and git grep ‘<i>’ koha-tmpl/opac-tmpl/bootstrap/en/

Case not caugh by the grep:

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
298:                                                    [% IF ( ISSUE.onsite_checkout ) %] <i class="onsite_checkout">(On-site checkout)</i>[% END %]
Comment 8 Katrin Fischer 2020-05-28 21:38:40 UTC
I am not sure what the best way to check would be, but can we rule out that these tags are used as selectors in Javascript/jQuery and or CSS?
Comment 9 Victor Grousset/tuxayo 2020-05-29 02:08:11 UTC Comment hidden (obsolete)
Comment 10 Victor Grousset/tuxayo 2020-05-29 02:25:50 UTC Comment hidden (obsolete)
Comment 11 Victor Grousset/tuxayo 2020-05-29 18:42:08 UTC
> Replace <i> tags with <em> AND <b> tags with <strong> in the OPAC

> in the OPAC

Oooooow, I missed that!

Shall I create another ticket about the staff interface?
Comment 12 Timothy Alexis Vass 2020-06-09 09:23:43 UTC
It's definitely fine to replace <b> and <i> in both OPAC and STAFF.

Is this ready to be implemented?
Comment 13 Victor Grousset/tuxayo 2020-06-13 17:59:53 UTC
(In reply to Timothy Alexis Vass from comment #12)
> It's definitely fine to replace <b> and <i> in both OPAC and STAFF.

This can totally cause the whole thing to stop due to lack of time. Even if the OPAC part is almost done. Because the staff interface adds much more work and there are not the same strong requirements of accessibility as for the OPAC.

So I'll split this ticket so the OPAC has a chance to move on.

> Is this ready to be implemented?

Anyone that have some time for this can update the current patch add the missing case. I'll see if in the mess I've found there is something related to the OPAC.
Comment 14 Victor Grousset/tuxayo 2020-06-14 18:59:14 UTC
Here is another case in the OPAC

koha-tmpl/opac-tmpl/xslt/OAI.xslt
146:                <td><b>Repository Name</b></td>
151:                    <td><b>E-Mail Contact</b></td>
163:                <td><b>Repository identifier</b></td>
169:                <td><b>Sample identifier</b></td>
176:                <td><b>Protocol Version</b></td>
184:                <td><b>Earliest Registered Date</b></td>
192:                <td><b>Date Granularity</b></td>
200:                <td><b>Deletion Mode</b></td>
Comment 15 Victor Grousset/tuxayo 2020-06-14 19:02:01 UTC
Findings not related to the OPAC have been moved to bug 25744.

And comments here related to the OPAC have been marked as obsolete. Hopefully that will the work already done to move forward.
Comment 16 Victor Grousset/tuxayo 2020-06-14 19:10:32 UTC
(In reply to Katrin Fischer from comment #8)
> I am not sure what the best way to check would be, but can we rule out that
> these tags are used as selectors in Javascript/jQuery and or CSS?

The number of pages is not that big. So would it be enough for the signoff to check every page to see if there is some obvious breakage?

And more subtle stuff would be found in the rest of cycle. The benefit of being in the beginning of cycle :P
Should be take into account that we should have during this cycle the migration of the OPAC to bootstrap 4? (bug 20168). Which would allow to catch any misplacement or mistyping that wasn't detected at the signoff.
Comment 17 Timothy Alexis Vass 2020-06-15 09:33:58 UTC
Created attachment 105870 [details] [review]
Bug 22672: Change <i> to <em> and <b> to <strong> in templates, includes, xslt

This patch attempts to replace <i> with <em> AND <b> with <strong> in order to more accessible to screen readers. This patch makes no attempt to change Font Awesome icons which typically use <i>. I found templates, includes and XSLT by using 'git grep ‘<b>’ koha-tmpl/opac-tmpl/bootstrap/en/' and git grep ‘<i>’ koha-tmpl/opac-tmpl/bootstrap/en/

TEST PLAN:
There should be no visible difference on the changed pages. The files changed are:
koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-note.inc
koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-opensearch.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results-grouped.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
koha-tmpl/opac-tmpl/bootstrap/en/xslt/MARC21slim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/NORMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/UNIMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/xslt/OAI.xslt

Read the changes and make sure everything looks correct, try to visit as many pages as possible and confirm that everything looks as it should.
grep around for cases  of <b> or <i> that I could have missed.
Comment 18 Timothy Alexis Vass 2020-06-15 09:41:26 UTC
- Searched the folders bootstrap and xslt with following regular expressions, to make sure:
<b(\s.*)?>
includes all <b> and <b ...> tags

(?!.*fa)<i(\s.*.*)?>
includes all <i> and <i ...> tags
excluding any tags with font-awesome icons.

- Found the same as Victor.

- Added these changes and attached a new patch.
Comment 19 Timothy Alexis Vass 2020-06-15 13:35:58 UTC
I have looked through each occurence in each file and it's correct.
There are only <strong> and <em> tags around text and it's all simple.
Comment 20 Julian Maurice 2020-06-19 08:03:53 UTC
Created attachment 106050 [details] [review]
Bug 22672: Change <i> to <em> and <b> to <strong> in templates, includes, xslt

This patch attempts to replace <i> with <em> AND <b> with <strong> in
order to more accessible to screen readers. This patch makes no attempt
to change Font Awesome icons which typically use <i>. I found templates,
includes and XSLT by using 'git grep ‘<b>’
koha-tmpl/opac-tmpl/bootstrap/en/' and git grep ‘<i>’
koha-tmpl/opac-tmpl/bootstrap/en/

TEST PLAN:
There should be no visible difference on the changed pages. The files
changed are:
koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-note.inc
koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-opensearch.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results-grouped.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
koha-tmpl/opac-tmpl/bootstrap/en/xslt/MARC21slim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/NORMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/UNIMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/xslt/OAI.xslt

Read the changes and make sure everything looks correct, try to visit as
many pages as possible and confirm that everything looks as it should.
grep around for cases of <b> or <i> that I could have missed.

Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Signed-off-by: Julian Maurice <julian.maurice@biblibre.com>
Comment 21 Victor Grousset/tuxayo 2020-06-20 02:36:59 UTC
Thanks Timothy for completing the patch :D
Comment 22 Jonathan Druart 2020-06-24 13:40:40 UTC
Sorry, it does no longer apply. Can you rebase it?

CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
Comment 23 Victor Grousset/tuxayo 2020-06-27 23:21:15 UTC
Created attachment 106359 [details] [review]
Bug 22672: Change <i> to <em> and <b> to <strong> in templates, includes, xslt

This patch attempts to replace <i> with <em> AND <b> with <strong> in
order to more accessible to screen readers. This patch makes no attempt
to change Font Awesome icons which typically use <i>. I found templates,
includes and XSLT by using 'git grep ‘<b>’
koha-tmpl/opac-tmpl/bootstrap/en/' and git grep ‘<i>’
koha-tmpl/opac-tmpl/bootstrap/en/

TEST PLAN:
There should be no visible difference on the changed pages. The files
changed are:
koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-note.inc
koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-opensearch.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results-grouped.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
koha-tmpl/opac-tmpl/bootstrap/en/xslt/MARC21slim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/NORMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/bootstrap/en/xslt/UNIMARCslim2OPACResults.xsl
koha-tmpl/opac-tmpl/xslt/OAI.xslt

Read the changes and make sure everything looks correct, try to visit as
many pages as possible and confirm that everything looks as it should.
grep around for cases of <b> or <i> that I could have missed.

Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Signed-off-by: Julian Maurice <julian.maurice@biblibre.com>
Comment 24 Victor Grousset/tuxayo 2020-06-27 23:22:57 UTC
Conflict fixed. Double checked the diff of the file afterwards, no issues found.
Comment 25 Jonathan Druart 2020-06-29 11:50:20 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 26 Lucas Gass 2020-07-13 16:29:58 UTC
backported to 20.05.x for 20.05.02
Comment 27 Aleisha Amohia 2020-07-16 04:42:59 UTC
backported to 19.11.x for 19.11.08
Comment 28 Victor Grousset/tuxayo 2020-07-22 22:26:11 UTC
Backported to 19.05.x branch for 19.05.13