Links
What do I need to do?
A hyperlink is a word or words that sends a user to another location. Hyperlinks usually have text that is underlined and a different color. You need to clearly identify every hyperlink with a title that explains where the link will take the user.
How do I do this?
A hyperlink's name or title should describe the purpose of the link. The words "click here," "learn more" or "open this" do not explain the purpose of the link, and won't make sense when the hyperlink is viewed outside of the original surrounding text.
For example, this hyperlink is incorrect because the hyperlink is not titled appropriately: "Click here to go to the UWEX Accessibility homepage." Instead, you should hyperlink the words "UWEX Accessibility homepage" and use it within a sentence that makes more sense. For example: "Learn more about accessibility standards at the UWEX Accessibility homepage."
To create an accessible hyperlink, you need to include both the website address and a title. Go to the "insert" menu and select "hyperlink" (or select the hyperlink icon, which looks like a chain link). Then enter in a title where it says "Text to display" and type or paste the address where it says "address."
Another way to access the hyperlink window is to highlight the words you want to use as your title, then right click and select hyperlink. You'll have the hyperlink window visible, but the hyperlink title will already be inserted into the "Text to display" box and you'll just need to type or paste the address.
Why is this important?
Vague link text leaves users unsure about the purpose of the link or where it goes. A link that is obvious to a sighted user may appear out of context to someone using a screen reader or someone viewing a summary list of the page's hyperlinks. Identifying the subject of all links will help make the site clearer to all users. Appropriately titled hyperlinks will also increase your google search ratings, as described in this "Why hyperlinks matter to Google" article.
Titled hyperlinks can also prevent broken links and spacing gaps in your text. Outlook will not recognize a web address that is extremely long and scrolls over onto a second line. But if you create an accessible hyperlink, Outlook will display only the title, and the extremely long hyperlink address will remain hidden. For example, rather having your hyperlink viewed as "http://www.wisconsin.gov/state/home/app?COMMAND=gov.wi.state.cpp.command.LoadPortalHome" it would instead read "Wisconsin Government Homepage," even though both links take you to the same website. Also note how much cleaner the titled hyperlink looks on this webpage. The inaccessible, untitled hyperlink breaks across two lines and leaves blank space, while the accessible, titled hyperlink fits neatly into the rest of the text.
What is the source for this standard?
- WCAG 2.0 Guideline 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)
Where can I learn more?
