Link design pattern

This link is created using the <span> element, with scripting to provide the expected behaviour. Additional semantic information is provided using ARIA.

It is better to use the <a> element because the browser will automatically provide complete functionality (including context menu, URL to status bar, and visited state information), as well as keyboard support and full semantics.

Example

Tink UK

Notes

The tabindex attribute places the span element into the tab order, based on the element's location within the DOM.

The link changes appearance with hover and focus.

The link role exposes the span as a link in the accessibility tree.

The click and keydown event listeners capture the expected mouse and keyboard events for activating the link.