Skip to content

1

Brightspace, our Learning Management System (LMS), was designed with accessibility in mind. However, it is the responsibility of the instructor and/or course designer to ensure their course content is formatted using best practices for accessibility; including the use of good heading structure, text formatting, contrast and color, descriptive links, alternative text, tables, lists, etc.

I am writing a series of accessibility related blog posts that will provide suggestions on how you can make small changes when creating course content to make it accessible. This is the fourth tip in my series of accessibility related blog posts and it focuses on alternative text (alt text).

blind female student listening to screen reader describe information on his computer screen

Computers can read text on a screen but images, graphs, and charts are meaningless to visually impaired users. Alt text is an alternate method for supplying information about images to users who are visually impaired.

Alt text is important for screen reader users because a screen reader cannot describe an image. Since screen reader software cannot interpret images, it relies on alt text to communicate image information to the user. When an image does not have alt text the only information the screen reader can relay is that there is an image on the page and provide the file name for the image.

Alt text should describe an image so it makes sense in context. If a picture is worth a thousand words, then a short alt text description may be a poor substitute. While a concise alt text description is important, the alt text should be less than 125 characters. You want to think about what is the most important information you are trying to get across with the image and stay within the 124 or less characters. If the image requires a lengthy description, you should describe the image in the content of the page.

There are several ways to handle complex images (e.g. charts, data, statistics, etc.) where a short description is not possible. The best solution is to include a thorough description of the complex image in the content of the page, immediately before or after the image. If you don't want to add more content to your page, another preferred alternative would be to create another web page with just a description of the complex image and link to it near the image. Additionally, text descriptions of graphs and charts can help all students understand difficult concepts.

How alt text is written will vary depending on the type of image. Most screen reader software announces the presence of an image by appending a word such as "graphic" to the alt text, so using words such as "image" "graphic" and "photo" are unnecessary in the alt text, unless it helps to convey further meaning important for a user to know.

Consider this example which uses “Guide Dog and Man” as the alt text:

example of incorrect use of alt text

The alt text “Guide Dog and Man” is not effective if the intent is to show the dynamic action of guiding in the picture. In this situation a better alt text description is “A guide dog leads the way with her handler holding the guide harness in his left hand” as shown in the following example:

example of correct use of alt text

There is no need to include "image of," "picture of," or "photo of" in the alt text in this example because the screen reader will announce the presence of the image.

Additionally, images that contain text (as in a logo) should generally be coded to just include that text as the alt text.

Many images are used only for visual interest, they aren't meant to convey any meaning or important information. In this case, it is best to use what is called NULL alt text or empty alt text. This is done by entering two quotes ("") with no spaces in between in the alt text box.

So, how can you add alt text to images? Listed below are instructions on adding alt text in MS Word documents, PowerPoint presentations, Google Docs and Slides, as well as in Brightspace.

Add Alt Text to image in MS Word and PowerPoint 2013:

  1. PC users: right-click on an image
    Mac users: press control key and click on the image
  2. Select Format Picture
  3. Select the option for Alt Text
  4. Type your alt text in the description field. Leave the Title field blank.

example of alt text in MS Word and PowerPoint

Add Alt Text to image in Google Docs and Slides:

  1. PC users: right-click on an image
    Mac users: press control key and click on the image
  2. Select Alt text
  3. Enter title and description
  4. Click Ok

example of alt text in Google Docs

Add Alt Text to image in Brightspace:

When adding an image you will be prompted to provide alternative text. Enter the ALT Text in the Alternative Text field. When an image is decorative, simply check the image is decorative box.

example of alt text in HTML Editor

You will remove significant barriers for the visually impaired if you take these suggestions for adding alt text into consideration when creating course content. An added bonus is that if you take the extra step to include alt text when creating your course content you will be ahead of the game in the event you do have a visually impaired student.

Additional information about alt text can be found at:

Image credit:
"Stephanie using visual impairment simulation glasses" by emilylocaldigital is licensed under CC BY-NC-SA 2.0

Updated: 9/26/2021

