WiFi KRACK: What you need to know
Securing the Internet of Things
Cyber security: Can you catch a phish?
How to spot phishing emails
Laptops for Harvey: OHIO IT helps University of Houston Downtown students get back online
Web Accessibility: Descriptive Links
How to create a cyber secure home
Four steps to staying secure online
October is National Cyber Security Awareness Month
Skype for Business: 3 ways to stay in touch
deco-circuit-banner

Web Accessibility: Descriptive Links

Monday, October 9, 2017
Jill Bateman  

This is the fourth in a series of stories about making OHIO's websites more accessible. Stay tuned for new stories to sharpen your skills in this area.


One of the things that makes the World Wide Web a unique communication tool is the notion of linked content. Early web developers envisioned millions of websites connected like a spider web building off of each other and expanding knowledge. They called these links "hyperlinks" because they could transport a visitor from place to place as far as their curiosity would take them.

As we add content to a website, the way we create hyperlinks matters. Each link is a promise to our visitors about what they will find at the other end. Whenever we create a dead, misguided, or meaningless link, we break that promise and lose credibility with our visitors. Using descriptive hyperlinks gives us an opportunity to create a more meaningful experience for every visitor to our websites. This is particularly important for people with disabilities.

Context matters

Building descriptive links is the art of creating phrases that provide their own context and can stand on their own. If you write several paragraphs of copy and add "Read More" at the end, you create a non-descriptive link – it doesn't tell your visitor where they are going or why they should go there. For people using screen readers or tabbing through your website, this can be a real problem.

Some visitors - with or without disabilities - may navigate through your website using the tab key or other combinations of keys. They also may use a technology called a screen reader to convert your text into speech. Both of these navigation methods prioritize web page elements like links. When a visitor using a screen reader lands on one of these, the computer or device will read the content of the link out loud. If you have multiple "read more" buttons or links on a page, someone tabbing through with a screen reader will hear "Link: Read more" over and over again. Aside from the annoyance this generates, a visitor with a vision impairment will not know where each link will take them.

Descriptive links

To solve this challenge, create links that describe the destination. For instance, instead of adding "Click here" to the end of a sentence like this:

Making this chocolate cake recipe will change your life. Click here.

Try hyperlinking the words that describe where the link points, in this case "chocolate cake recipe":

Making this chocolate cake recipe will change your life.

Someone using a screen reader with the second sentence will hear this: "Making this (link: chocolate cake recipe) will change your life." In addition to improving the experience for disabled users, you've also:

  • clarified to everyone where the link will go
  • highlighted the most important part of that content
  • given people a clear reason to click on the link
  • improved your ratings for link markup which could improve your search engine results.

Descriptive document links

If you've ever clicked on a link and found yourself downloading a 9 MB PowerPoint file, you've been the victim of a poorly created document link. To spare your visitors from those sorts of unexpected downloads, let people know what they are downloading before they click the button or text. This also brings your link into compliance with accessibility standards. For example, if you are linking to a PDF file, your link should include a description of the file and "PDF" in parentheses:

To view topics from the Fall 2017 meeting, download the August 2017 Board of Trustees Agenda (PDF).

A lot of good things can happen when we improve the way we link to content on the web, and it is amazing how much we can improve the web for everyone when we improve it for people with disabilities. Now, if I can just find that cake recipe...

---

The three-year long Web Content Management System (Web CMS) project will migrate approximately 200 university websites from CommonSpot to a modern Web CMS that offers improved usability, accessibility, and ease of maintenance. The new service also will make it easier to optimize web pages for search engines, making it more likely that OHIO pages will appear near the top of relevant Internet searches. Finally, the project will encourage digital marketing efforts and facilitate consistent branding across the institution.


Related Links

The Web is for Everyone