Bug 25155 - Accessibility: The 'Login modal' contains semantically incorrect headings
Summary: Accessibility: The 'Login modal' contains semantically incorrect headings
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Hayley Pelham
QA Contact: Testopia
URL:
Keywords: Academy
Depends on:
Blocks: 25150
  Show dependency treegraph
 
Reported: 2020-04-15 09:38 UTC by Martin Renvoize
Modified: 2022-06-06 20:25 UTC (History)
8 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00, 20.05.03, 19.11.09, 19.05.15


Attachments
Bug 25155: Fixing semantic headings in opac-auth.tt (5.92 KB, patch)
2020-06-11 01:18 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 25155: Fixing semantic headings in opac-auth.tt (5.97 KB, patch)
2020-06-11 09:16 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25155: Fixing semantic headings login modal (2.50 KB, patch)
2020-06-11 09:16 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25155: (follow-up) Increase headings levels by 1 (5.92 KB, patch)
2020-06-11 09:16 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25155: Fixing semantic headings in opac-auth.tt (6.05 KB, patch)
2020-06-11 13:56 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 25155: Fixing semantic headings login modal (2.57 KB, patch)
2020-06-11 13:56 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 25155: (follow-up) Increase headings levels by 1 (5.99 KB, patch)
2020-06-11 13:56 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 25155: (follow-up) Increase headings levels by 1 (6.05 KB, patch)
2020-07-06 22:28 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize 2020-04-15 09:38:33 UTC
Library Catalogue - OPAC

1/ Logout of the OPAC
2/ Search for an item and attempt to reserve it
3/ The resultant login modal contained a level-three heading 'Log in to your account' that is not logical because it increases by more than one heading level. This means that screen reader users may not be able to determine the structure of content on the page.

Current Code:
<h3 id="modalLoginLabel">Log in to your account</h3>
Comment 1 Hayley Pelham 2020-06-11 01:18:07 UTC
Created attachment 105720 [details] [review]
Bug 25155: Fixing semantic headings in opac-auth.tt

Test plan:
1) Follow test plan from comment #1
2) Apply the patch
3) Reload the page, and note that is still displays fine
4) Check that the main heading is now an h1, and that the other headings
on the page make sense
Comment 2 Martin Renvoize 2020-06-11 08:06:13 UTC
Sorry.. this is another case of a somewhat misdescribed bug.. I actually think the text in the original report this came from is also incorrect.

Anyway.. the patchset does resolve a related bug which I have not yet filed... the only missing piece here is that the modal title is still an H3.. for which I'll add a followup.
Comment 3 Martin Renvoize 2020-06-11 09:16:19 UTC
Created attachment 105722 [details] [review]
Bug 25155: Fixing semantic headings in opac-auth.tt

Test plan:
1) Follow test plan from comment #1
2) Apply the patch
3) Reload the page, and note that is still displays fine
4) Check that the main heading is now an h1, and that the other headings
on the page make sense

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 4 Martin Renvoize 2020-06-11 09:16:22 UTC
Created attachment 105723 [details] [review]
Bug 25155: Fixing semantic headings login modal

The login modal headings were semantically incorrect prior to this
patch.

Test plan:
1) Click the 'Log in to your account' option to expose the modal
2) Use a headings inspector and note we jump from H1 (Page Title) -> H3
   (Modal Title)
3) Apply the patch and reload the page.
4) Click the 'Log in to your account' option to expose the modal
5) The modal should still appear well formed
6) Use a headings inspector and note we jump from H1 (Page Title) -> H2
   (Modal Title) -> H3 (Shibboleth title if enabled)

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 5 Martin Renvoize 2020-06-11 09:16:25 UTC
Created attachment 105724 [details] [review]
Bug 25155: (follow-up) Increase headings levels by 1

In the previous patch we reduced the headings levels by 2, but this was
one level too many as we already have an H1 in the navbar and so all
other heading sets should start at level 2 to semantically follow the
title heading.
Comment 6 Martin Renvoize 2020-06-11 09:21:42 UTC
I've signed off the first patch, but added two followups I'm afraid so we still need an overall signoff.

I'm using the headingsMap extension for chrome to highlight heading orders and catch errors.

