Today’s WebinarUsing Web 2.0 Tools inside Brightspace,

with an Eye on Accessibility

Barry Dahl, Senior Community Manager

for the Brightspace Teaching and Learning Community

Upcoming WebinarsFive-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

Upcoming Ignite ForumsOntario

• Thursday, October 29

• 8 AM – 4 PM

• Mohawk College, Hamilton

Wisconsin• Thursday, November 12

• 8 AM – 4 PM

• Wisconsin Dells

FUSION 2016Washington, DC!!• Main conference:

July 18-19

• Post-conference workshops: July 20

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

WAMOETwo 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

Brightspace Teaching and Learning Community (TLC) Webinars

Hosted by Barry Dahl

Webinar Archives Available at

bit.ly/TLCwebinars

Let’s Get StartedUsing 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

Mea Culpa

My most popular presentation over 10 year period.

Mostly ignored issues related to web accessibility.

Have embed code, will travel.

Mixed Content – Browser Issue

Brightspace Learning Environment is a secure site.https://

Embedding content from an unsecure site (http://) creates a mixed content issue.

Embedded MixedContent in Brightspace

The blue custom widget is an embedded audio file using an audio player from an unsecure site.

It doesn’t show up at all on the page.

Unblocking Mixed Content

Each browser is a bit different

This photo is from Firefox

If you disable protection, you can view the embedded content

Unblocked MixedContent 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.

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.

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

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?

It’s 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?

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

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.

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: bit.ly/preziA11Y

• “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: bit.ly/preziA11Y2

• 5 months ago: they confirmed that they have made very little progress.

Is this the Answer?

• Does the lack of accessibility mean that you should stop using Prezi for all online course purposes?

• Probably not.

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

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: www.web2access.org.uk

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%

Example #2 Slideshare

LinkedIn’s 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

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.

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

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

Example #3 WordleWordle 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.

…wordle.net

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.net

• Wordle users must supply their own alt text

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

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

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

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

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

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• www.easychirp.com/features

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.

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

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.

• www.nvaccess.org

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

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.) doesn’t mean they are looking at a11y.

• It is up to the educators to provide learning resources that are accessible to their students.

• Being proactive in the provision of alternate means of accessing learning materials is the smart and caring approach to take.

Q & AReminder of Resources Mentioned

• Webinars Archives: bit.ly/TLCwebinars

• Widget Central: bit.ly/D2Lwidgets

• Web2Access: www.web2access.org.uk

• Prezi A11Y chat: bit.ly/preziA11Y and bit.ly/preziA11Y2

• Easy Chirp: www.easychirp.com

• JAWS screen reader: www.freedomscientific.com

• NVDA screen reader: www.nvaccess.org