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
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
Hereās what we see in the axe sidebar when follow the examples (with āBackĀ linkā and āPhaseĀ bannerā outside landmark regions):
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
- Move phase banner inside header to resolve aXe lanmark issue Non breaking implementation so low impact on existing users. See https://github.com/alphagov/govuk-frontend/issues/1604 for details — committed to robertparkinson/govuk-frontend by deleted user 4 years ago
- Test accessibility in `application.spec` This adds an exclusion to accessibility rules for the phase banner, as axe was failing tests for the following rule: "All page content must be contained by l... — committed to UKGovernmentBEIS/regulated-professions-register by Gweaton 2 years ago
- Test accessibility in `application.spec` This adds an exclusion to accessibility rules for the phase banner, as axe was failing tests for the following rule: "All page content must be contained by l... — committed to UKGovernmentBEIS/regulated-professions-register by Gweaton 2 years ago
- WIP Exclude phase banner from axe tests According to https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of the rule "Al... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of the rule "Al... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of the rule "Al... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of the rule "Al... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of the rule "Al... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per https://github.com/UKGovernmentBEIS/regulated-professions-register/commit/33be548361c21ff9dfd04c65d7a1b6374230fcdc this fails axe tests because of the rule "Al... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Exclude phase banner from axe tests Per [this Regulated Professions Register commit][1] this fails axe tests because of the rule "All page content must be contained by landmarks" It's unclear how th... — committed to ministryofjustice/hmpps-accredited-programmes-ui by yndajas a year ago
- Fix: Apply landmark roles to content Accessibility: All page content should be contained by landmarks Reference: https://github.com/alphagov/govuk-frontend/issues/1604 - re-enabled the AXE rule `reg... — committed to ministryofjustice/laa-apply-for-legal-aid by naseberry 9 months ago
- Fix: Apply landmark roles to content Accessibility: All page content should be contained by landmarks Reference: https://github.com/alphagov/govuk-frontend/issues/1604 - re-enabled the AXE rule `reg... — committed to ministryofjustice/laa-apply-for-legal-aid by naseberry 9 months ago
We should consider the skip link component as part of this issue, but worth noting that Deque themselves say:
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:
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.