Bug 22807 - Accessibility: Add 'Skip to main content' link
Summary: Accessibility: Add 'Skip to main content' link
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Martin Renvoize
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 28469 34542
  Show dependency treegraph
 
Reported: 2019-04-30 02:02 UTC by Hayley Pelham
Modified: 2023-08-16 12:55 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This accessibility enhancement adds a hidden 'Skip to main content' link to the OPAC which will appear if a user uses 'tab' keyboard navigation.
Version(s) released in:
20.11.00, 20.05.02, 19.11.08


Attachments
Bug 22807: Add 'Skip to content' option (2.70 KB, patch)
2020-06-09 13:15 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 22807: Add 'Skip to content' option (2.14 KB, patch)
2020-06-09 14:10 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 22807: Add 'Skip to content' option (3.73 KB, patch)
2020-06-10 09:55 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 22807: Add 'Skip to content' option (3.73 KB, patch)
2020-06-10 15:59 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 22807: Ensure only one maincontent on searcresults (1.87 KB, patch)
2020-06-10 15:59 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 22807: Ensure .maincontent appears on all pages (29.95 KB, patch)
2020-06-10 15:59 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 22807: (follow-up) Add .maincontent class to libraries page (3.03 KB, patch)
2020-06-10 18:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22807: (follow-up) Update style of skip button (2.71 KB, patch)
2020-06-10 18:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22807: Add 'Skip to content' option (3.81 KB, patch)
2020-06-10 22:18 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 22807: Ensure only one maincontent on searcresults (1.94 KB, patch)
2020-06-10 22:19 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 22807: Ensure .maincontent appears on all pages (30.19 KB, patch)
2020-06-10 22:19 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 22807: (follow-up) Add .maincontent class to libraries page (3.09 KB, patch)
2020-06-10 22:20 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 22807: (follow-up) Update style of skip button (2.77 KB, patch)
2020-06-10 22:21 UTC, Hayley Pelham
Details | Diff | Splinter Review
Bug 22807: Add 'Skip to content' option (3.86 KB, patch)
2020-06-21 14:46 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 22807: Ensure only one maincontent on searcresults (1.99 KB, patch)
2020-06-21 14:46 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 22807: Ensure .maincontent appears on all pages (30.19 KB, patch)
2020-06-21 14:46 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 22807: (follow-up) Add .maincontent class to libraries page (3.14 KB, patch)
2020-06-21 14:46 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 22807: (follow-up) Update style of skip button (2.82 KB, patch)
2020-06-21 14:46 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 Hayley Pelham 2019-04-30 02:02:48 UTC
For keyboard only users, having a Skip to Main Content link at the beginning of the page that is visible only when on focus is useful for having to press tab or down a bunch of times to bypass the navigation bar and access the main content of the page. It would be good for Koha to have this functionality.

Link describing what is meant in more detail:
https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/

For an example of this kind of link in action (use tab once page has loaded):
https://webaim.org/
Comment 1 Hayley Pelham 2019-04-30 20:41:42 UTC
Hi Owen,

Shall I change the status of this one to Assigned? Or do you want someone else to pick it up?
Comment 2 Martin Renvoize 2020-06-09 13:15:26 UTC
Created attachment 105663 [details] [review]
Bug 22807: Add 'Skip to content' option

This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.

Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter`
5/ Note the page scrolls to the area of the page that has the #maincontent id.
6/ Note that the link has been hidden
7/ Try tabbing around and note that the 'Skip to main content' option
does not reapper
8/ Reload the page
9/ The 'Skip to main content' should appear again upon first use of
'Tab'
10/ Signoff
Comment 3 Martin Renvoize 2020-06-09 13:16:52 UTC
Initial submission; could probably do with some refinement.. please test and let me know what you think.
Comment 4 Martin Renvoize 2020-06-09 14:10:58 UTC
Created attachment 105664 [details] [review]
Bug 22807: Add 'Skip to content' option

This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.

Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter`
5/ Note the page scrolls to the area of the page that has the #maincontent id.
6/ Note that the link has been hidden
Comment 5 Martin Renvoize 2020-06-09 16:15:42 UTC
Right.. so what this now needs is a consensus on each page as to what we should mark as 'maincontent'..

