Accessibility Challenges in University Web Environments

Mandy Eppley, Online Learning Consultant Parker Owens, Web Accessibility CoordinatorEastern Kentucky University

KY AHEAD Conference 08

Accessibility Challenges in University Web Environments

How can we take advantage of innovative learning environments and still meet ADA requirements for education?◦Websites◦Online Classes◦Web 2

Blogs Wikis Virtual Worlds Social Networking

PEW – Teens and Social Media, 12/19/2007

64% of online teenagers ages 12 to 17 engage in at least one type of content creation, up from 57% of online teens in 2004.

35% of all teen girls blog, compared with 20% of online boys, and 54% of wired girls post photos online compared with 40% of online boys.

Online teen boys are nearly twice as likely as online girls (19% vs. 10%) to have posted a video online somewhere where someone else could see it.

Demographics of Internet Users

PEW - Information Searches That Solve Problems, 12/2007 58% used the internet to get help. 53% professionals such as doctors,

lawyers or financial experts 45% sought out friends and family 36% consulted newspapers and

magazines 13% went to the public library

PEW –Teens and Technology, April, 2008

93% of teens say they write for their own pleasure

85% of teens ages 12-17 engage in some form of electronic personal communication (email, chat)

60% do not think of e-text as “writing” 50% use informal writing styles instead of

proper capitalization and punctuation in their school assignments

38% have used text shortcuts in school work (“LOL”)

25% have used emoticons☺ in school work

Web Challenges Educational organizational challenges

◦ Peer sharing different than a hierarchy◦ Ownership◦ Privacy◦ Control of content◦ Legal challenges

ADA Safety Ownership

Personal organizational challenges◦ Multiple IDs, passwords, avatars, websites

Web Challenges Technological challenges

◦Bandwidth◦Operating systems/software◦Skill levels◦Computer hardware

Accessibility Challenges Lack of keyboard shortcuts Not AT compatible Limitations to accessibility

◦How do you describe a google map?◦Can you provide transcripts for video

content on another site?

Websites

Websites Department, Association or

Group Class or Event Instructor

Public Private Online class

http://www.fredshead.info/

Different Requirements for Different Needs

Cyber Y Center Shared Website – Life on the Streets

Website Accessibility Issues Training – web skills Public or private access University branding Accessibility of technology,

software, and interface

Free Websites

Free Websites

Free Websites

Online Classrooms

What is an online learning system?

Courseware Management System (CMS): Refers to instruction in which the teacher and student are separated by space or time where the gap between the two is bridged through the use of online technologies. •Chat

•Assessment•Text matching•Group communication

•Email•Video•Audio•Text•Links

Online Learning Statistics Almost 3.5 million students were

taking at least one online course during the fall 2006 term.

The 9.7 percent growth rate for online enrollments far exceeds the 1.5 percent growth of the overall higher education student population.

Nearly 20% of all U.S. higher education students were taking at least one online course in the fall of 2006.

http://www.sloan-c.org/publications/survey/survey07.asp

Blackboard

Blackboard Statistics More than 67 million active users Over 55,000 regional, work-

related, collegiate, and high school networks

8 million students from 2,000 colleges and 22,000 high schools

EKU has more than 60,000 users

Moodle

WebCT

Sloodle

Simplify Classroom Interface Provide ample contact information Provide simple navigation in the left

panel with limited choices Change the standard button labels

for clarity Use text buttons whenever possible Use larger text in a simple font with

good contrast Content in multiple formats

Online Class Accessibility Issues All items in a classroom are

arguably necessary for a student, so there is a greater potential for lawsuits.

Instructors need to be an accessibility champion.

Instructors must be aware that accessibility does not ‘come’ with an application they choose to use with class.

Profiles

Delete Unused Tools

Less choices means a more easily understood interface. Keep number of choices below 7 if possible.

Delete Unused Navigation

Provide Simple Class Name Heading

Contrast

Clear type

No Animation

Provide Alternative Text

For persons with visual impairments, alternate methods of accessing the value and meaning of images is essential.

Golden rule: for any image or graphic content displayed on your website, ensure a text alternative and description is available.◦Exception - decorative images or spacer

gifs need a null alt attribute, or alt=“”

Add Alternative Text to Pictures

Select image, right-click for menu, choose size option

Blackboard “Alt Text”

Dreamweaver “Alt”

Provide Documents in Two Formats Video needs captions or a transcript Podcasts need a transcript PowerPoints need an outline

provided in plain text. Provide visual description where necessary.

Provide documents for download as well as presenting content in a Blackboard classroom

PowerPoint Suggestions

Use text no smaller than 24 pts.Use good contrast and an easy to read font.Use images or graphics to provide clarity.

Copy and Provide Outline in Plain Text

Click on Outline Tab

Select text

