dequelabs / dequelabs/axe-core

Skip link placement: All page content should be contained by landmarks

Open
#4,240 1 comment 0 reactions 0 assignees View on GitHub
fix rules
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe-core

### Product Version

4.8.2

### Latest Version

- [X] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation

A skip link placed outside a landmark should not trigger a violation based on [region](https://dequeuniversity.com/rules/axe/4.0/region) rule, i.e. All page content should be contained by landmarks

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

#### Actual

If a skip link is not the first href defined on the page, a region violation is triggered due to the [isSkipLink check](https://github.com/dequelabs/axe-core/blob/853a8ead80757f2da51ce61effc1f31c3da653a4/lib/commons/dom/is-skip-link.js#L26).

#### How to Reproduce

1. open up [https://www.tax.service.gov.uk/help/terms-and-conditions](https://www.tax.service.gov.uk/help/terms-and-conditions)
2. you should see a cookie consent banner
3. run axe with the banner open
4. the skip link on the page won't be detected as a skip link and you will get a violation
5. close the banner (i.e. click reject additional cookies, click hide cookies message)
6. rerun axe
7. the skip link is correctly detected and you will not get a violation

#### Additional context

The skip link is placed after the cookie banner as per [GOV.UK design system guidance on Cookie Banner placement](https://design-system.service.gov.uk/components/cookie-banner/#how-it-works)

> Position the cookie banner after the opening tag and before the ’skip to main content‘ link.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.