govuk-frontend: Axe issue: "All page content must be contained by landmarks"

Hello šŸ‘‹

Weā€™ve noticed for a while that prototype kit and GOV.UK Frontend examples keep the ā€œBackĀ linkā€ and ā€œPhaseĀ bannerā€ outside landmark regions.

i.e. Theyā€™re not in a <header>, <footer> or <main>.

This throws up moderate issues in axe: https://dequeuniversity.com/rules/axe/3.3/region?application=AxeChrome

Components not in <main> or <header>

This example shows showing both components outside regions:
http://govuk-frontend-review.herokuapp.com/full-page-examples/upload-your-photo

Components outside  main

But the ā€œBreadcrumbsā€ component is in <main>

This example shows breadcrumbs inside a region:
http://govuk-frontend-review.herokuapp.com/full-page-examples/renew-driving-licence

Breadcrumbs component inside  main

Hereā€™s what we see in the axe sidebar when follow the examples (with ā€œBackĀ linkā€ and ā€œPhaseĀ bannerā€ outside landmark regions):

Axe report

It would be great to see the research behind when to use a landmark or not.

Should this be logged under https://github.com/alphagov/govuk-frontend/issues/1280#issuecomment-509588851?

Thanks

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Comments: 16 (12 by maintainers)

Commits related to this issue

Most upvoted comments

We should consider the skip link component as part of this issue, but worth noting that Deque themselves say:

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

Just to clarify, the ā€˜govuk-frontend-reviewā€™ application is not intended to be guidance and contains intentionally legacy and therefore out of date patterns for test the ā€˜compatibility modeā€™.

So thatā€™s the reason why one of the examples in there is wrong.

In the official guidance on the Design System website we intentionally do not have the phase banner, back links, or breadcrumbs in the ā€˜mainā€™ element.

This is for two reasons I know of:

  • the skip link is less useful if it does not skip the phase banner, back links and breadcrumbs
  • too many navigation landmarks on GOV.UK have been reported to be an issue so we intentionally have removed some navigation landmarks in order to make it clear what the main navigation is.

I donā€™t have the original research for the latter decision, but will ask around and see if I can dig it up.

Will leave this in triage for us to decide as a team what direction we want to take, thanks a lot for raising this Iā€™m sure others will run into this too.