Copy/Paste to txt document

Upload to Blackboard class

Save Word Documents to Filtered HTML

Best Practices for Text

Place all text in a single column. Multi-columned text is confusing to screen readers.

AVOID USING ALL CAPITAL LETTERS. Use simple easy-to-read typefaces. San

serif fonts are easiest to read on the screen (ex: Verdana, Tahoma, Arial).

Do not use italics or fancy fonts. Use good contrast between background

and text color.

Use Headings Properly in Word

If you only change the font style, size, and color, no extra emphasis or info is given by the screen readers.

Not everyone can use chat. If you decide to use chat in your classroom, consider recording the discussion and providing a text file for an alternate assignment.

Accessibility Concerns with Chat

Web 2

Blogs, Wikis, Virtual Worlds, and Social and Sharing Networks

Advantages to Web 2 Cost in labor and system upkeep

by third parties. Blogs and wikis can be continued

past the end of a semester. Comments can come from the

entire world. Application training for students

is minimal.

Disadvantages to Web 2 Privacy Interference/spamming/griefing,

or other abuse from non-educational individuals

No control over changing applications or content if vendor goes out of business

Not accessible to some students with disabilities

Captchas CAPTCHA (for Completely

Automated Turing Test To Tell Computers and Humans Apart)

http://www.captcha.net/

ESP-PIX

Asirra/Petfinder.com

Other problems Language difference (CJK

characters)

Cognitive issues Braille users

What is a blog? Digital storytelling Opinions Can contain videos, audios, and

other media Comments add interactivity

Wikipedia Definition of Blog A blog is a website, usually maintained

by an individual, with regular entries of commentary, descriptions of events, or other material such as graphics or video.

Many blogs provide commentary or news on a particular subject; others function as more personal online diaries.

The ability for readers to leave comments in an interactive format.

Bloglines

EduBlogs

Free Blogs

Content Delivery Methods RSS paired with an aggregator

(ITunes) Web Email Disk or network Online Classroom

RSS feeds Subscription based Content pulled into aggregator

based on dates and items in plain text xml file<?xml version="1.0"?>

<rss version="2.0"><channel>

<title>EKU Web Accessibility</title><link>http://www.podcasts.eku.edu/owenspa/index.htm</link><description>Creating Accessible Podcasts</description><language>en-us</language><copyright>Copyright 2006, EKU Web Accessibility Office</copyright><lastBuildDate>Tue, 23 Jan 2007 10:52:22 GMT</lastBuildDate><webMaster>parker.owens@eku.edu</webMaster><ttl>1</ttl><item>

<title>Creating Accessible Podcasts</title><description>Techniques and tools for creating accessible

podcasts</description><pubDate>Tue, 23 Jan 2007 10:52:22 GMT</pubDate><enclosure

url="http://podcasts.eku.edu/owenspa/podcast1-part1.mp3" length="18862408" type="audio/mpeg"/>

<guid>http://podcasts.eku.edu/owenspa/podcast1-part1.mp3</guid></item>

</channel></rss>

How an RSS feed works<?xml version="1.0"?>

<rss version="2.0">

<channel>

<title>EKU Web Accessibility</title>

<link>http://www.podcasts.eku.edu/owenspa/index.htm</link>

<description>Creating Accessible Podcasts</description>

<language>en-us</language>

<copyright>Copyright 2006, EKU Web Accessibility Office</copyright>

<lastBuildDate>Tue, 23 Jan 2007 10:52:22 GMT</lastBuildDate>

<webMaster>parker.owens@eku.edu</webMaster>

<ttl>1</ttl>

<item>

Content uploaded to server.File locations uploaded to server.

Consumer subscribes to feedAggregator software checks feed and downloads new content

Consumer copies files toMp3 player, CD, telephone, or plays from computer.

Blog Accessibility Issues Captioning

◦Vlogs – ASL◦Podcasts◦Video

Template inaccessibility Sign-up inaccessibility

Disability Blogs

http://cripwheels.blogspot.com/

Disability Blogs

http://putzworld.blogspot.com/

Disability blogs http://www.e-bility.com/links/blog

s.php http://www.raggededgemagazine.

com/blogindex.html

AFB articles - How to Make Your Blog Accessible to Blind Readers

Choose an accessible service Describe your images Avoid the dreaded “click here" or “more..."! Put your blogroll on the right-hand side Check the comment form - is it labeled

properly? Use flexible font sizes Don't force links to open in new windows

http://www.afb.org/Section.asp?SectionID=4&TopicID=167&DocumentID=2757

What is a wiki? Not good for discussions, but good for a

collection of information or resources Wikipedia

◦ 684 million visitors yearly◦ 10 million articles in 259 languages

2.3 in English (as of 5/08)

Cons◦ No neutrality◦ Misinformation◦ Vandalism◦ Marketing

