Links Anti-pattern examples

Using Improper Tags

We lose discoverability when using a tag other than <a> for links, they're not in the tabindex nor in the list of links in VoiceOver Rotor.

This is a span pretending to be a link

Link without an href

Links that don't have an href and rely on JavaScript are not fully discoverable either, they're often removed from the tabindex.

This is a link without an href

Interactive controls that don't behave like a link

The opposite issue as above, when a link has an href="#" or similar, chances are it'd be better suited as a button.

This is a link that should be a button

Linked image without alt text

Without alternative text, a linked image is not fully discoverable either.

Going up? Back to top