search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

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

Closed jonnywyatt closed 2 years ago

jonnywyatt commented 3 years ago

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

- https://github.com/alphagov/govuk-design-system-backlog/issues/66#issuecomment-411673528

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 commented 3 years ago

https://user-images.githubusercontent.com/471250/114539888-d894a580-9c4c-11eb-8d92-f1b95c24f98d.mov

36degrees commented 3 years ago

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

vanitabarrett commented 3 years ago

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

vanitabarrett commented 3 years ago

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 commented 2 years ago

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:

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 commented 2 years ago

Re-opening this to look again at https://github.com/alphagov/govuk-frontend/pull/2450#pullrequestreview-825124287

vanitabarrett commented 2 years ago

Skip link JavaScript implementation was iterated in https://github.com/alphagov/govuk-frontend/pull/2467