So far these pages are missing such a class:

opac-alert-subscribe.tt
opac-sendbasket.tt
opac-basket.tt
clubs/clubs-tab.tt
clubs/enroll.tt
sco/printslip.tt
sco/sco-main.tt
sco/help.tt
opac-results-grouped.tt
errors/errorpage.tt
opac-course-details.tt
opac-downloadcart.tt
opac-showreviews-rss.tt
opac-memberentry-update-submitted.tt
opac-registration-invalid.tt
opac-imageviewer.tt
opac-mymessages.tt
ilsdi.tt
opac-reserve.tt
opac-main.tt
sci/sci-main.tt
opac-addbybiblionumber.tt
opac-memberentry.tt
opac-idref.tt
opac-blocked.tt
opac-password-recovery.tt
opac-browser.tt
opac-registration-confirmation.tt
opac-browse.tt
opac-serial-issues.tt
opac-patron-consent.tt
opac-tags_subject.tt
text/explodedterms.tt
opac-sendshelf.tt
opac-request-article.tt
opac-retrieve-file.tt
opac-sendshelfform.tt
opac-course-reserves.tt
svc/shelfbrowser.tt
svc/suggestion.tt
opac-shelves-rss.tt
opac-privacy.tt
opac-registration-email-sent.tt
opac-ics.tt
opac-messaging.tt
opac-opensearch.tt
opac-review.tt
opac-passwd.tt
opac-sendbasketform.tt
opac-discharge.tt
maintenance.tt
opac-showmarc.tt
opac-readingrecord.tt
opac-news-rss.tt
Comment 6 Hayley Pelham 2020-06-10 02:04:28 UTC
The main reason for wanting the 'Skip to main content' link in Koha I think is to bypass all the elements in the header such as the Cart, Lists, and Search bars.

So for example we would not need it in opac-basket.tt, and in the opac-main.tt we'd want it around the .main div where all the text from News items and main user block are.

Happy to defer to an expert as I am not one, if anyone else has thoughts!

On the patch, it would be good to make it a bit brighter and bolder so it's more obvious, as it's not only visually impaired users who are keyboard only.
Also, when I tested, the behaviour was weird and I'm not sure why, could be my internet? So will need another tester. But when I hit tab and then enter it wouldn't register for a bit, then I'd spam hit enter a couple of times and it would jump down.
Comment 7 Martin Renvoize 2020-06-10 09:55:18 UTC
Created attachment 105678 [details] [review]
Bug 22807: Add 'Skip to content' option

This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.

Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter` or Click the button
5/ Note the page scrolls to the area of the page that has the first block
   containing a .maincontent class.
6/ Note that the next available focusable element after the first .maincontent
   block has been given focus.
7/ Note that the link has been hidden
Comment 8 Martin Renvoize 2020-06-10 10:12:45 UTC
Patch updated to highlight the button more clearly and to move the focus as well as triggering a scroll event on click/enter.

As for where the '.maincontent' is set, I intend to work my way through this… I've found a few cases where we have multiple '.maincontent' classes defined on the page which feels incorrect as well as many cases where there isn't one at all. I think all pages require such a tag; At least that's how I've read a recent accessibility report one of our customers has commissioned.
Comment 9 Martin Renvoize 2020-06-10 15:59:34 UTC
Created attachment 105698 [details] [review]
Bug 22807: Add 'Skip to content' option

This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.

Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter` or Click the button
5/ Note the page scrolls to the area of the page that has the first block
   containing a .maincontent class.
6/ Note that the next available focusable element after the first .maincontent
   block has been given focus.
7/ Note that the link has been hidden
Comment 10 Martin Renvoize 2020-06-10 15:59:37 UTC
Created attachment 105699 [details] [review]
Bug 22807: Ensure only one maincontent on searcresults

