Beyond the Bells and Whistles:

1
Beyond the Bells and Whistles Is Your
WebsiteUniversally Accessible?
Mark Aronica CAST Julie Duffield
WestED Beth E. Thrift SEIRTEC
2

• Section 508 A Brief History
• Web Accessibility
• Why worry about accessibility
• Where to start in making your website accessible
• Resources, Tools, Online Courses
• Multimedia on the Internet
• Making multimedia accessible
• Principles in captioning
• Synchronous events
• Universal Design
• Accessibility Universal Design
• Customizing Delivery
• Advocacy

3
Section 508 A Brief History

• Convergence of factors
• Disability Rights Movement
• Barrier-free Design to Universal Design
  Movement
• Advances in Rehabilitation Engineering
  Assistive Technologies

4
Section 508

• Increasing population of individuals with
  special needs
• Adults now live an average of 30 years longer
  than did adults at the beginning of the 20th
  century which means many are faced with
  diminishing
• Vision
• Hearing
• Mobility Agility
• Improved medical care means that more people
  survive once fatal accidents and illnesses

5
Section 508
Five Types of Disabilities to ConsiderWhen
Designing Websites

• Visual Impairment
• Hearing Impairment
• Mobility Impairment
• Cognitive Impairments
• Seizure Disorders

6
Some Website Design Implications

• Text equivalent for non-text elements
• Equivalent alternatives for multimedia
  presentations must be synchronized
• All information conveyed with color will also be
  available without color
• Redundant links shall be provided for each
  active region of a server-side image map
• Provide method that permits user to skip
  repetitive navigation links
• Design pages to avoid causing the screen to
  flicker with a frequency greater than 2Hz and
  lower than 55 Hz

7
Why should I be concerned whether my website is
accessible?

• Turn off images
• Turn off sound
• Unplug the mouse

8
Where to start
http//www.w3c.org/WAI/
9
Where to start

• Images provide ALT tags to provide descriptors
  for all images
• Image maps use client-side Map and text for
  hotspots
• Multi-media provide captioning and transcripts
  of audio and descriptions of video
• Hypertext links use text that makes sense when
  read out of context.
• Page organization use headings, lists, and
  consistent organizing structure
• Graphs charts summarize or use the longdesc
  attribute
• Scripts, applets, plug-ins provide alternate
  content
• Frames label frames
• Tables make line by line reading sensible
• Check your work validate HTML

10
W3C Web Accessibility Initiative
http//www.w3c.org/WAI/Resources/ch
11
A few online tools for checking accessibility

• Bobby
• The Wave
• Aprompt Toolkit

12
Bobby
http//bobby.cast.org/html/en/index.jsp
13
The Wave
http//www.temple.edu/inst_disabilities/piat/wave/
14
Aprompt Toolkit
http//aprompt.snow.utoronto.ca/seeit.htm
15
Online Courses

• Equal Access to Software Information - EASI
• Generating Assistive Technology Systemically -
  GENASYS
• Web Accessibility in Mind - WebAIM

16
EASI
http//www.rit.edu/easi/webkit.htm
17
GENASYS
http//genasys.usm.maine.edu/courses/
18
WebAIM
http//www.webaim.org/
19
Additional Resources

• Just a few hardware software resources for
  screen magnifiers readers, multilingual speech,
  Braille displays, training tutorials,
  shareware/freeware, and alternative input
  devices.
• Al Squared - http//www.aisquared.com/
• Alva Access Group - http//www.aagi.com
• Dolphin Computer Access - http//www.dolphinusa.c
  om
• Freedom Scientific (JAWS) - http//www.freedomsci
  entific.com
• GW-Micro (Window-Eyes) http//www.gwmicro.com
• Innovation Management Group, Inc. -
  http//www.imgpresents.com
• TVI ( Window Bridge) http//www.tvi-web.com/

20
Overview

• Several types of multimedia exist today
• New forms being created, things change fast
• Key concepts
• Caption sounds and images into text for reader
  software
• Allow keyboard navigation
• Todays agenda from older and better
  standardized to newer and less understood

21
Multimedia Is Wonderful, but...

• Avoid eye candy if it excludes parts of your
  audience
• Remember bandwidth limits
• Dial-in users may find multimedia too big
• To be accessible, transcription will be needed
• Text can be utilized for reading, text-to-speech,
  and Braille

