Ten Bright Ideas for Improving Accessibility in Online Courses - Barry Dahl - Oct 2022
•Download as PPTX, PDF•
1 like•40 views
Presentation updated and remixed for the South Carolina Connection at Piedmont Tech in Newberry on October 28, 2022.
Recommended
Recommended
More Related Content
Similar to Ten Bright Ideas for Improving Accessibility in Online Courses - Barry Dahl - Oct 2022
Similar to Ten Bright Ideas for Improving Accessibility in Online Courses - Barry Dahl - Oct 2022 (20)
More from D2L Barry
More from D2L Barry (20)
Recently uploaded
Recently uploaded (20)
Ten Bright Ideas for Improving Accessibility in Online Courses - Barry Dahl - Oct 2022
- 1. Barry Dahl Teaching & Learning Advocate, D2L Ten Bright Ideas to Make your Online Courses More Accessible to Students with Disabilities
- 2. Who am I? • Presenter: Barry Dahl • Teaching & Learning Advocate, D2L • Not an Accessibility Expert, but a dogged learner about all things related to web #a11y • Barry.dahl@D2L.com • @D2LBarry • @barrydahl
- 3. Ten Bright Ideas for #A11y 1. Improving Alt Text 2. Alt Text No-No’s 3. Complex images 4. Proper list formatting 5. Color blindness simulator 6. Proper link formation 7. Emojis and Emoticons 8. HTML Accessible Templates 9. Brightspace A11y Checker 10. Become a Self-Tester
- 4. 1. 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."
- 5. Example of Simple Image with Surrounding Text
- 6. 2. Alt Text No-No’s • Don’t repeat things that are already conveyed in plain text on the page • Don’t put info in alt text that isn’t conveyed any other way • Don’t forget good grammar and punctuation • Don’t load it up with keywords • Don’t use phrases such as “photo of” or “Image of” • Don’t write alt text for decorative images (alt="“) • Don’t put in a URL or the image filename • Don’t expect machine-generated Alt Text to be useful • Don’t include details unless they’re relevant • Don’t repeat the same alt text for multiple images
- 7. Examples of Alt Text No-No’s It’s International Unicorn Day! Fun! (Maybe so, butthis isdecorative) Alttext:Eventhoughsunflowersareself-pollenati researchshowshoneybeeactivitycanimprove cropyields.(Poor:notobviousinformation)
- 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. What would you do with this one? How do you describe this image of a table, so the low/no vision student is not at a disadvantage?
- 10. 4. Create Proper Lists in Content Pages What’s wrong with list A? 1. The sky today is grey 2. Koolaid tastes great 3. My hair is curly 4. You should know this What’s wrong with list B? • Plug-in computer • Push power button • Open web browser • Navigate to website
- 11. 5. Check colors in photos & graphics • If you are using photos where colors are important – check them out first using a color blindness simulator. • Coblis • Search for “Coblis Color Blindness Simulator” • Free and easy
- 12. Green-weak Deuteranomaly: 5% of males
- 13. Green-blind Deuteranopia: 1% of males
- 14. 6. Create text links instead of unreadable URLs • https://docs.google.com/spreadsheets/d/15h9tFfqmdsrYUSqEYata1Uir 7EvjlRIQBoOS5StxXd0/edit#gid=0 • Guest Authors Spreadsheet 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
- 15. 7. How about Emojis? • This emoji was inserted using the Brightspace Editor: 😆 • Does it have alt text? • No, not that you'll see in the code. • But what does JAWS have to say? • JAWS will announce the name of the emoji, so the alt text is embedded. • This one says "smiling face with open mouth and tightly closed eyes.“ • Other screen readers may read a description rather than the name.
- 16. How about Emoticons? • Emoticons are a concoction of symbols and punctuation marks that will be read out loud just like that: a series of symbols and punctuation marks. • Screen reader users might mistakenly take this as grammatical errors or typos in your message. :-) 🙂 O:-) 👼 X3 🐱 ¯_(ツ)_/¯ 🤷
- 17. NVDA Screen Reader Emoji Example
- 18. 8. HTML Accessible Templates – by D2L • Create accessible, professional- looking HTML content files with D2L’s free HTML template packages • A11y features are built into the underlying code • You concentrate on adding text, images, and other course resources • Maintains the Responsive Design needed for different size screens
- 19. Add Templates to Your Course • You can download a Zip file of free templates at the Brightspace Community • Steps to follow: 1. download Zip file to your computer 2. upload into the Manage Files section of your course 3. unzip into a file folder 4. enable for use throughout the course in Content Settings
- 20. 9. Brightspace A11y Checker Examples of content accessibility checking: • Heading order • Alternative text for images • Color contrast ratios • Proper list structure • Proper link formation • Proper markup of tables
- 21. A11y Checker is NOT Perfect • Decorative alt text (null alt text) is assumed to wrong – and is identified as no alt text. • Checker cannot actually check for captions in an embedded video.
- 22. 10. Learn to Test for A11y Issues • Keyboard-only Navigation Interaction Keystrokes Notes Navigate to interactive elements • Tab - navigate forward • Shift + Tab - navigate backward • Keyboard focus indicators must be present. • Navigation order should be logical and intuitive. Link • Enter - activate the link Button • Enter or Spacebar - activate the button • Ensure elements with ARIA role="button" can be activated with both key commands. Checkbox • Spacebar - check/uncheck a checkbox • Users can typically select zero, one, or multiple options from group of checkboxes.
- 23. Additional Testing Possibilities Use a Screen Reader to learn about that experience. 1. JAWS (Windows-only) • By Freedom Scientific. 40-minute free trail, $95 per year for 3 PCs 2. NVDA (Windows-only) • Free and Open Source, developed by the blind for the blind 3. VoiceOver (Mac-only) • Free, built into macOS 4. Windows Narrator (Built into Windows) • Free, turn on/off with Windows logo + Ctrl + Enter 5. Funkify Chrome Extension • Freemium model, free version includes color blind simulator, Dyslexia, and more
- 25. Appendix Follows Slides not used for this presentation
- 26. Ten Bright Ideas for #A11y 1. Decorative Images 2. Improving Alt Text 3. Alt Text for complex images 4. Finding videos w/good captions 5. Proper list formatting 6. Color blindness simulator 7. Proper link formation 8. Emojis and Emoticons 9. HTML Accessible Templates 10. Check out 3rd-Party tools
- 27. 8. 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
- 28. 9. Document Accessibility Toolbar (Word) • Vision Australia • Document Accessibility Toolbar (DAT) • Totally free • Installs a new menu/toolbar on the MS Word Ribbon • Windows-only (sorry Mac) • Works with Office 2010
- 29. All A11y tools on one ribbon menu
- 30. Makes Adding Alt-Text for Images Easier
- 31. 1. Use Null Alt Text for Decorative Images • Alt="" • Example code: <img src= “…pixabay-unicorn.png" 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.
- 32. Inserting a decorative image - checkbox
- 33. Inserting a decorative image – code with null alt text
- 34. Inserting a decorative image in an Announcement
- 35. 4. 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.
- 36. 4. YouTube Search Results
- 37. 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?
- 38. Two sites for #a11y information on external tools centerononlinelearning.org.res.ku.edu/ vpat www.web2access.org.uk/
Editor's Notes
- 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)
- This is a screenshot of a Course Content page inside Brightspace; showing the same Great Depression image embedded with surrounding text that explains what is in the photo. This approach would provide all students with access to the description of the image that the instructor finds important.
- 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.
- 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.
- Deuteranomaly, a color vision defect in which an altered spectral sensitivity of green retinal receptors, is by far the most common type of color vision deficiency, mildly affecting red–green hue discrimination in 5% of European males. It is hereditary. The green-sensitive cones are still there, but they are malfunctioning. About 1/3 of 1% in females
- Deuteranopia is caused by the complete absence of green retinal photoreceptors. It is found in about 1% of the male population and about 1/10 of 1% in females (or less). A deuteranope can only distinguish 2 to 3 different hues, whereas somebody with normal vision sees 7 different hues.
- 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.
- Word docs can be made highly accessible. However, they will only be accessible if you make them accessible. The DAT makes it quicker and easier to create an accessible Word document by: Providing a centralised location for accessibility functions Automating various parts of accessibility implementation Serving as a checklist for accessibility Serving as a validator for accessibility.
- Inspect grouping (for example) Run an accessibility check, as well as find and fix instances of insufficient text colour contrast. Use the inbuilt screen reader, WORDS, to simulate the experience of users who are blind. Create a 'clean-code' HTML version of your document by saving the document or by selecting a portion of the document.
- Let’s pop over to Word and take a look
- 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 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 first image indicates 73,600 search results for the search term “debits and credits” in YouTube. The second image shows the same search filtered by the closed caption requirement. Now there are 1,950 search results to choose from.
- 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.