Quick Tips

The label or text of the link should accurately describe the purpose of the link and the destination web page or content. Descriptive link text helps users feel confident about where links will take them.

Most assistive technology software (e.g., screen reader) provides users with a list of all the links in a document, no matter the users’ current position in the document. The feature also describes all links without their original context.

Consider these guidelines when writing link text:

• Avoid link text like “Click Here,” “More,” and “Read More.” These can be confusing when a screen reader reads them out of context.
• Use unique link text where possible. Speech recognition software users may have a bad experience with duplicated link text.
• Avoid using a long URL (e.g., https://www.chaffey.edu/coronavirus/index.php )
• Use judgment when linking full URLs. When linking a URL, consider users who must speak it out loud and who must listen to a screen reader announce it.
• As a test, read your link out loud. Does it make sense? If not, rearrange the sentence to convey a clearer meaning.

For example: "For more information, visit the Chaffey College page on the coronavirus” will sound clearer and more useful to users of assistive technology than “for more information on Chaffey College and the coronavirus, click here.”

Finally, while you are thinking about links, make sure your links are not broken. 

Since 1999, it has been a firm web-usability guideline to refrain from opening new browser windows for several reasons. Read more about where your links should open.

UX Collective article about the problem of Click Here and Learn More links.

Excellent overview about designing links for websites and emails

Back to top

Using image descriptions (alt text) is essential for accessibility. Images often convey valuable information. Alt text should be clearly written and give an accurate description of the image.

Screen readers read image descriptions out loud. This means that blind and visually impaired people can understand the content of the image in an accessible way. If images do not have alt text, then screen readers will simply say “image” or “graphic” which gives no context or meaning.

• Be specific and succinct. The alt text should describe the purpose of the image in the fewest possible words, ideally fewer than 15.
• Describe information, not aesthetics.
• Don’t start with “a photo of” or “an image of”. People who use screen readers every day will be aware that they have reached an image because of the semantics of the img
• Think about the function of the image.
• As a test, ask yourself, "What information am I trying to add with this image?"

For example, consider the description for the image below.

“Logo for ADA30 Americans with Disabilities Act (1990-2020) – Celebrate the ADA! – July 26, 2020.”

Back to top

In 2017, WebAIM asked how screen reader users preferred to find information on lengthy web pages. Almost 70% of respondents said they preferred to use headings on a page. Clearly, organizing pages using headings is one of the best accessibility strategies available.

Think of headings as an outline of your webpage. They provide a solid structure to the webpage for both sighted users and screen reader users.

Breaking up content with headings allows the page to be easily scanned by the user visually or with a screen reader. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities.

Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point. Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for example.

• Use headings to introduce content; they are labels not statements.
• Select the appropriate heading level based on its hierarchy ranking, not its appearance.
• Do not use bold instead of a heading. One of the most common accessibility mistakes is making text bold when a heading is needed. Though the text may look like a heading, the underlying code is not set correctly.
• Use styles to highlight or emphasize text that is not a heading to achieve visual results. Headings are not for visual styling text.

 

Benefits

These measures allow the users of assistive technologies to:

• detect the sections (or subjects) covered on the page
• understand different sections of related content
• navigate quickly to any specific section
• allow search engines to detect the page’s main topics

 

Below is an illustration that shows what the underlying structure looks like.

• Heading 1 is usually the name of your page
  • Heading 2 are usually the main topics (H2)
    • Heading 3 (h3) are usually the sub-topics of Heading 2
  • Heading 2
    • Heading 3
    • Heading 3
      • Heading 4 (h4)
      • Heading 4

Back to top