Make Your Blackboard Course Accessible – Links

Man Crossing Natural Bridge with Broken link icon above

Accessible Links

One of the best things about teaching online or having an online space for your f2f or hybrid course is that you have a window onto the web, with all its resources.

However, the links that you create need to be accessible or students will be unable to leverage your curation of the web for learning. As such, each link in your course must to stand out from the rest of the text, contain meaningful information for a screen reader, and maintain a consistency that allows students with or without disabilities to easily identify links and where the links are taking them.

Here are some guidelines to creating accessible links in Blackboard:

1. Use multiple styles to indicate a link

The default color for links in UH Blackboard (as of November 2018) is the standard “Cougar Red”

#C8102E, RGB: 200,16,46

If you create a link in Blackboard, this will be its assigned color, which is accessible against the default white background (#ffffff).

This means that it meets the WCAG 2.0 standards for color contrast. WCAG Color Contrast Checker

In addition, text links are also by default styled in UH Blackboard with an underline. These two features help make the link text stand out sufficiently from other text content in Blackboard when the other text also receives the default styles (black text on white background without underline).

However, sometimes instructors copy and paste text and links from Microsoft Word or other rich text editors. This means that the styles are maintained from the original document. Be sure that you have the appropriate contrast with surrounding text even if you paste your text from a rich text editor.

There are multiple ways that you can style links to make them stand out from the surrounding text. Always use at least two of the following:

  1. Underline
  2. Bold
  3. Color (must meet WCAG 2.0 color contrast standards)
  4. Background-color (must meet WCAG 2.0 color contrast standards)
  5. Size (2-4 pts larger)

2. Use descriptive “anchor” text

Now that you have visually styled your links correctly, the second step is to semantically indicate where the link will take the user. Do this by using descriptive and meaningful “anchor text”, which is the actual clickable text in the link.

In other words, don’t use “Click here” or “Link”. This forces users to read around the text to learn where it will take them. Also, for a user relying on a screen reader, having a list of links that say “Click here” is unhelpful.

Especially important is noting the type of document if a link is not a website. For example, if you are linking to a syllabus, make sure the anchor text specifies the document type. Below are two examples of links with meaningful anchor text.

3. Use “title” attribute for text and image/graphic links

The third step to creating accessible links is to provide a title to the link. Titles gives screen readers more information about the link. You can tell if a link has a title by hovering over it with your mouse and seeing a “tool tip” pop up and display the title.

Accessible Link showing Tool Tip from "title" attribute

To add a title text in Blackboard:

    1. select text or an image you would like to convert into a link
    2. click on the link icon in the editor menu
    3. provide a link URL
    4. specify whether you want the link to open in the current window or a new window
    5. provide a descriptive title to the link in the “Title” field
    6. click “Insert”

Add a link to Blackboard - Steps 1 and 2

Add a link to Blackboard - Steps 3, 4 and 5

4. Maintain consistency in your link presentation

The last thing to consider when making accessible links is to maintain a consistent style in your link presentation. This can be achieved by uniformly applying all three steps above to your links:

  1. Do not use different colors and styles for your links
  2. Use descriptive anchor text for all links
  3. Add titles to all your links

This seems like a lot of work, but like anything, with enough practice, it will become habitual and will not take any more time than it would to create a link without following these guidelines. Also, to save time, use the default styles within Blackboard and use descriptive anchor links. Then, the only extra step you will need to take is to add a “title” attribute.


Broken link icon made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY

Photo by kyler trautner

Tell us what you think! Post a comment