Accessibility

`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:.

seriousstaticWCAG 2.1.1, 4.1.2 · Afe-a11y-keyboard

Why

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.

Fix

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.

Examples

<!-- 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>

Sources

Facts

Id: a11y/link-is-link
Severity: serious
Check: static checked in the source by audit
Applies to: html angular vue svelte astro jsx
WCAG 2.2: 2.1.1, 4.1.2, level A
Same problem in: Lighthouse crawlable-anchors
Taught by the skill: fe-a11y-keyboard Keyboard access and focus
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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