Creating links using `role=link`

Authoring Practice Design Patten for Link

Note: When using HTML use the <a> element. It is recommended that authors not re-purpose other elements to create links.

Example Links

Technique	Link	Accessibility Features
`span` element with text content	W3C website	`span` element with `role="link"`. `span` element has `onclick` event to handle mouse clicks. `span` element has `onkeydown` event to handle keyboard support. `span` element has `tabindex="0"` to become part of tab order of the page. Accessible name (e.g. what a screen reader will say) from child text content of `span` element.
`img` element		`img` element with `alt` attribute. `img` element has `onclick` event to handle mouse clicks. `img` element has `onkeydown` event to handle keyboard support. `img` element has `tabindex="0"` to become part of tab order of the page. Accessible name from `alt` attribute.
Content		`span` element with background image and with `role="link"`. `span` element has `onclick` event to handle mouse clicks. `span` element has `onkeydown` event to handle keyboard support. `span` element has `tabindex="0"` to become part of tab order of the page. Accessible name from `aria-label` attribute.
Background Image		`span` element with background image and with `role="link"`. `span` element has `onclick` event to handle mouse clicks. `span` element has `onkeydown` event to handle keyboard support. `span` element has `tabindex="0"` to become part of tab order of the page. Accessible name from `aria-label` attribute.

Keyboard Support

Key	Function
Enter/Return	Activate link

ARIA Roles, Properties and States

Role	Property/State	Component	Usage
link		span	Identify element with the link behavior
	aria-label	span	Define accessible name for link.

Source Code

CSS: link.css
Javascript: link.js

HTML Code

HTML source code is generated by scripting using ID references.

First Example: `span` element with text content

Second Example: `img` element

Third Example: Content

Fourth Example: Background image