using web 2.0 tools inside brightspace with an eye on accessibility

Download Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility

Post on 23-Jan-2018




2 download

Embed Size (px)


  1. 1. Todays Webinar Using Web 2.0 Tools inside Brightspace, with an Eye on Accessibility Barry Dahl, Senior Community Manager for the Brightspace Teaching and Learning Community
  2. 2. Upcoming Webinars Five-Minute Idea Exchange for Teaching and Learning with Brightspace in Higher Ed Tue. Nov 3 at 3:00 ET Various D2L Community Members No Muss! No Fuss! How to Become a Quality Matters Star Using Brightspace Tue. Nov 10 at 3:00 ET Jane Sprangers, Hennepin Technical College
  3. 3. Upcoming Ignite ForumsOntario Thursday, October 29 8 AM 4 PM Mohawk College, Hamilton Wisconsin Thursday, November 12 8 AM 4 PM Wisconsin Dells
  4. 4. FUSION 2016 Washington, DC!! Main conference: July 18-19 Post-conference workshops: July 20
  5. 5. Web Accessibility MOOC for Online EducatorsCollaboration between Portland CC and Brightspace Teaching and Learning Community Free on D2L Open Courses Just Started! Not too late to get in. 5 weeks of active course facilitation, with more time allowed if needed
  6. 6. WAMOE Two certificate levels: 1. Honors 2. Highest Honors Mostly activity-based learning Facilitated by Karen Sorensen of PCC and Barry Dahl of D2L Twitter hashtag: #WAMOE
  7. 7. Brightspace Teaching and Learning Community (TLC) Webinars Hosted by Barry Dahl Webinar Archives Available at
  8. 8. Lets Get Started Using Web 2.0 Tools inside Brightspace, with an Eye on Accessibility Barry Dahl, Senior Community Manager for the Brightspace Teaching and Learning Community Click here to watch the webinar
  9. 9. Mea Culpa My most popular presentation over 10 year period. Mostly ignored issues related to web accessibility. Have embed code, will travel.
  10. 10. Mixed Content Browser Issue Brightspace Learning Environment is a secure site. https:// Embedding content from an unsecure site (http://) creates a mixed content issue.
  11. 11. Embedded Mixed Content in Brightspace The blue custom widget is an embedded audio file using an audio player from an unsecure site. It doesnt show up at all on the page.
  12. 12. Unblocking Mixed Content Each browser is a bit different This photo is from Firefox If you disable protection, you can view the embedded content
  13. 13. Unblocked Mixed Content in Brightspace The embedded audio file from an unsecure site in the blue custom widget is now visible. Many students will struggle with mixed content.
  14. 14. Better Idea: Use only Secure Content There are a growing number of web-based tools that have made their sites secure. Avoid mixed content whenever possible.
  15. 15. Examples of https: sites to use Google Docs & such Zoho Docs, Sheet, Show YouTube embeds Internet archive audio embed Storify curated Tweets Diigo tag cloud, Trello, Soundcloud, Zotero
  16. 16. However! Embedding external content from an https: site is great and all that, however Now we come to issue #2 Is that content accessible to students using Assistive Technology or those who rely on keyboard-only access?
  17. 17. Its Not Just One Issue Today we will focus on the top issue listed below. The others are also very important: 1. If you are using a web-based tool to create course content or an embeddable object into an online course, is that content accessible to students with disabilities? 2. If you are having students use web-based tools to create class- related work, are the creation tools accessible to them? 3. If you, as instructor, rely on assistive technology (AT) to do your work, will these sites work with your needed AT?
  18. 18. Example #1 Prezi Prezi helps you organize your thoughts and deliver them in a clearer way that really makes an impact on your audience and helps them reach that ah-hah moment faster. Peter Arvai CEO & Cofounder
  19. 19. Embedded Prezis are Inaccessible The text in this presentation cannot be read by a screen reader program. The image cannot have alt text applied in the Prezi interface. On the plus side, you can advance using keyboard shortcuts.
  20. 20. Prezi Talks about Accessibility When asked (by a WAMOE participant!) whether they have a VPAT (Voluntary Product Accessibility Template) that highlights their web accessibility features: I'm afraid we don't currently have a VPAT for Prezi. Prezi is not ADA compliant. source: I'm afraid the platform that we use cannot be read by accessibility software. Section 508-conformance is not in our current plans. (same) 5 years ago: Our goal is to make Prezi easily accessible and usable to everyone. source: 5 months ago: they confirmed that they have made very little progress.
  21. 21. Is this the Answer? Does the lack of accessibility mean that you should stop using Prezi for all online course purposes? Probably not.
  22. 22. Is this a Better Answer? Rather than stop using Prezi, also consider providing an alternative. Possibilities: Same content in an accessible PPT file Export Prezi to PDF then make the PDF accessible
  23. 23. Prezi Score 38% What does that mean? That is the score for Prezi by the accessibility reviewers at Web2Access, an awesome resource from the University of Southampton. URL:
  24. 24. Web2Access Sample Scores Mindmeister 47% Glogster 64% Animoto 67% Flickr 69% Blogger 80% Soundcloud 80% Amazon 87% Wordpress 89% Yammer 93% TED Talks 93% Hot Potatoes 93% Microsoft Word 96%
  25. 25. Example #2 Slideshare LinkedIns SlideShare is a Web 2.0 based slide hosting service. Users can upload files privately or publicly in the following file formats: PowerPoint, PDF, Keynote or OpenDocument presentations. Wikipedia
  26. 26. Embedded Slideshares are Inaccessible The text on this presentation slide cannot be read by a screen reader program. The slide is an image and cannot have alt text applied in the Slideshare interface.
  27. 27. Slideshare Score 67% Biggest obstacles? Each slide is an image. No way to add alt text to image Embedded slides not read by screen reading programs Slide/speaker notes are not available through embed They are available on the Slideshare page, but tough to navigate to
  28. 28. Workaround for Slideshare? Make the original PPT accessible to screen readers Upload to Slideshare and embed for sighted users Provide link to accessible PPT for students using assistive technology and keyboard-only access
  29. 29. Example #3 Wordle Wordle is a toy for generating word clouds from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes.
  30. 30. Wordle Clouds are Complex Images The text in this screenshot cannot be read by a screen reader program. You cannot apply alt text to an image at Wordle users must supply their own alt text
  31. 31. Wordle Score Not scored yet Biggest obstacles? Everything with Wordle is an obstacle You have an image that is difficult to describe, unless you simply provide all the important text elements, including information about frequency of occurrence
  32. 32. Workaround for Wordle? That depends: Is it just eye candy (decorative)? If so, then accessibility is irrelevant Is it informative? If so, then provide alternative text as either Surrounding text Alt text with image (if brief amount of text) Long description
  33. 33. Example #4 Twitter Twitter is an online social networking service that enables users to send and read short 140- character messages called "tweets". Registered users can read and post tweets, but unregistered users can only read them. Wikipedia
  34. 34. Embedded Tweets are Readable by AT The tweets in this custom widget on a Brightspace course home page can be read by the JAWS screen reader program. Links are clickable Keyboard-only access works
  35. 35. Twitter Score 82% Biggest obstacles? User generated links in tweets are usually cryptic and shortened Tab order is generally good and logical, short cut keys are offered but no skip navigation link Tweets included images might not have sufficient text
  36. 36. Making Twitter Even Better Easy Chirp Was called Accessible Twitter works with keyboard-only, older browsers like IE8, lowband internet connection, and without JavaScript. Tweet an image with a caption and long description. See all a11y features at
  37. 37. Posting photo with Easy Chirp If this photo was being tweeted for a class, the long description is an opportunity to explain its importance in more than 140 characters.
  38. 38. Test the Sites You Use Go to Freedom Scientific dot com Select Downloads link Install JAWS on your PC 40-minute trial version can be re- used after a PC reboot
  39. 39. Totally Free Screen Reader NVDA (NonVisual Desktop Access) is a free screen reader which enables blind and vision impaired people to use computers. Normally screen readers are expensive, making them unaffordable for many blind people. NVDA has been downloaded 70,000+ times, in 43 languages.
  40. 40. External Content in Custom Widgets Each of the custom widgets on this screenshot can be read by the JAWS screen reader. Going clockwise from top left Text with Zoho Writer document (or Google Doc) Semester Countdown with Zoho Spreadsheet Audio player, with HTML5 audio code Or Internet Archive embed Curated Tweets with Storify
  41. 41. A Few Parting Thoughts Most of these web-based tools are under no legal obligation to improve the web a11y of their sites. Even having an offering targeted at education (Glogster, Prezi, Edublogs, etc.) doesnt mean they are looking at a11y. It is up to the educ