@aurodesignsystem/auro-hyperlink
Version:
auro-hyperlink HTML custom element
162 lines (145 loc) • 6.34 kB
Markdown
<style>
table tbody tr td + td {
width: 40%;
}
table tbody tr td + td + td {
width: unset;
}
</style>
# 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
<table>
<thead>
<tr>
<th>Topic</th>
<th>Description</th>
<th>Requirement</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Links versus buttons</td>
<td>Links SHOULD be used only for actions that take the user to other locations, and SHOULD NOT be used for button-like functionality.</td>
<td>best practice</td>
<td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.<br><br><auro-button onclick="sayHello()">Save changes</auro-button></td>
</tr>
</tbody>
</table>
#### Link text
<table>
<thead>
<tr>
<th>Topic</th>
<th>Description</th>
<th>Requirement</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Discernible text</td>
<td>A link MUST have programmatically-discernible text, as determined by the accessible name calculation algorithm.</td>
<td>WCAG 4.1.2</td>
<td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
</tr>
<tr>
<td>Links to external sites</td>
<td>A link to an external site MAY indicate that it leads to an external site.</td>
<td>Best practice</td>
<td><auro-hyperlink href="https://webaim.org/techniques/hypertext/link_text" target="_blank" type="nav">Web AIM Links and Hypertext</auro-hyperlink></td>
</tr>
<tr>
<td>Links opening in new tab or window</td>
<td>A link that opens in a new window or tab SHOULD indicate that it opens in a new window or tab.</td>
<td>Best practice</td>
<td><auro-hyperlink href="https://auro.alaskaair.com/components/auro/hyperlink" target="_blank" type="nav">Auro hyperlink spec</auro-hyperlink></td>
</tr>
<tr>
<td>Avoid "link" (or similar) in the link text</td>
<td>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.</td>
<td>Best practice</td>
<td></td>
</tr>
</tbody>
</table>
#### Keyboard Accessibility
<table>
<thead>
<tr>
<th>Topic</th>
<th>Description</th>
<th>Requirement</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboard-focusable</td>
<td>Links MUST be keyboard-focusable. (Use the <code>tab</code> key to place focus on any hyperlink element)</td>
<td>WCAG 2.1.1</td>
<td><auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
</tr>
<tr>
<td>Keyboard activation</td>
<td>Links MUST activate with the enter/return key. (Use the <code>tab</code> key to place focus on any hyperlink element)</td>
<td>WCAG 2.1.1</td>
<td><auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
</tr>
</tbody>
</table>
#### Focus Order
| Topic | Description | Requirement | Example |
|---|---|---|---|
|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
<table>
<thead>
<tr>
<th>Topic</th>
<th>Description</th>
<th>Requirement</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Links visually distinguishable from non-links</td>
<td>Links MUST be visually distinguishable from surrounding non-link text.</td>
<td>WCAG 1.4.1</td><td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
</tr>
<tr>
<td>Color as a way to visually distinguish links</td>
<td>Color alone MUST NOT be used as the only way to distinguish links from surrounding text <strong>unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.</strong><br><br>See <auro-hyperlink href="https://webaim.org/resources/contrastchecker/?fcolor=0074CB&bcolor=222222" target="_blank">color contrast test</auro-hyperlink>.</td>
<td>WCAG 1.4.1</td>
<td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
</tr>
<tr>
<td>Link contrast</td>
<td>Links MUST have a contrast ratio of 4.5:1 (for small text) or 3:1 (for large text) against their background. <br><br>See <auro-hyperlink href="https://webaim.org/resources/contrastchecker/?fcolor=0074CB&bcolor=FFFFFF" target="_blank">color contrast test</auro-hyperlink>.</td>
<td>WCAG 1.4.3</td>
<td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
</tr>
</tbody>
</table>
#### Visual Focus Indicator
<table>
<thead>
<tr>
<th>Topic</th>
<th>Description</th>
<th>Requirement</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Focus indicator</td>
<td>All links MUST show a visual focus indicator when in focus. (Use the <code>tab</code> key to place focus on any hyperlink element)</td><td>WCAG 2.4.7</td>
<td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
</tr>
</tbody>
</table>