After clicking "Skip to main content", focus isn't sent to the content so screenreader can't read from there

[jonnywyatt]

Description of the issue

gov.uk "Skip to main content" links to the https://www.gov.uk/#content anchor but doesn't send focus to that element, so if I then try to read from that point using Voiceover with VO + right arrow, I'm still in the top banner. It feels to me like a screen reader should be able to start reading again from the anchor point. You can press tab to go to the next focusable element, but there might not be any in the content area, you might just want to read from that point.

I noticed some discussion about adding then reverting tabindex on

- alphagov/govuk-design-system-backlog#66 (comment)

Do you consider that the two problems with tabindex identified by @fofr are bigger issues than not being able to read from the anchor point, if tabindex isn't used?

Steps to reproduce the issue

1. on www.gov.uk, tab to "Skip to main content" and press it
2. Use VO + right arrow to attempt to read the main content

Actual vs expected behaviour

Expected - Voiceover reads the first element in the content panel
Actual - Voiceover continues reading from the banner

Environment (where applicable)

• Operating system: Mac OS Catalina 10.15.6
• Browser: Safari
• Browser version: 14.0 (15610.1.28.1.9, 15610)
• GOV.UK Frontend Version: live site

Done when

• TBC
• "Details of breaking change" section below completed to help with writing release notes

Details of breaking change

• which users are affected: TBC
• the change that’s been made: TBC
• changes users will have to make: TBC
• impact of users not making those changes: TBC

[jonnywyatt]

2021-04-13-gov-uk-skip-link.mov

[36degrees]

I think this might involve a breaking change, so attaching this to the 4.0 milestone for consideration.

[vanitabarrett]

Relevant article: https://axesslab.com/skip-links/ which also links to Anika's solution

[vanitabarrett]

As discussed during v4 prioritisation, we should investigate the solution to this and see if 1) it involves a breaking change and what changes users will need to make; 2) if it tests well in different browsers.

[hannalaakso]

I can replicate the Mac VoiceOver issue raised by @jonnywyatt 👍

Proposed fix

I’ve tested a fix modelled on a solution flagged by @selfthinker.

My branch is here if you want to test it: https://github.com/alphagov/govuk-frontend/compare/focus-skip-link-target?expand=1 (I've been testing on /full-page-examples/announcements)

The fix:

• makes the content element focusable by adding tabindex to it and then moving focus to it programmatically
• overrides the native focus outline to none whilst tabindex is present
• on blur, removes the tabindex and the style override

What teams would need to do to implement this

Adding the fix to a service would involve a breaking change since teams would need to add data-module="govuk-skip-link" to their skip link markup (if they're using the HTML version of the component). They would also need to import the skip link JavaScript if they're importing the JS for individual components.

If a team failed to make required changes, they wouldn't benefit from the fix but their skip links would still continue to work.

Results from testing the fix

It seems to solve the issue in Mac VoiceOver: when the user activates the skip link, VoiceOver now announces the main element. If the user then tries to read the next element, VoiceOver now correctly continues reading from the main content.

There also seems to be an improvement to the announcements on JAWS (both with Chrome and IE11): JAWS now announces it's on the main region, before it starts reading the main content.

Behaviour	Announces skip link when it's navigated to	Announces main has been navigated to	Reads out content of main
JAWS 2020 / Chrome	same page link skip to main content	enter main region main region page has 4 regions and 8 headings <main content>	enter main region main region page has 4 regions and 8 headings <main content>
JAWS 2020 / IE 11	skip to main content same page link	enter main region page has 4 regions and 8 headings <main content>	enter main region page has 4 regions and 8 headings <main content>
NVDA 2021.1/ Firefox 90	skip to main content link	main landmark <main content>	main landmark <main content>
Voiceover / Safari (macOS Mojave)	skip to main content, link	main you are currently on a text area	<main content>
Voiceover / Safari (iOS 15)	Skip to main content, in-page link	After double-tapping to follow link: "Press release, main landmark"	After double-tapping to follow link: "Press release, main landmark"
Talkback / Chrome 96 (Android 11)	skip to main content, link	After double-tapping to follow link: "main, Press release, "	After double-tapping to follow link: "main, Press release, "

(Announcements that have changed from the live version are in bold ^)

My test results also seem to match with https://scottaohara.github.io/testing/skip-link/testing.html

I haven’t yet been able to test this on iOS VoiceOver and Android TalkBack to check for any regressions in the screen reader announcements (also re: TalkBack, it’s not clear if this bug has been fixed - although this suggests it might be). @vanitabarrett @36degrees have kindly checked that there have been no changes to announcements in iOS VoiceOver and Android Talkback - testing results added to the tables.

Current behaviour, for comparison

Behaviour	Announces skip link when it's navigated to	Announces main has been navigated to	Reads out content of main
JAWS 2020 / Chrome	same page link skip to main content	enter <main content>	enter <main content>
JAWS 2020 / IE 11	has tabbing once after page load to bring up the skip link ever worked on IE11? (when tabbing backwards, 'skip to main content same page link' read out)	enter page has 4 regions and 8 headings <main content>	enter page has 4 regions and 8 headings <main content>
NVDA 2021.1/ Firefox 90	has tabbing once after page load to bring up the skip link ever worked on FF? (when tabbing backwards, 'skip to main content link' read out)	main landmark	main landmark <main content>
Voiceover / Safari (macOS Mojave)	skip to main content, link	-	banner you are currently on a banner
Voiceover / Safari (iOS 15)	Skip to main content, in-page link	After double-tapping to follow link: "Press release, main landmark"	After double-tapping to follow link: "Press release, main landmark"
Talkback / Chrome 96 (Android 11)	skip to main content, link	After double-tapping to follow link: "main, Press release, "	After double-tapping to follow link: "main, Press release, "

Reported issue with focus returning to top of page

I haven’t been able to replicate the previously reported issue where focus returned to the top of the page . @selfthinker suggests that it isn't applicable since we remove the tabindex on blur.

Testing results spreadsheet (same as the above tables)

[hannalaakso]

Re-opening this to look again at #2450 (review)

[vanitabarrett]

Skip link JavaScript implementation was iterated in #2467