Wikipedia Definition of Wiki A wiki is a collection of web

pages designed to enable anyone who accesses it to contribute or modify content, using a simplified markup language.

Wikis are often used to create collaborative websites and to power community websites.

Wikis PB Wiki Wikipedia Dokuwiki promises Priority A

WCAG accessibility

http://wiki.splitbrain.org/wiki%3ADokuWiki

Wikispaces

Disability Wikis Disapedia

http://disapedia.com/index.php?title=Main_Page ◦2,175 articles◦100,000 page views◦1,500 visits a week

Wikibility Rights Movement 2.0 http://www.wikibilityrights.com/wiki/index.php?title=Main_Page

PBWiki

Boston College Wiki – student exam question collaboration

Wiki Accessibility Issues Captchas Uploaded content issues Interface inaccessibility

What is social networking? Organize, suggest, review, assign value Team building based on common

interests or topics Organization of media (photos, videos) Direct collaboration (google docs) Communication by tool (voice, text

chat, asl vlog; synchronous/asynchronous; requests for comments, collaboration, or refusal of feedback)

Social Networking Facebook LinkedIn – easiest to browse MySpace Friendster Other

◦ PLEs (community organization tools) Pageflake iGoogle Netvibes

◦ Sharing tools digg del.icio.us

◦ Virtual Worlds

Facebook Facebook is an effective and well

organized way to publicize, communicate and share information with a group.

Students post pictures, send messages, and post times and dates of events.

This is an example of a club that was organized by students on Eastern Kentucky University’s campus.

Blackboard Sync in Facebook

Facebook club at EKU This is an example of a club that

was organized by students on Eastern Kentucky University’s campus.

MySpace – inaccessible interface

MySpace Sign Up

Del.icio.us

Del.icio.us Benefits Students keep their resources

after they leave school, which makes it truly life long learning and keeps the students in contact for resources later.

It also helps students and instructors share a wealth of resources with each other.

Collaborate with professionals all over the globe.

Tag Clouds Social tagging, folksonomies

digg

Skype

Twitter – sharing micro tasks

Twitter Twitter allows you to broadcast and

receive messages from your computer or cell phone up to 140 characters in length.

‘Subscribers’ can either broadcast or see a message, which is called a “tweet.”

The key factor with using Twitter is that it takes the blogging concept to a whole new level of portability via cell phones, making it highly mobile.

Flickr – sharing photos

Ning – social groupings

Slideshare - slideshows

YouTube – sharing videos

YouTube

Add a Wikipedia Link

Wikipedia Link

Add a Slurl link to Second Life

Slurl link to Second Life

Google Maps – sharing maps

Egyptian Sphinx – Cairo, Egypt

BubbleShare - slideshows

What is a virtual world? A virtual world is a computer-based

simulated environment intended for its users to inhabit and interact via avatars. These avatars are usually depicted as textual, two-dimensional, or three-dimensional graphical representations, although other forms are possible (auditory and touch sensations for example). Some, but not all, virtual worlds allow for multiple users. - Wikipedia

Virtual Worlds Why Second Life? Other options

◦Whyville, ages 10-16◦ActiveWorlds◦Moove (2-d option)◦There

Virtual Worlds Accessibility Issues 3-d world Voice and text chat Browser/AT incompatibility Digital divide

Second Life as Example

Second Life as Example Text chat Voice chat Slide shows and videos Experiential Gestures Identity expression Coding Machinima, theater, emergency

planning Social experiments

Identity Issues

Can Second Life be ADA accessible?

Concerning the visual and 3-D environment of Second Life, you may be interested in how it is currently used:◦ Provides mobility for residents that have MS,

Cerebral Palsy, or other similar impairments. Many avatars created by users with mobility impairments use wheelchairs in SL.

◦ Text chat is not easily read by a screen reader. A screen readable text-only version of Second Life exists for residents without sight. Chat and voice logs can also be recorded for anyone that has a technical or cognitive impairment, or for later study.

◦ The SL interface and chat text size is customizable and makes use of alt-keys.

◦ Through an avatar, residents with real life (RL) physical deformities or obvious disabilities can become able-bodied, and vice versa.

◦ Autistic students can practice social skills.

Can Second Life be ADA accessible?

Disability awareness simulations can be structured using avatar wheelchairs, or by changing chat and voice options.

Accessibility can be achieved in most applications with work from the facilitator hosting the event.

A real time streaming event would require real time captioning or interpretation.

Visual description should be available for any environment, as an explanation for odd sounds or text/voice chat references.

SLeek SLeek is an open source low tech

client to use SL without all the fancy graphics. It would be useful for individuals with visual impairments, but consider also its use for students in low tech environments, for instance at home on an old computer with a modem

http://code.google.com/p/sleek/

