Dostępność

`a11y/link-is-link`

An <a> is a real link with an href; an action is a <button>, never <a> without href, href="#" or javascript:.

poważnastatyczneWCAG 2.1.1, 4.1.2 · Afe-a11y-keyboard

Dlaczego

An <a> without href is not focusable, so a keyboard user can never reach it. With href="#" or javascript: it is reachable but announced as a link, does nothing on Space, jumps to the top when the script fails, and search engines cannot follow it.

Poprawka

If it goes somewhere, give it the real URL (href="/pricing", or the router's link component). If it does something on this page (open a menu, submit, toggle), make it <button type="button"> and style it as you like.

Przykłady

<!-- bad -->
<a onclick="openCart()">Cart</a>
<a href="#" onclick="openCart()">Cart</a>
<!-- good -->
<button type="button" onclick="openCart()">Cart</button>
<a href="/cart">Cart</a>

Źródła

Fakty

Identyfikator: a11y/link-is-link
Waga: poważna
Sprawdzanie: statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików: html angular vue svelte astro jsx
WCAG 2.2: 2.1.1, 4.1.2, poziom A
Ten sam problem w: Lighthouse crawlable-anchors
Uczy jej skill: fe-a11y-keyboard Keyboard access and focus
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/link-is-link