Move focus to content area on skip link activation #2438
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2438
When user activates the skip link, Mac VoiceOver currently does not announce the main content or continue reading from it. To improve the experience for Mac VoiceOver users: - make the main content element focusable by adding a `tabindex` attribute - move focus to it programmatically - override the native focus outline to none whilst `tabindex` is present - remove the `tabindex` attribute and the style override on blur This follows the pattern we already use in the error summary and notification banner components. 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, <main content>" | After double-tapping to follow link: "main, Press release, <main content>" (Announcements that have changed from the live version are in **bold** ^) See #2187 (comment) for more details
Add basic page content and initialise JavaScript for components so that the pages can be used for tests.
hannalaakso
force-pushed
the
focus-skip-link-target
branch
from
6e212f0
to
b2cf644
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2438
|
Used to generate a preview for the original investigation - closed in favour of #2450 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.