@ithaka/bonsai/documentation/pages/components/links.md

ITHAKA core styling

---
title: Links
description: Text links or hyperlinks connect a user to a different page.
sass: ./scss/_links.scss
---

## Examples

```html_example
<ul class="no-bullet">
    <li><a href="#">This</a> is a default link.</li>
    <li>Here is an example of a <a href="#" class="disabled">disabled link</a>.</li>
</ul>
```

## Accessibility
1. Users should be able navigate between links using the "tab" keys.
2. Users should be able to activate a link by pressing the ‘Enter’ key.
3. Users should be able to identify links without relying on color alone.
4. Users should be able to activate hover and focus states with the keyboard. Different states should be visibly different so a user can tell what is currently active or on focus.
5. Do not include links that go nowhere  (e.g. `<a href="#">`)
6. Link labels need to make sense out of context. Labels such as "click here" or "click for details" are too ambiguous.
7. Underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.
8. Underlined links are important for low-vision users' accessibility, so retain underlines if accessibility is a priority for your site or you have many users with low vision.
9. Users should be alerted if links go to non-HTML resources (ex. PDF files, word documents). (e.g. `<a href="document.pdf">Important Document (PDF)</a>`)

WCAG:https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-link.html

## Guidelines
1. Consider touch target size for links. Make sure it is easy for a user to tap on links. Make sure objects have adequate spacing between one another so a user doesn't accidentally click on the wrong object.
2. Assuming the link text is colored, it's not always absolutely necessary to underline it. See accessibility issues for color blindness and low vision above.

## Platform Usage
Use links for navigating between pages (e.g., Article titles, Profile, etc.) or to "go somewhere." Do not use links for user actions (e.g., Download) that do not take the user to a new page.

## Avoid
1. Do not underline any text that is not a link, even if your links aren't underlined. It is recommended to reserve underlining for links. Underlined words provide a strong perceived affordance of click-ability, users will be confused and disappointed if underlined text doesn't have an actual affordance to match this perception.
2. You should generally avoid color for text unless it's a link. However, assuming it differs from the link color, you can sometimes use colored text without causing major usability problems. For example, in a checklist summary, you could show the word "okay" in green and the word "error" in red. (The fact that the word meanings are clearly different provides the required redundant cue for color-blind users.)
3. Don't use blue for non-link text, even if you don't use blue as your link color. Blue is still the color with the strongest perceived affordance of clickability.