Movable Life MovableLife allows Second Life users to

log in to Second Life using only a web browser. MovableLife allows chat, IM, search, teleport, manage friends, groups, and much more, providing a Second Life experience without all the 3D graphics. Movable Life article

Another advantage to using a regular browser, is that it can be used by iphones and other devices, and also the bandwidth is reduced for use on older computers with modems.

http://www.news.com/8301-13772_3-9796403-52.html?part=rss&subj=news&tag=2547-1_3-0-5

Accessing Second Life: Universal Design in a Virtual World

Student Recruitment

Wilde Cunningham – SL avatar An avatar controlled by nine adults

(ages 30-70) with cerebral palsy at a day care.

Most are wheelchair users and rely on help for almost all aspects of their daily lives, yet in Second Life they have built their own houses, have pets, gardens, even a baseball field. They also have many close friends and a large social network.

Wilde Cunningham – SL avatar

“Second Life gives me the chance to be the person I feel I was born to be,” says John S, 32, one of the group. “Being in Second Life is how I imagine an innocent man who had been locked up wrongly feels when he is finally set free. In Second Life I get to call the shots.”

http://www.cbsnews.com/sections/i_video/main500251.shtml?id=3547970n

2nDisability Scripts Fez Rutherford can provide

scripts on blindness, epilepsy, Tourette’s Syndrome, stuttering, etc.

http://2ndisability.blogspot.com/

Wheelies Nightclub - SL

Second Life Resident Simon Walsh has organized the creation of a new nightclub in Second Life called Wheelies. Wheelies aims to "make guests feel comfortable about disability as well as dancing, drinking and just plain having a good time.“

http://www.flickr.com/photos/pathfinderlinden/

234326420/  

Social Networking Accessibility Issues

Captchas Inaccessible interface for

entering or viewing content

How are all these applications the same?

All web based◦Delivered over an internet

connection◦Content is within a browser◦None of them are perfect for every

student

In a Nutshell Best web accessibility practices Universal design

Best Web Accessibility Practices No captchas Ability to create accessible

templates that make use of semantic info

Options beyond toolbars (shortcuts)

Privacy Ability to upload transcripts or

other alternative content

Shortcut keys and ability to use alternative input devices, especially for games (don’t require mouseover actions for mobility impaired, blind)

Use correct web writing with small blocks of text and many headings for scanning (cognitive, general usability)

Best Web Accessibility Practices

Scaling text size, contrast between text and background (low vision, color-blind, seniors, children)

Check broken links and spelling on a regular basis (blind, cognitive, general usability, screen readers, mobility impaired)

Best Web Accessibility Practices

Web pages should not be dependent on a certain resolution, color depth, font size, or window size (mobility, visual impairments, assistive technology)

Check your pages in different browsers to ensure they will work cross platforms Provide essential content in two formats for example PDF, MP3 (general usability, blind, deaf)

Best Web Accessibility Practices

Provide essential content in two formats for example a PDF and MP3 (general usability, blind, deaf)

Use headings, lists and other semantic info (blind, low vision, cognitive)

Best Web Accessibility Practices

Best Web Accessibility Practices Correct common alt attribute and

alternative text mistakes◦Function of image > description◦Provide null alts for decorative

images or layout spacers◦Create null alts for images enclosed

in text links◦Create null alts for images

referenced and described in main content or simplify

Universal Design Simple navigation (no more than 7

links) Clearly labeled navigation Use of white space Standard relatively-sized sans-serif

font Correct web writing Broken links Spelling Content in two formats

Takeaway

Even though a specific online application may not be accessible to a student, the general framework of wikis, blogs, online learning environments, and virtual worlds is valid and with careful choices, most can be used with a few refinements.

Go for it!

Resources Spell check, included in blog host framework, MS

Word or other word processing programs, or http://spellcheck.net

Link check http://validator.w3.org/checklink, XENU (free http://home.snafu.de/tilman/xenulink.html ), and website management programs like Dreamweaver.

HTML validator http://validator.w3.org/ CSS validator http://jigsaw.w3.org/css-validator/ Accessibility Validators

http://fae.cita.uiuc.edu/ http://wave.webaim.org/index.jsp

Reading levels and other reading tests. http://juicystudio.com/services/readability.php

Lynx 'text-only' viewer http://www.yellowpipe.com/yis/tools/lynx/lynxview.cgi

WebSiteOptimization.com http://www.websiteoptimization.com/services/analyze/

Accessibility Color Wheel http://gmazzocato.altervista.org/colorwheel/wheel.php

Contact Us

Mandy.Eppley@eku.eduParker.Owens@eku.edu

Eastern Kentucky University

Slide show is available at http://people.eku.edu/eppleym/

kyahead.ppt orhttp://people.eku.edu/owenspa