22
Principles of Captioning for Multimedia

• Synchronized - the text content should appear at
  approximately the same time that audio would be
  available
• Equivalent - content provided in captions should
  be equivalent to that of the spoken word
• Accessible - caption content should be readily
  accessible and available to those who need it

Standards 508(b) W3C Guidelines
23
Audio/Video Captioning Options

• Text captions, synchronized with the images
• Text transcript file
• Best for text-only devices, Braille printers
• Audio description track for video
• Alternative language text/audio tracks

24
Internet Video Captions
Words appear below the image, when enabled in the
viewer
25
Audio/Video Examples

• Familiar logo in audio
• http//www.webaim.org/training2002/week4/captions/
  audioDesc.mp3
• Manhole video with audio and text
• http//main.wgbh.org/wgbh/movies/manhole.mov
• Pure transcript also available

26
Audio/Video Current Tools

• MAGpie -- A free tool from NCAM for creating
  captions and audio descriptions. Creates captions
  compatible with RealPlayer, QuickTime, and
  Windows Media Player.
• SMIL -- Synchronized Multimedia Integration
  Language -- is a general method of marking up
  content for many formats

27
Key Resources and Services

• EASI Online unit on creating accessible
  Internet multimedia
• http//easi.cc/workshop.htm
• NCAM (especially for video captioning)
• http//ncam.org
• Wisconsin
• http//wiscinfo.doit.wisc.edu/ltde/access/ecurbcut
  s
• WebAIM
• http//www.webaim.org/

28
Presentation Media

• PowerPoint
• Poor accessibility in PowerPoint itself
• Office 2K/XP generated HTML has outline, but
  lacks tags for images, tables, text boxes
• New tool helps guide you to fill the gaps
• http//www.rehab.uiuc.edu/ppt/index.html
• Acrobat PDF
• Future version will be accessible
• For now, produce an alternative in HTML and make
  it accessible
• http//www.webaim.org/articles/pdfandppt

29
Animation/Simulation

• Java
• SMIL support added recently (Soja, Schmunzel)
• Few older applications are accessible
• Flash
• New versions are designed for accessibility
• Guidelines for design on Macromedia site
• http//www.macromedia.com/macromedia/accessibility
  /features/flash/

30
Synchronous Events

• Text chats are easy, in principle
• Beware non-accessible java applets
• Voice presentations can be captioned in advance
• Voice chats require live transcription, the most
  cost-intensive element
• Example EASI Chatterbox
• http//easi.cc/cbox.htm

31
Example Chatterbox
Voice chat, text chat, and presentation at the
same time
32
Universal Design

• Many advantages when media has multiple
  representations
• Different learners use different aspects
• Quiet areas can be used
• Other languages can be added
• Navigating within a video is easier by searching
  captions
• General search tools like Google can find a
  transcript, and lead users to the media

33
Universal Design for Learning and Digital
Text Mark Aronica, CAST
34
Universal Design for Learning Overview
35
Universal Design for Learning Overview
36
Universal Design for Learning Overview
37
(No Transcript)
38
Teaching Every Student in the Digital Age
Universal Design for Learning
http//www.cast.org/tes
The companion Web site for Teaching Every Student
in the Digital Age includes complete text and
images from the print book with interactive Web
resources that

• enrich understanding of UDL
• apply UDL principles to the classroom
• build an active community of teachers and
  learners

TES
39
Teaching Every Student in the Digital Age
Universal Design for Learning
40
Teaching Every Student in the Digital Age
Universal Design for Learning
41
Teaching Every Student in the Digital Age
Universal Design for Learning
42
Printed Text
43
Digital Text
44
Flexible Display
45
Flexible Display
Tale of Two Cities It was the best of times, it
was the worst of times, it was the age of wisdom,
it was the age of
Tale of Two Cities It was the best of times, it
was the worst of times, it was the age of wisdom,
it was the age of
46
Structural Tags
47
Structural Tags Semantic Tags
48
To Meet the Need The Universal Learning Center
49
Universal Learning Center
50
Find a more comprehensive list of resources at
www.seirtec.org
www.wested.org
www.cast.org
51
Questions
52

• Mark Aronica CAST maronica_at_cast.org
• Julie Duffield WestED jduffie_at_wested.org
• Beth E.Thrift SEIRTEC bthrift_at_serve.org