Prior to this patch, if you entered a search that returned zero results,
you would end up with two 'maincontent' classes on the page
Comment 11 Martin Renvoize 2020-06-10 15:59:40 UTC
Created attachment 105700 [details] [review]
Bug 22807: Ensure .maincontent appears on all pages
Comment 12 Owen Leonard 2020-06-10 18:49:31 UTC
Created attachment 105708 [details] [review]
Bug 22807: (follow-up) Add .maincontent class to libraries page

This patch adds a missing "maincontent" class to the "all libraries"
view. Previously it was only present on the single library view.

To test, apply the patch and go to the "Libraries" page in the OPAC.

 - Hit the "tab" key to highlight the "Skip to main content" link.
 - Hit "Enter."
 - The page should scroll to the top of the list of libraries.
 - Open one of the library detail pages and confirm that the "Skip to
   main content" link works on that page too.
Comment 13 Owen Leonard 2020-06-10 18:55:47 UTC
Created attachment 105709 [details] [review]
Bug 22807: (follow-up) Update style of skip button

This patch updates the markup and style of the skip button, adapting
(i.e. stealing) the style of the skip link at https://webaim.org.

To test, apply the patch and rebuild the OPAC CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.
Comment 14 Hayley Pelham 2020-06-10 22:18:37 UTC
Created attachment 105710 [details] [review]
Bug 22807: Add 'Skip to content' option

This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.

Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter` or Click the button
5/ Note the page scrolls to the area of the page that has the first block
   containing a .maincontent class.
6/ Note that the next available focusable element after the first .maincontent
   block has been given focus.
7/ Note that the link has been hidden

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Comment 15 Hayley Pelham 2020-06-10 22:19:08 UTC
Created attachment 105711 [details] [review]
Bug 22807: Ensure only one maincontent on searcresults

Prior to this patch, if you entered a search that returned zero results,
you would end up with two 'maincontent' classes on the page

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Comment 16 Hayley Pelham 2020-06-10 22:19:37 UTC
Created attachment 105712 [details] [review]
Bug 22807: Ensure .maincontent appears on all pages

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Comment 17 Hayley Pelham 2020-06-10 22:20:20 UTC
Created attachment 105713 [details] [review]
Bug 22807: (follow-up) Add .maincontent class to libraries page

This patch adds a missing "maincontent" class to the "all libraries"
view. Previously it was only present on the single library view.

To test, apply the patch and go to the "Libraries" page in the OPAC.

 - Hit the "tab" key to highlight the "Skip to main content" link.
 - Hit "Enter."
 - The page should scroll to the top of the list of libraries.
 - Open one of the library detail pages and confirm that the "Skip to
   main content" link works on that page too.

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Comment 18 Hayley Pelham 2020-06-10 22:21:04 UTC
Created attachment 105714 [details] [review]
Bug 22807: (follow-up) Update style of skip button

This patch updates the markup and style of the skip button, adapting
(i.e. stealing) the style of the skip link at https://webaim.org.

To test, apply the patch and rebuild the OPAC CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Comment 19 Hayley Pelham 2020-06-10 22:23:58 UTC
Encountered this warning when running the QA tools:
Argument "" isn't numeric in numeric gt (>) at /home/vagrant/kohaclone/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc line 56.

Everything passed though.
Comment 20 Hayley Pelham 2020-06-10 22:24:27 UTC
Have tested in all the pages of the OPAC that I could find and all seems good.
Comment 21 Martin Renvoize 2020-06-11 06:50:35 UTC
Thanks for the followup's Owen, that styling look so much nicer :), and thanks for catching a missing case for the maincontent class :)

Thanks for the quick signoff Hayley, it's great to see work moving forward on accessibility.. I see you've been working through some of the other bugs I have already reported :).. I'm working through a rather extensive report at the moment so will be adding bugs and working through them slowly, but any help is greatly appreciated :)

Go team Koha!
Comment 22 Hayley Pelham 2020-06-11 20:49:07 UTC
Happy to help out where I can Martin! We're not so busy at the moment, so I'm trying to contribute as much as I can in those fleeting moments :)
Comment 23 Katrin Fischer 2020-06-21 14:46:29 UTC
Created attachment 106124 [details] [review]
Bug 22807: Add 'Skip to content' option

This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.

Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter` or Click the button
5/ Note the page scrolls to the area of the page that has the first block
   containing a .maincontent class.