Brightspace, our Learning Management System (LMS), was designed with accessibility in mind. However, it is the responsibility of the instructor and/or course designer to ensure their course content is formatted using best practices for accessibility; including the use of good heading structure, text formatting, contrast and color, descriptive links, alternative text, tables, lists, etc.

I am writing a series of accessibility related blog posts that will provide suggestions on how you can make small changes when creating course content to make it accessible. This is the third tip in my series of accessibility related blog posts and it focuses on descriptive links.

signpost

Links are like sign posts. They should tell you what you will find when you follow them. When using a computer, people are generally skimming pages for links. They tend to skim pages to quickly find what they are looking for.

Text links on a page are easily identifiable to persons who are not visually impaired because they are normally colored and underlined, and therefore stand out from the other information on the page.

Persons with a visual impairment using screen reader software are presented with a “links list” with all the available links found on the page. Screen reader users and persons using text-to-speech browsers often navigate websites going from link to link using the tab key, so providing descriptive links is extremely important.

Link text stands out in the same way that bold text does. If all your links have non-descriptive link text like "click here" or "more information" users are forced to read the text around the link to understand the context of the link and where it will take them. Therefore "click here" and “more information” are more of a hindrance than a help.

non-descriptive link text example

For effective skimming, both visual and non-visual users benefit from link text that can stand on its own without the surrounding context of the page. Good link text provides a clear description of the page that will load when following a link. With good descriptive link text, users can skim links and make quick informed decisions about the path to take to accomplish their task. With non-descriptive link text, users cannot ascertain where the link will take them from the link text alone. Therefore, you should avoid non-descriptive link text such as:

  • Click here
  • Here
  • More information
  • Read more
  • Continue

These types of non-descriptive link text offer no explanation and require users to expand their focus to the surrounding context or follow the link to discover its destination.

Consider this example of a list of all the links on a page that a visually impaired user has pulled up for quick access.

useless, non descriptive link text in link list

As you can see, the list of non descriptive links is meaningless. Descriptive links as shown in the image below are far more useful.

descriptive, meaningful link text in link list

When choosing descriptive links the link text needs to be long enough to convey the purpose of the link and no longer. Make link text clear and self-explanatory to support quick and effective navigation.

descriptive link example

When scanning links, the first words in the link text are the ones most likely to grab the user’s attention. Link text that begins with keywords is easier to scan efficiently and works better with software features like "link lists" that visually impaired individuals use to get an alphabetized list of links on a page.

Links beginning with non-descriptive words are not very helpful. Consider these two examples "All about ocean acidification" and "Learn more about global warming." Scanning these links will be slower and the alphabetized links list is not going to be very useful. A better approach is to use only the keywords for link text. For example those two links could be improved if they were formatted as "All about ocean acidification" and "Learn more about global warming."

example of descriptive links

Some users make links out of entire sentences or entire paragraphs. These long links are probably unnecessary and are not user-friendly for screen reader users. Remember that screen reader users cannot visually scan through lengthy links. They have to listen to the entire text. Some screen reader users get frustrated with long link text and move on to the next link if they cannot understand the purpose of the link after the first few words.

URLs are not always human-readable or screen reader friendly and therefore using URLs as link text should usually be avoided. Exceptions are when the document is intended to be printed or if the URL is relevant content.

