没有 href 的锚点反模式

A common anti-pattern is an anchor with no href, wired up with a click handler to act like a button. It looks fine but breaks things.

An anchor only counts as a real link when it has an href. Without one, the browser does not treat it as interactive at all.

An href-less anchor is not focusable, so keyboard users tabbing through the page skip right past it and can never reach it.

Even if you force focus onto it, a fake link ignores Enter and Space by default, so keyboard users still cannot activate it.

Without an href, a screen reader may not announce the anchor as a link at all, so users never learn it is something they can use.

Some patch it with an href of just a hash. That makes it focusable but it also jumps the page to the top, which is jarring.

If the control performs an action, use a real button. You get focus, keyboard support, and the correct role for free.

If the control truly navigates, keep the anchor but give it a real href pointing to the destination.

Developers often pick an anchor for its underline styling. But you can style a button instead, without sacrificing accessibility.

An href-less anchor even loses its pointer cursor by default, hinting to sighted users that nothing is really clickable here.

Do not fake interactivity. Choose a real button for actions or an anchor with an href for navigation, and skip the workarounds.

Why is an anchor with no href but a click handler a problem?

An href-less anchor is a fake link: unfocusable and keyboard-dead. Use a button for actions, a real href for navigation. ✅