Skiplink moves focus to before the phase banner

[tombye]

The <main> tag currently wraps both the main content area and the phase banner. This means when moving through pages by keyboard only using the skiplink you have to pass the phase banner every time.

I suggest we replace the <main> tag with a wrapper div to establish the central column and start <main> after the phase banner instead, as a child of the wrapper div. This would allow users to skip directly to the page content.

There would have to be some debate around whether or not to move the breadcrumbs outside of <main> too. www.gov.uk does this but I'm unsure it's the best approach as they can be specific to the page and the purpose of skiplinks is to allow keyboard users to avoid content repeated across pages.

[robinwhittleton]

Yeah, I don’t agree that breadcrumbs should be outside <main>. For the phase banner specifically on elements, that should just be removed. At version 2.1.0 we’re definitely outside alpha. For the more general problem of a wrapper element, that’s presumably a problem that govuk_template will need to solve?

[edwardhorsford]

To me it makes sense for it to be outside of main, or at the very least for the skip link to go directly to the content and not to any breadcrumbs.

I wonder what @aduggin thinks.

[aduggin]

I agree with Ed and Tom - skip links should take you directly to the main content.

It recommends this here: https://www.w3.org/TR/WCAG20-TECHS/G1.html
"The objective of this technique [skip links] is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page"

and

"Example 2: A "Skip to main content" link
A Web page includes a variety of navigation techniques on each page: a bread crumb trail, a search tool, a site map, and a list of related resources. The first link on the page is titled "Skip to Main Content". A user activates the link to skip over the navigation tools."

[gemmaleigh]

The removal of the phase banner from GOV.UK elements has fixed part of this issue, however, the breadcrumb links sit within the <main> content area.

A solution to this would be to add a parent wrapper div to constrain the main content area using the frontend toolkit's site-width-container placeholder and to move the breadcrumb out of <main> and into this parent wrapper.

It would also be useful to add this information about where we expect the phase banner and breadcrumb to be to the govuk_template docs - as this is where we already have guidance for setting a skiplink to #content.

[accessiblewebuk]

I agree that the skip link should go to the main content and breadcrumbs should be outside that. Some sites have more than one skip link, but if we don't want to go down that route "skip to main content" should bypass all navigation.

[gemmaleigh]

I'd like to close this issue if possible.

The phase banner was removed from GOV.UK elements, it fixed part of this issue.

Is there agreement that the breadcrumb should sit outside of the <main> element? To match GOV.UK? If there is, I will add a wrapper to the <main element and move the breadcrumb there, otherwise, I will leave it where it is and close this issue.

Please let me know which you would prefer @aduggin, @accessiblewebuk, @tombye.

[accessiblewebuk]

Yes, I still think that the breadcrumbs should be outside the

and matching gov.uk is important for consistency.