Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

1. Barry Dahl, Sr. Community Manager Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities
2. Source of the Ten Bright Ideas
3. 1. Use Null Alt Text for Decorative Images in HTML Pages. • Alt="" • Example code: <img src= "doodle.gif" width="20" alt="" /> • Assistive Technology will ignore an image with null alt text. • Note: Having a null alt text attribute is not the same as having no alt text attribute.
4. Inserting a decorative image - checkbox
5. Inserting a decorative image – code with null alt text
6. Inserting a decorative image in D2L News
7. 2. Examine and Improve Alt Text for Simple Images • Class: Intro to Business • Alt text: “The Great Depression.” • Revised: "A long waiting line outside a building offering free coffee and donuts to unemployed people on a cold day during the Great Depression."
8. 3. Complex Images May Require Complex Alt Text • Have you ever used a word cloud in an online course, or an infographic, or a flowchart?
9. 3. What would you do with this one? How do you describe this chart so the low/no vision student is not at a disadvantage?
10. 4a. Searching for captioned videos on YouTube • Don't be fooled by YouTube's machine captions. YouTube uses voice recognition software to automagically create a video transcript and captions for almost every video uploaded to YouTube. • To find human transcribed captioned videos on YouTube: 1. Enter your search term in the YouTube search field. 2. Add a: , CC (that's a comma, CC) 3. Hit Enter or click the magnifying glass icon.
11. 4b. Searching for captioned videos on Google Advanced Video Search over the entire Web. 1. Fill out the Advanced Video Search fields that you need. 2. Choose the subtitles > closed captioned only 3. Hit Enter or click the Advanced Search button.
12. 4b. Google Search Screenshot
13. 5. Properly Use Lists in Content Pages What’s wrong with this list? • Plug-in computer • Push power button • Open web browser • Navigate to website What’s wrong with this list? 1. The sky today is grey 2. Koolaid tastes great 3. My hair is curly 4. You should know this
14. 6. Use Brightspace to Check for Color Contrast 1. Go to a tool in D2L 2. Select text to analyze 3. Click Drop-down menu next to Color icon 4. Select a color 5. Look for the green checkmark for WCAG AA in the Select a Color window.
15. 7. Use the Check Accessibility tool in HTML editor • Examples of content accessibility checking • Heading order • Alternative text for images • Color contrast ratios • It misses video captioning
16. 8. Create text links instead of unreadable URLs What does screen reading software say when it comes to this? http://brightspace.com/tlc What does screen reading software say when it comes to this? Teaching & Learning Community https://docs.google.com/spreadsheets/d/15h9tFfqmdsrYUSqEYata1Uir7EvjlRIQBoOS5StxXd0/edit#gid=0 Guest Authors Spreadsheet
17. 9. For Office Documents, use Built-in A11Y Checker • Go to the File tab (Windows only) • Select Info from the sidebar menu. • Click on the Check for Issues button. • Select Check Accessibility from the drop-down list. • The accessibility checker only checks .docx and .pptx files
18. 10. Consider the A11Y Features of External Tools • Using external (usually web-based) tools is popular in education. • Is the tool built to allow users with disabilities to create content? • Is the output created by the tool web accessible? • Do you have alternatives or work-arounds in place for students who cannot participate?
19. Two sites for a11y information on external tools www.web2access.org.uk/product centerononlinelearning.org/resources/vpat
20. Q & A

Editor's Notes

These ideas came out of WAMOE – the Web Accessibility MOOC for Online Educators. This MOOC was run three times a couple of years ago, with over 2,500 enrollees. This was a joint venture between the Brightspace Community and Portland Community College. There are no current plans to offer this again.
Key points:
What makes an image decorative? What makes an image informative?
Decorative images need null alt text in the HTML source.
Informative images need descriptive alt text to inform the unsighted user of what’s important about the image.
When assistive technology (screen reader) comes to a decorative image, it skips right over it. The user won’t even know there is an image there – because they don’t NEED to know.
No alt text is the case where the alt tag is missing in the HTML source. The screen reader will tell the student that there is an image, but there is no other information about the image. This is the worst case scenario and is to be avoided.
When inserting an image in the HTML editor, you are given two choices – ONLY PICK ONE!
If the image is informative, then enter a description in the Alternative Text dialog box.
If the image is decorative, check the box.
If you check the box, D2L puts the proper NULL alt text into the code.
This is an example. The top code includes an image with alt text. The bottom code includes an image with Null Alt Text.
This is the same example, with two images.
This slide has intentional builds.
This is an actual class example from WAMOE.
First click: the class is Intro to Business
Second click: the alt text is “The Great Depression”
You haven’t seen the image yet. As an unsighted student, what does that alt text bring to mind? What’s your best guess as to the content of the image? Let’s look at the image
Third click reveals the image. Let’s assume that this image is informative. If so, do you think the alt text adequately describes it?
Hint: the instructor who examined her own work concluded that the alt text was insufficient. Here is her edited alt text.
Fourth click: Read the alt text. So, is this an improvement?
That question is situational. We actually don’t know what message she was trying to impart to the students, so we’ll take her word for it that this is an improvement.

However, there is more to discuss here.
Most HTML Content pages in online courses are somewhat like this PPT slide. There are images and there is text and possibly other page elements as well.
Think of it this way: Alt text is in the code, so it is available to the screen reading student but it is hidden to the sighted student. I like to say that the alt text is behind the image.
Alternatives to alt text?
Captions: (machine readable and visible to sighted students)
Surrounding text: all important information contained in the image is included in the text on the page. If you do this, what does that make the image? DECORATIVE! Don’t repeat the info in the alt text.
Long description: useful approach (beyond our scope today) when the necessary description is too long for the alt text code (approx. 125 characters)
Word clouds are popular – for some yet undiagnosed reason.
Let’s assume that the actual words in the image are important.
These are words that are frequently used in the English language, but they derive from Spanish. Therefore, students need to know the actual words that fit that definition.
This image is NOT machine readable.
There are too many characters to put all the words in the alt text box. What should you do?
One reaction would be to NOT use the image at all. That’s not a recommendation that I can get behind. There is no reason to avoid images as long as you can provide an adequate alternative.
Have you ever made one of these word clouds at Wordle or one of the several other word cloud creation sites? To do so, what do you need?
You need the list of words. In other words, you are taking a simple text file and turning it into an image with no text.
But since you already have the list of words, it should be easy for you to include those words in the learning.
Use the image on your Content page. Add any other surrounding text that you need. At the bottom of the page, paste the list of words used in the word cloud.
All students benefit from this, regardless of whether they can view the image or not (for example, copy and paste into a study doc, etc.)
Take a look at this chart. There’s a lot going on here.
The vertical columns indicate the level of the National Debt (in the U.S.)
The black line indicates the statutory debt limit. The color of the columns indicate which political party was in the White House.
The President’s names are listed along the bottom, as are the years. That’s a lot of information.
How do you describe this image to the unsighted student? Can you do that in the 125 characters of alt text? Probably not.
What do you here?
You need to provide all of the underlying date (at ;least the data that is relevant to the learning or task).
Properly formed data tables are the answer. The U.S. Government tends to do a good job of providing such data.
This is a simple way to find videos on You Tube that have good captions.
A few years ago, YouTube started applying automatic captions to all uploaded videos that include words in the audio.
These automatic captions are sometimes very useful, and other times they can be quite terrible.
Some people take the time to edit the automatic captions or to upload a file of captions that they created.
There is a filter in YouTube that will look only for videos where the captions have been “touched,” which means that the captions have been edited.
Still a good idea to check the captions for quality, but at least you have a better chance of finding a video that has good captions.
Recommendation: always check the captions before using a video in your class.
The same approach works with Google video search – which searches YouTube and other video platforms.
By clicking the checkbox – it will only find videos where the captions have been touched. In theory.
Take a look at the list on the left, and then the list on the right. Tell me what’s wrong with these lists.

The choice between bullets and numbers when making a list is NOT just a cosmetic choice. This choice sends a signal to people using assistive technology.
Screen reading software will tell the student when it encounters an unordered list or an ordered list.
An unordered list should be used when the order of the listed things makes no difference.
An ordered list should be used when the order of list items makes a difference.
Another built-in accessibility tool in Brightspace

Follow instructions on slide. You can immediately see the impact of changing the font color on the contrast ratio.
Keep in mind that this tool cannot look for another important feature about using colored fonts: namely “using color as information”
For example: “All the red words are much more important than the others!” Color-blind students may not be able to differentiate. Low or no-vision students will NOT be told by the screen reading software which words are in red font.
Using the new (April 2017) Accessibility Checker in Brightspace
Works on HTML pages that you build in the HTML editor.
Examples of content accessibility checking
Heading order
Alternative text for images
Color contrast ratios
NOTE: This checker CANNOT determine whether a video has captions.
The screenshot pop-ups indicate the following:
Where to find the icon for the A11Y checker
Non-sequential headings
Images without alternative text (CAUTION: it will also call NULL alt text as missing alt text – which is not correct if you intended NULL alt text for a decorative image)
Color contrast issues will be highlighted
The embedded video in this example does NOT include captions. The A11Y checker says there are “No Accessibility Issues Detected,” which is misleading
Simple example of how a screen reader will encounter a link on an HTML page inside Brightspace.

Pasting a URL results in the screen reader program reading the H T T P Colon Slash Slash Brightspace dot com slash “TULK”
The same URL with readable text shown on screen is much better

(Build) This difference is more stark when using a particularly ugly URL such as from a Google Doc. The screen reader will go through that entire URL, which is worthless.
The built-in Accessibility Checkers in Microsoft Word and PowerPoint work very well; and it is possible to create highly accessible documents with each of these tools, IF you know what you’re doing.

The Accessibility Checker will not only identify some of the potential problems, it will also provide information on how you can fix those problems.
Do you love Prezi? Do you know that it has major accessibility problems? Do you use Twitter in class? Do you know how to work-around the accessibility issues that your students might encounter with it? Hint: Twitter is far more accessible than Prezi is.

If you use external tools in your teaching, or if you require students to use some of these tools – please check to see how accessible these tools are to students with vision, auditory, and/or mobility disabilities.
These two websites give good reviews of the accessibility of many commonly-used web-based tools. You’ll be able to do some research on some of your favorite tools – including whether there accessibility issues when using the tools to create content – and also whether the created content has accessibility issues.

Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

You are reading a preview.

Check these out next

Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

More Related Content

Similar to Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities (20)

More from Barry Dahl (20)

Recently uploaded (20)

Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

Editor's Notes

Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

You are reading a preview.

Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

Recommended

More Related Content

Similar to Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities (20)

More from Barry Dahl (20)

Recently uploaded (20)

Ten Bright Ideas to Make your Brightspace Courses More Accessible to Students with Disabilities

Editor's Notes