According to the report, a page should only ever contain one H1 level heading, and as we use h1 in the navbar for the logo that means all sets of headings anywhere else on the page should start at level 2.. hence the final followup.

Thanks again for working on this Hayley :)
Comment 7 PTFS Europe Sandboxes 2020-06-11 13:56:47 UTC
Created attachment 105755 [details] [review]
Bug 25155: Fixing semantic headings in opac-auth.tt

Test plan:
1) Follow test plan from comment #1
2) Apply the patch
3) Reload the page, and note that is still displays fine
4) Check that the main heading is now an h1, and that the other headings
on the page make sense

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 8 PTFS Europe Sandboxes 2020-06-11 13:56:50 UTC
Created attachment 105756 [details] [review]
Bug 25155: Fixing semantic headings login modal

The login modal headings were semantically incorrect prior to this
patch.

Test plan:
1) Click the 'Log in to your account' option to expose the modal
2) Use a headings inspector and note we jump from H1 (Page Title) -> H3
   (Modal Title)
3) Apply the patch and reload the page.
4) Click the 'Log in to your account' option to expose the modal
5) The modal should still appear well formed
6) Use a headings inspector and note we jump from H1 (Page Title) -> H2
   (Modal Title) -> H3 (Shibboleth title if enabled)

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 9 PTFS Europe Sandboxes 2020-06-11 13:56:53 UTC
Created attachment 105757 [details] [review]
Bug 25155: (follow-up) Increase headings levels by 1

In the previous patch we reduced the headings levels by 2, but this was
one level too many as we already have an H1 in the navbar and so all
other heading sets should start at level 2 to semantically follow the
title heading.

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 10 Hayley Pelham 2020-06-11 21:06:17 UTC
Hi Martin,

What are your thoughts on that navbar h1?
To me semantically it doesn't feel like it makes much sense, it'll be considered empty or it'll say "logo" I think by screen readers which doesn't really inform users of the content of the page at all (if it's a screen reader people are using then the page title (tab) will be read so they'll know they're on Koha).

I'd like to propose we remove that as h1, leave it as a link.
Anyone else have input here?
Comment 11 Owen Leonard 2020-06-12 11:44:05 UTC
(In reply to Hayley Mapley from comment #10)

> I'd like to propose we remove that as h1, leave it as a link.
> Anyone else have input here?

I've gone back and forth on this issue for a long time and I think I'm coming down on your side of it now. When using VoiceOver in macOS the page context is stated clearly, as you say, by the page title. In my test the logo is read correctly--the hidden text is used instead of the image, but it's not read any differently than the other menu links.

I think it would be better to remove the H1 tag around the logo.
Comment 12 Martin Renvoize 2020-06-15 10:35:03 UTC
Agreed, though not as part of this bug ;)

Having started working through this I quickly realised I wanted to remove the H1 around the logo block.. however, I decided as that would entail touching all other templates to decrement the headers that I would instead work through doing bugfixes first and then do a followup on a final bug touching everything.

Additionally, it raised a few questions.. best practice is to only include one H1 level heading per page.. as such the Logo H1 does make a lot of sense, even if highlighting the wrong content.  If we move the H1 to the actual maincontent of each page, it raises questions regarding some of our other uses of headings markup... for example what header level should modals end up as (their title's make sense as an H1, but then you would end up with multiple H1's on the page as the 'background' H1's would still count).  What heading level would the left hand side navigation blocks end up as?
Comment 13 Katrin Fischer 2020-07-06 22:28:34 UTC
Created attachment 106618 [details] [review]
Bug 25155: (follow-up) Increase headings levels by 1

In the previous patch we reduced the headings levels by 2, but this was
one level too many as we already have an H1 in the navbar and so all
other heading sets should start at level 2 to semantically follow the
title heading.

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Jonathan Druart 2020-07-20 15:48:36 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 15 Lucas Gass 2020-07-27 16:57:47 UTC
backported to 20.05.x for 20.05.03
Comment 16 Aleisha Amohia 2020-08-03 23:02:58 UTC
backported to 19.11.x for 19.11.09
Comment 17 Victor Grousset/tuxayo 2020-09-18 20:06:35 UTC
Backported to 19.05.x branch for 19.05.15