In most cases, it is better to use human-readable text instead of the URL. The human-readable link Inclusive Design for a Digital World is more user-friendly than the link to purchase the book by the same title on Amazon.com, which consists of this 170-character link full of letters, numbers, slashes, and text that is not very human-readable (https://www.amazon.com/Inclusive-Design-Digital-World-Accessibility/dp/148425015X/ref=sr_1_1?keywords=Inclusive+Design+for+a+Digital+World&qid=1563708616&s=audible&sr=8-1.)

Additionally, links don't always lead to web pages. It is equally important to make this clear in your link text. Users appreciate knowing in advance, for example, that if they click on a link on their mobile device they will download a 20Mb PDF. In this case, the link text should indicate that it is a link to a file, including type and size of the file. Here's an example: Assignments Tool Quick Reference Guide (pdf 587KB).

Hyperlinks that are good for both accessibility and usabilty use descriptive text and retain the standard underline style.

Example: Descriptive Links
Ugly (and unclickable): https://webaim.org/techniques/hypertext/link_text
Bad: Click here to learn more.
Good: Accessible link text and appearance by WebAIM

Writing good link text isn't difficult. If you take these tips for creating descriptive links into consideration when creating course content, you will remove significant barriers for the visually impaired. An added bonus is that there will be students without disabilities, as well as those who have chosen not to disclose their disability to you who will find your use of these tips helpful as well.

If you are interested in getting more information about descriptive links refer to “Link Text” at webaim.org.

Image credit: image by from Pixabay

Brightspace, our Learning Management System (LMS), was designed with accessibility in mind. However, it is the responsibility of the instructor and/or course designer to ensure their course content is formatted using best practices for accessibility; including the use of good heading structure, text formatting, contrast and color, descriptive links, alternative text, tables, lists, etc.

I am writing a series of accessibility related blog posts that will provide suggestions on how you can make small changes when creating course content to make it accessible. This is the second tip in my series of accessibility related blog posts and it focuses on text formatting.

Here are a few suggestions for making text legible for persons with a visual impairment and that work for nearly everyone.

Contrast – Use the highest possible contrast for text image showing contrasting text that is effective and text that is not effective

Point Size – The relationship between readability and point size differs somewhat among typefaces. image showing font point size that is effective and point size that is not effective

Leading – Spacing between lines of text, should be at least 25 to 30 percent of the point size. image showing leading that is effective and leading that is not effective

Font Family – Avoid complicated, decorative or cursive fonts. When they must be used, reserve them for emphasis only. image showing times roman font family as a font that is more effective than a decorative font family

Sans-serif or standard serif fonts with familiar, easily recognizable characters are best. image showing difference between serif and san-serif fonts

Font Style – Roman typeface, using upper and lower cases, is more readable than italics, oblique or condensed. image showing font style that is effective and font style that is not effective

Also, you should ensure that your text is selectable. Text that can be selected with a cursor is accessible to screen readers and other assistive technology. Images of text, such as word art, screenshots, or infographics are not accessible. A screen reader can not read the text in images. If you must include non-selectable text, also provide a text alternative.

Some additional points to consider:

  • Color should not be the only method used to convey information
  • Avoid red or green text or text decoration, such as Word Art, Shadows, 3D, etc.
  • Use bold or italic to display emphasis
  • Do not underline text (screen readers interpret underlines as links)
  • Avoid writing whole sentences in capital letters
  • Avoid moving or blinking text
  • Keep the number of fonts used to a minimum
  • The reading order should be the same as the visual order

You will remove significant barriers for the visually impaired if you take these suggestions into consideration when creating course content. An added bonus is that there will be students without disabilities, as well as those who have chosen not to disclose their disability to you, who will find your use of these tips helpful as well.

If you are interested in getting more information about text formatting refer to "Making Text Legible" at Light House International.

two visually impaired persons using computers

This is the first in a series of blog posts that is a follow-up to my recent The Importance of Accessibility in Education post where I wrote,

Even though you may not have a student with a disability currently enrolled in your course, there are a few things you can do when creating content that will save you time later when you do have a student with a disability. This is not wasted time as you will find some students without disabilities will take advantage of accessible content as well.

Brightspace, our Learning Management System (LMS), was designed with accessibility in mind. However, it is the responsibility of the instructor and/or course designer to ensure their course content is formatted using best practices for accessibility; including the use of good heading structure, text formatting, contrast and color, descriptive links, alternative text, tables, lists, etc.

This post will focus on headings. A good heading structure is an important accessibility consideration. Headings should be used to indicate main points and sub-points on a page. Like an outline, heading levels should appear in logical and consistent order.

Headings allow screen reader users to easily navigate through the page and can make the page more usable for everyone.

typewritten sheet of paper with headings

When creating documents, many people do not use true "heading styles." For example, when creating a heading, they simply change the font type, enlarge the font size, change the color, make it bold, etc. When this is done, the document has no real structure that can be detected by a screen reader program. While visual learners can scan the page for text that stands out from the rest, users who rely on a screen reader are not able to "see" these elements.

The correct way to provide structure for accessibility purposes is to use heading styles. Listed below are instructions on applying heading styles in MS Word, PowerPoint, Google Docs, Google Slides, and the HTML Editor in Brightspace.

Add heading styles in MS Word document:

  1. Click on the Home tab.
  2. Highlight the text.
  3. Click on the appropriate heading selector in the styles panel (e.g. Heading 1 for top-level heading).
image of MS Word ribbon showing headings

Add heading styles in PowerPoint:

Using slide layouts will ensure that files have correctly structured headings and lists, and proper reading order. To assign a Slide Layout:

  1. Click on the Home tab.
  2. Click on New Slide.
  3. Choose the desired layout from the slide options menu.
PowerPoint ribbon showing slide layouts

Add heading styles in Google Docs:

  1. Highlight the text.
  2. Click on the appropriate heading selector in the styles panel (e.g. Heading 1 for top-level heading).
Google Docs formatting tab

Add heading styles in Google Slides:

Use predefined layouts instead of manually created text boxes, because the layouts are specially coded to work well with adaptive technologies like screen readers. To assign a Slide Layout:

  1. Click on New Slide with Layout button.
  2. Choose the desired layout from the slide options menu.
Google Slides, slide layouts

Add heading styles in the Brightspace HTML Editor:

  1. Highlight the text.
  2. Select the proper heading level from the Format dropdown menu (e.g. H1 - Heading 1 for top-level heading; H2 - Heading 2 for a subheading of the top-level heading, etc.).

HTML Editor showing format dropdown

Note: When creating heading styles always use the proper heading level. Create uniform headings so that a screen reader can navigate the content and can understand how it is structured.

Additionally, you can customize styles.
Learn how to change styles in MS Word 2016
Learn how to change styles in MS Word 2013
Learn how to change a style set in MS Word 2010
Learn more about PowerPoint 2016 slide layouts
Learn more about PowerPoint 2013 slide layouts
Learn more about PowerPoint 2010 slide layouts

The National Center on Disability and Access to Education developed Accessibility Cheatsheets to assist anyone who is creating accessible content. These free resources are catered to less-technical individuals.

Image credit: "Digital Literacy for visually impaired" by IAPB/VISION 2020 is licensed under CC BY-NC-SA 2.0

1

accessibility icons

This year marks the 29th anniversary of the Americans with Disabilities Act (ADA). This law was enacted to make sure that people with disabilities have the same rights and opportunities as everyone else.

It is extremely important for students with disabilities to have access to accessible course content. Statistics show that 12.9% of students have a disability. One in 25 incoming freshmen have some form of cognitive disability. These students have neurological challenges processing information. *

Forty to 60% of undergrads and 9% of graduate students choose not to report their disability and will just struggle through their courses.*

Chances are you will have a student enrolled in one of your courses that has a disability and has chosen not to disclose that information to you.

Accessibility image

Accessibility best practices are built into the Brightspace Learning Management System (LMS) design and development processes. While Brightspace is accessible to persons with disabilities, uploaded content may not be.

While Brightspace is accessible to persons with disabilities, uploaded content may not be. Instructors should make a conscious effort to make sure content is accessible.

Instructors should make a conscious effort to make sure content is accessible. Even though you may not have a student with a disability currently enrolled in your course, there are a few things you can do when creating content that will save you time later when you do have a student with a disability. This is not wasted time as you will find some students without disabilities will take advantage of accessible content as well. Additionally, if you usually copy content from one course to another you will be one step ahead because your copied course content will already be accessible.

Also for cognitive disabilities it’s important to build flexibility into your courses. This is done by using many modes of information and creating a clutter-free learning environment.

In an upcoming series of blog posts I will provide information on things you can routinely do when you create content and setup your Brightspace courses to make them accessible.

*Source: Accessibility in Education in North America Infographic

GAAD logo

Thursday, May 16th is Global Accessibility Awareness Day (GAAD). The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities.

While people may be interested in the topic of making technology accessible and usable by persons with disabilities, the reality is that they often do not know how or where to start. Awareness comes first.

The key to embracing accessibility – whether online, in the classroom, or on campus is realizing that taking the time to address an issue doesn’t just help a handful of individuals; in the end, everyone benefits.

Participants in global accessibility awareness day are encouraged to attempt to go an hour without using a technology most people take for granted – such as not using a computer mouse, attempting to navigate a website using a screen reader, or enlarging all of the fonts in a web browser to 200 percent, to see how functionality may be lost when accessibility isn’t taken into consideration in the design.

Whether you participate in an organized activity with others or not, join in and take an hour out of your day to experience digital accessibility first-hand.

celebrate GAAD

Today is Global Accessibility Awareness Day (GAAD). GAAD aims to get you talking, thinking and learning about digital access/inclusion and people with different abilities and talents.

Accessibility is about everyone. It is extremely important for students with disabilities to have access to accessible course content.

The Brightspace HTML Editor has a built-in accessibility checker that makes it easy to check for issues or offer suggestions to fix identified accessibility issues.

Follow these steps to do it.

To check for accessibility issues:

  1. After you add content to the HTML Editor, click the accessibility checker icon.
  2. HTML Editor accessibility checker icon

  3. The checker indicates if the content is free of accessibility issues, or offers suggestions to fix them.
  4. accessibility issues detected

Want more information?

Brightspace Accessibility Checker
View all the Brightspace training recaps
Brightspace Known Issues
Continuous Delivery Updates
Request a sandbox course
Sign-up for Brightspace training sessions
You can find Brightspace help at D2L's website.
Join the Brightspace Community.
Try these Brightspace How-To documents.
Visit our Brightspace FAQs for additional Brightspace information
or schedule a one-on-one session, email, or
call Janice Florent: (504) 520-7418.

GAAD written in the clouds

Thursday, May 17th is Global Accessibility Awareness Day (GAAD). The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities.

While people may be interested in the topic of making technology accessible and usable by persons with disabilities, the reality is that they often do not know how or where to start. Awareness comes first.

The key to embracing accessibility – whether online, in the classroom, or on campus is realizing that taking the time to address an issue doesn’t just help a handful of individuals; in the end, everyone benefits.

Participants in global accessibility awareness day are encouraged to attempt to go an hour without using a technology most people take for granted – such as not using a computer mouse, attempting to navigate a website using a screen reader, or enlarging all of the fonts in a web browser to 200 percent, to see how functionality may be lost when accessibility isn’t taken into consideration in the design.

Whether you participate in an organized activity with others or not, join in and take an hour out of your day to experience digital accessibility first-hand.

by Karen Nichols

Just a quick note about Global Accessibility Awareness Day.  CAT + has posted often on the topic of accessibility and the importance of design features in our courses that benefit ALL learners.  But I think this organization has really good intentions--"The purpose of GAAD is to get people talking, thinking and learning about digital (web, software, mobile, etc.) accessibility and users with different disabilities" so I thought I would share the web address with you.

In 2011 blogger John Devon posted on accessibility issues, especially in technology, and his blog sparked enough interest to create GAAD.

Take a look at their site, join in some of the activities and like them on Facebook if you appreciate their efforts.  Thank you, merci, gracias (their site is not only accessible, but is multi-lingual!).

various accessibility icons

The Quick Links tool allows users to quickly locate any heading or section within any page in Blackboard and jump directly to the link.

Blackboard Quick Links pop-up window

Quick Links work by pulling all headers and important web page landmarks into an easily accessible screen. This accessibility feature improves Blackboard's navigation experience for all users, but especially sighted keyboard only users.

Follow these steps to do it.

To access Quick Links:

  1. Click on the Quick Links icon located on the top left near the Home tab (or press the SHIFT + ALT + L keys on the keyboard).
  2. A pop-up window that displays the landmark and navigation links on the page will open. Any available keyboard shortcuts for the page are also displayed.
  3. Press the TAB key to move between the links.
  4. Press the Enter key to go to the highlighted link.

Want more information?

About Quick Links
Quick Links video [01:24]
Explore Blackboard’s On Demand Learning Center.
Check out help for instructors at help.blackboard.com.
Try these Blackboard How-To documents.
Visit the Blackboard FAQs for additional blackboard information
or schedule a one-on-one session, email, or
call Janice Florent: (504) 520-7418.