Accessible Links
Use Descriptive Links/Hyperlinks
Links should be descriptive of the content they’re linking to, such as ‘Class Schedule’ rather than ‘schedule.html,’ ‘learn more,’ or ‘click here’ because many assistive technology users use links to navigate the page (skipping the content entirely), and providing links without descriptive text can be a barrier for these users.
Link Best Practices
- Every link should make sense when read by itself.
- The link text should describe the destination and make clear where a person will land when they click on it.
- Examples:
- Learn more about Life at Miami.
- Documentation on underwater basketweaving can be read by Miami students, faculty, and staff at the university Libraries.
- Examples:
- Avoid assigning multiple identical link names that go to different pages. This may confuse site visitors.
- Similarly, multiple links with different names that go to the same destination can also be confusing for people navigating your site.
- Don’t underline text unless it is a link. Links are automatically underlined in our templates when needed.
- When links appear in a paragraph of text, they must be discernable from the surrounding text.
Empty Links
Sometimes, when you edit or remove links in the content through the content editor, an extra “empty” link might be added to your code. An empty link is an anchor tag that has no text/label explaining the link’s destination. It will look something like:
<a href=”https://miamioh.edu”></a>
Empty links either need to be deleted from the code or a label needs to be added. A proper link should look like this:
<a href=”https://miamioh.edu”>Miami University’s Website</a>