Add docs for adding tabindex="-1" to fix the skiplink #250
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
The GOV.UK template sets a skiplink to `#content` (just tab on any GOV.UK page and hit ENTER when "Skip to main content" is highlighted). This allows users to navigate to the main content area using only the keyboard. Pressing enter when focus is on the skiplink should then set focus on the #content area. In Safari, there's a bug where this doesn't happen unless `tabindex="-1"` is set on the destination element (in this case `<main id="content">`). Here's the bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=37721 This pull request adds documentation to explain that `tabindex="-1"` is required on the `<main>` element to fix this issue.
NickColley
reviewed
Sep 21, 2016
| @@ -8,6 +8,13 @@ Refer to the table of [template blocks](./docs/template-blocks.md) and their def | |||
|
|
|||
| The [govuk_template sets a skip link](https://github.com/alphagov/govuk_template/blob/master/source/views/layouts/govuk_template.html.erb#L64-L68) to `#content`, but doesn't provide an element with `id="content"`. You'll need to add `id="content"` to your main content area, to ensure the skip link will work. | |||
|
|
|||
| <main id="content" role="main" tabindex="-1"> | |||
There was a problem hiding this comment.
Do we need the tag to be main if we've got role="main" applied? Just thinking main has to be shimmed in older browsers..
There was a problem hiding this comment.
We provide the HTML5Shiv bundled with the govuk_template JS and have added display:blockfor main to the govuk_template css.
|
Thanks @gemmaleigh 👍 |
Merged
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 2, 2016
Makes the following changes: Remove generated gov.uk from relative print links alphagov/govuk_template#234 Fix extended footer on certain pages alphagov/govuk_template#177 Degrade gracefully when external JS can’t be loaded alphagov/govuk_template#248 Add docs for adding tabindex="-1" to fix the skiplink alphagov/govuk_template#250 Logo fixes alphagov/govuk_template#237 Remove external links styles alphagov/govuk_template#231 Don’t include both html5shiv and html5shiv-printshiv alphagov/govuk_template#254 Update govuk_frontend_toolkit to 5.0.0 alphagov/govuk_template#256 Fixed scala compilation failure for play template alphagov/govuk_template#261
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 2, 2016
Makes the following changes: Remove generated gov.uk from relative print links alphagov/govuk_template#234 Fix extended footer on certain pages alphagov/govuk_template#177 Degrade gracefully when external JS can’t be loaded alphagov/govuk_template#248 Add docs for adding tabindex="-1" to fix the skiplink alphagov/govuk_template#250 Logo fixes alphagov/govuk_template#237 Remove external links styles alphagov/govuk_template#231 Don’t include both html5shiv and html5shiv-printshiv alphagov/govuk_template#254 Update govuk_frontend_toolkit to 5.0.0 alphagov/govuk_template#256 Fixed scala compilation failure for play template alphagov/govuk_template#261
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.
The GOV.UK template sets a skiplink to
#content(just tab on anyGOV.UK page and hit ENTER when "Skip to main content" is highlighted).
This allows users to navigate to the main content area using only the
keyboard. Pressing enter when focus is on the skiplink should then set
focus on the #content area.
In Safari, there's a bug where this doesn't happen unless
tabindex="-1"is set on the destination element (in this case<main id="content">).Here's the bug report.
This pull request adds documentation for adding
tabindex="-1"to the
<main>element to fix this issue.