Barry Dahl, Senior Community Managerfor the Brightspace Teaching and Learning Community

Using Web 2.0 Tools inside Brightspace

with an Eye on Accessibility

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)• 6 years ago: “Our goal is to make Prezi easily accessible and usable to

everyone.” source: bit.ly/preziA11Y2• 16 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 ScoreNot 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