|
Description
Hayley Pelham
2019-04-30 02:02:48 UTC
Hi Owen, Shall I change the status of this one to Assigned? Or do you want someone else to pick it up? 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 Initial submission; could probably do with some refinement.. please test and let me know what you think. 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 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 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. 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 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. 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 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 Created attachment 105700 [details] [review] Bug 22807: Ensure .maincontent appears on all pages 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. 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. 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> 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> Created attachment 105712 [details] [review] Bug 22807: Ensure .maincontent appears on all pages Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz> 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> 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> 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. Have tested in all the pages of the OPAC that I could find and all seems good. 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! 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 :) 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> 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> 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> 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> 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> Pushed to master for 20.11, thanks to everybody involved! choosing to backport accessibility enhancement backported to 20.05.x for 20.05.02 backported to 19.11.x for 19.11.08 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. 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. 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... 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. (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. |