6/ Note that the next available focusable element after the first .maincontent
   block has been given focus.
7/ Note that the link has been hidden

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 24 Katrin Fischer 2020-06-21 14:46:32 UTC
Created attachment 106125 [details] [review]
Bug 22807: Ensure only one maincontent on searcresults

Prior to this patch, if you entered a search that returned zero results,
you would end up with two 'maincontent' classes on the page

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 25 Katrin Fischer 2020-06-21 14:46:36 UTC
Created attachment 106126 [details] [review]
Bug 22807: Ensure .maincontent appears on all pages

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 26 Katrin Fischer 2020-06-21 14:46:40 UTC
Created attachment 106127 [details] [review]
Bug 22807: (follow-up) Add .maincontent class to libraries page

This patch adds a missing "maincontent" class to the "all libraries"
view. Previously it was only present on the single library view.

To test, apply the patch and go to the "Libraries" page in the OPAC.

 - Hit the "tab" key to highlight the "Skip to main content" link.
 - Hit "Enter."
 - The page should scroll to the top of the list of libraries.
 - Open one of the library detail pages and confirm that the "Skip to
   main content" link works on that page too.

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 27 Katrin Fischer 2020-06-21 14:46:44 UTC
Created attachment 106128 [details] [review]
Bug 22807: (follow-up) Update style of skip button

This patch updates the markup and style of the skip button, adapting
(i.e. stealing) the style of the skip link at https://webaim.org.

To test, apply the patch and rebuild the OPAC CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 28 Jonathan Druart 2020-06-24 13:31:42 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 29 Lucas Gass 2020-07-10 17:33:57 UTC
choosing to backport accessibility enhancement

backported to 20.05.x for 20.05.02
Comment 30 Aleisha Amohia 2020-07-13 03:53:15 UTC
backported to 19.11.x for 19.11.08
Comment 31 Victor Grousset/tuxayo 2020-07-26 14:54:24 UTC
Can't backport to 19.05.x: can't solve a conflict.
If there is an interest in having this backported, feel free to submit a patch for 19.05.
Comment 32 David Cook 2021-05-27 03:23:28 UTC
I think this button may have been misplaced.

Both of the following links seem to indicate that the "Skip to main content" link should be at the top of the page and before the navigation, but we've put it in the nav element. 
https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
https://www.w3.org/TR/WCAG20-TECHS/G1.html

I've mostly noticed this because I'm adding content above the nav bar and it's causing the "Skip to main content" button to display incorrectly. I'll open a new issue to move it.
Comment 33 David Cook 2021-05-27 03:34:04 UTC
I'm also not sure it works as quite as intended either since the focus remains at the top but I don't know enough about keyboard accessibility to comment on that...
Comment 34 Aleisha Amohia 2021-05-27 03:36:50 UTC
My understanding is that the 'Skip to main content' button should NOT show. It should be top of the page because it should be the first 'tab' when the page loads. Only when they 'tab' to the button does it then visibly show. Then triggering the button should send you to the main content, hide the button, and shift the focus to the main content.
Comment 35 David Cook 2021-05-27 03:44:18 UTC
(In reply to Aleisha Amohia from comment #34)
> My understanding is that the 'Skip to main content' button should NOT show.
> It should be top of the page because it should be the first 'tab' when the
> page loads. Only when they 'tab' to the button does it then visibly show.
> Then triggering the button should send you to the main content, hide the
> button, and shift the focus to the main content.

That's my understanding as well. I just tried again and it's working as intended in terms of focus.

The display is a bit messed up if you put content above the navbar, because the "Skip to main content" button is positioned relative to its first positioned ancestor, which looks to be the navbar. Bug 28469 fixes the positioning though.