Accessibility issue in the header

[SalarGhotaslo]

Description of the issue

The .govuk-skip-link in the template component is causing an accessibility issue that states page content is not contained by landmarks.

Steps to reproduce the issue

On the https://design-system.service.gov.uk/ if you inspect the page then --> go on Axe dev tools --> Scan page --> then you'll see something similar to the screenshot below. You can then highlight the issue by clicking on the All page content should be contained by landmarks and then clicking the highlight.

Actual vs expected behavior

I would expect there to be no accessibility issue.

Environment (where applicable)

The issue can be seen on the https://design-system.service.gov.uk/ webpage so it is on the latest one.

We found it happen when trying to add the cookie banner component into our project, it seemed to then expose this issue. We can see that this issue wouldn't happen if the govuk-skip-link was inside the header component rather than inside the template component.

• Operating system:
• Browser:
• Browser version:
• GOV.UK Frontend Version:

[querkmachine]

Hi @SalarGhotaslo.

I'm going to close this as it appears to be a duplicate of #1604.

Interestingly, documentation from Deque (who make Axe) seems to indicate that skip links do not have to be within a landmark region, so no changes may be necessary here. (Emphasis mine.)

It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer.

Feel free to follow up on #1604 if you have more information to share.

[SalarGhotaslo]

Thanks for the prompt response! Will have a read