Open joppekroon opened 1 month ago
Basic reproduction HTML page.
Click the H1
before running the Keyboard IGT, and the skip link will be flagged.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skip link missed in Keyboard IGT</title>
<style>
#skip a {
display: block;
position: absolute;
left: -999px;
top: -999px;
}
#skip a:focus {
left: 0;
top: 0;
padding: 3px;
background: #ffc;
border:1px solid #990000;
}
</style>
</head>
<body>
<div id="skip">
<a href="#main">Skip Content</a>
</div>
<header>
<h1>Skip link missed in Keyboard IGT</h1>
<button>menu button (skipped by link)</button>
</header>
<main id="main">
<p>Some other content here including a button</p>
<button>I am the first focusable item in main</button>
</main>
</body>
</html>
@joppekroon Thank you for bringing up this issue. I've created a ticket for it in our product backlog. We will prioritize and resolve it in one of our upcoming releases.
Product
axe Extension
Product Version
v4.80.1
Latest Version
Issue Description
Expectation
Not flag off-screen skip-links that come in on
:focus
as "skipped in tab order".Actual
Depending on where focus is placed prior to the test, the Keyboard IGT will flag an off screen skip link, built as per the university entry for skip links, in step 3 as "skipped in tab order".
How to Reproduce
Clicking anywhere in the page to place focus on the page (but not a control!) results in the skip link not being picked up in step 1, and in step 3 the question is asked if there is an alternative. Screenshot is missing, but highlighting reveals it is the skip-link that is being flagged.
Placing focus in the browsers url-bar (i.e. focus starts definitely before the skip link) still results in the skip-link not being detected.
Making sure a control is focused triggers the initial question to start testing from the top of the page. Answering 'yes' here, causes the skip link to be found without issues and no problems are flagged.