Tips for hyperlinks

• Communicate the purpose or function of the hyperlink as part of the link name. "Click Here" or "Read More" are NOT good links! The reader should understand the purpose from the link text alone.
• Be as descriptive as possible without being overly long - under 120 characters.
• Integrate the link into your sentence. Sighted users will see the link, and screen readers will hear the link.

Examples of appropriate link text

• ✓ Read about the basics of vaccines at the CDC.
• ✓ Be sure to read about the Brown Code of Student Conduct.
• ✓ Read the following: Alt Text Decision Tree and The Definitive Guide to the Alt Text Field.
• ✓ Learn more about color accessibility for evaluating contrast and understanding WCAG 2 color requirements.

Examples of inappropriate link text

• ✘ Click here to read the CDC article.
• ✘ Read our code of student conduct: More Info
• ✘ Read about alt text in Article 1 (Read More) and Article 2 (Read More)
• ✘ Learn more about color and accessibility here and here.

Image Links

When using an image as a link, there are some specific rules that need to be followed. As discussed on the image ALT text concept pages, using an empty ALT text is fine for images that are purely decorative. However, as soon as you put an image inside of an anchor (link), then that image is no longer decorative, it is functional and the ALT text of the image needs to follow the function and not be descriptive of the actual image. For example: 

<a href="https://brown.edu">
   <img src="image.jpg" alt="Brown University Homepage">
</a>

There are some variations on this pattern though that should be addressed. If there is link text in addition to the image, then having an empty ALT text is preferred.

<a href="https://brown.edu">
   <img src="image.jpg" alt="">Brown University
</a>

If the image link is redundant to another link that is adjacent to the image link, then removing that first link entirely from assistive technology is preferred. This involves two steps. First, remove the image link from the tab order using a negative tabindex value. Second, add an aria-hidden attribute to the image link (adding a role of presentation to the link would also work). In this case though, we need to add the ALT text back in for cases where a user might be using both a screen reader and a mouse (low vision users). 

<a href="https://stanford.edu" tabindex="-1" aria-hidden="true">
   <img src="image.jpg" alt="Brown University">
</a>
[... snip ...]
<a href="https://brown.edu">
   Stanford University
</a>