# Accessibility The auro-hyperlink element has been designed and engineered to meet the WCAG 2.0 specifications. While there are multiple points to a success criterion, this document will cover core elements that ensure a consistent and useable experience. Reference [Accessibility Techniques for Links](https://dequeuniversity.com/checklists/web/links) #### Semantic Markup and Purpose

Topic	Description	Requirement	Example
Links versus buttons	Links SHOULD be used only for actions that take the user to other locations, and SHOULD NOT be used for button-like functionality.	best practice	Find low-fare flights to Mexico on Alaska Airlines.

#### Link text

Topic	Description	Requirement	Example
Discernible text	A link MUST have programmatically-discernible text, as determined by the accessible name calculation algorithm.	WCAG 4.1.2	Find low-fare flights to Mexico on Alaska Airlines.
Links to external sites	A link to an external site SHOULD indicate that it leads to an external site.	Best practice	Web AIM Links and Hypertext
Links opening in new tab or window	A link that opens in a new window or tab SHOULD indicate that it opens in a new window or tab.	Best practice	Auro hyperlink spec
Avoid "link" (or similar) in the link text	The link text SHOULD NOT state its semantic role (e.g. don't say "link to..."), because screen readers already state the role before reading the link text.	Best practice	DO NOT DO THIS: See the link for low-fare flights with Alaska.

#### Keyboard Accessibility

Topic	Description	Requirement	Example
Keyboard-focusable	Links MUST be keyboard-focusable. (Use the tab key to place focus on any hyperlink element)	WCAG 2.1.1	low-fare flights to Mexico on Alaska Airlines.
Keyboard activation	Links MUST activate with the enter/return key. (Use the tab key to place focus on any hyperlink element)	WCAG 2.1.1	low-fare flights to Mexico on Alaska Airlines.

#### Focus Order | Topic | Description | Requirement | |---|---|---| |Focus order|The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.|WCAG 2.4.3| |Tabindex|The tabindex attribute SHOULD NOT be used with positive values to customize the tab order (e.g. don't use `tabindex="1"`).|Best practice| #### Link Colors, Contrast, and Styles

Topic	Description	Requirement	Example
Visually distinguishable	Links MUST be visually distinguishable from surrounding non-link text.	WCAG 1.4.1	Find low-fare flights to Mexico on Alaska Airlines.
Using color to distinguish links	Color MUST NOT be the only method used to distinguish links from surrounding text, unless the color contrast between the link and adjacent text is at least 3:1 and an additional visual indicator (such as an underline or outline) is provided on hover and focus. See color contrast test.	WCAG 1.4.1	Find low-fare flights to Mexico
Link contrast	Links MUST have a contrast ratio of 4.5:1 (for small text) or 3:1 (for large text) against their background. See color contrast test.	WCAG 1.4.3	Find low-fare flights to Mexico

#### Visual Focus Indicator

Topic	Description	Requirement	Example
Focus indicator	All links MUST show a visual focus indicator when in focus. (Use the tab key to place focus on any hyperlink element)	WCAG 2.4.7	Find low-fare flights to Mexico