Sign In / Sign Out
Navigation for Entire University
- ASU Home
- My ASU
- Colleges and Schools
- Map and Locations
Links that clearly communicate their destination help users decide what action to take. For people using screen readers or other assistive devices, meaningful links can save much time and frustration. Low-vision users and those who are color blind or have other vision issues rely on links that are clearly marked and that respond with a noticeable focus state.
Screen readers can generate and read aloud a list of the links found on a page. This is a useful way to navigate, provided the links are descriptive. For instance, a list of "Read more" links doesn't adequately describe the links' various destinations. Using the destination page's title or subject matter as the link text is much more informative.
Other tips for writing accessible link text include:
|Unhelpful link text||Meaningful link text|
|Click here to learn the difference between animal, vegetable and mineral.||Learn the difference between animal, vegetable and mineral.|
|Take courses online this summer (read more)||Take courses online this summer|
|You should read this article about the Savannah cat.||You should read this article about the Savannah cat.|
|http://school.asu.edu/courses/sum-abroad/sum-app.pdf||Summer Application (PDF)|
|http://webaim.org/techniques/hypertext/||Links and Hypertext|
Pop ups and new windows introduce many usability problems and should be employed sparingly. If needed, links that open pop ups and new windows should contain text explaining the action that will occur to minimize users' confusion.
<a href="https://www.amazon.com/gp/product/1430241942/" target="_blank">Buy
this book (opens a new window)</a><a href="description.html" rel="popup">
Course description (opens in a pop up)</a>
When using linked images, the image ALT attribute should describe both the content of the image and the function of the link. Often those are the same thing, as in the case of button images. (See more about linked images.)
Don't use empty links, like <a href="#">. An <a> element with an empty HREF is not
Text links should have 3:1 contrast between the link text color and the surrounding non-link text color. However, don't rely solely on color to convey links. Instead, always employ a secondary visual cue, such as an underline or border (see more in Color and Contrast). In addition, secondary non-color visual cues should display on both mouse hover and keyboard focus (see more in Keyboard Access).
Finally, never use CSS to remove the outline from links, unless you intend to replace it with a more visible focus state cue.
Using your keyboard, tab through the page:
Chrome WAVE extension
WAVE marks links with a hand icon, indicating redundant links, ambiguous link text, empty links (hrefs) and more. It will also check that linked images have ALT tags.