James Newton

1
Creating Accessible Online Course Materials

• James Newton
• Accessibility Specialist
• james.newton_at_tafe.tas.edu.au

2
Introduction

• If your course materials are not accessible,
  having an accessible Course Management System
  doesnt mean much
• Creating accessible materials is not overly
  difficultjust requires forethought
• Accessible materials are easier for everyone
• Making your documents and files accessible is a
  good beginning

3
Todays Objectives

• To give you a conceptual understanding of
  designing accessible materials
• Show you how to make some course materials
  accessible
• Word and PowerPoint documents
• PDF files
• Flash
• Video captioning using MAGpie
• Introduce you to JAWS
• Have some fun along the way

4
Is Accessibility Important?

• Approximately 20 percent of the Australian
  population has a physical disability
• Not all of those disabilities affect access
• Vision, hearing, mobility and cognitive problems
  do affect access
• The Australian population is aging
• Vision hearing degrades, changes in dexterity
  memory
• Some of us become temporarily disabled due to
  accident or illness
• For those in education or governmentits the law

5
Accessibility as a social issue

• Low end computers
• May not be able to run latest browsers/plug-ins
• Slow modems
• Large pages/images/animations take a long time to
  download
• Downloading plug-ins and new browsers is
  problematic
• Poor bandwidth due to geographical location
• Rural locations, some countries with limited
  bandwidth
• Limited computer literacy
• Not confident about installing plug-ins, new
  browsers

6
Accessibility as a legal issue

• Many countries have legislation or policy
  relating to web accessibility
• Australia Disability Discrimination Act 1992
• United States amendment to the Rehabilitation
  Act (Section 508)
• For details of legislation effective elsewhere
  see http//www.w3.org/WAI/Policy/
• Australia was the first country to have its laws
  tested
• Maguire v SOCOG

7
Accessibility as a legal issue

• Section 24 of the Disability Discrimination Act
  1992 makes it unlawful for online information to
  be inaccessible to the disabled
• Legislation relates to
• Educational sites
• Only defense is the imposition of unjustifiable
  hardship

8
Accessibility Basics

• Persons with disabilities use course materials
  differently
• Persons who are blind listen to course documents
• Persons who are deaf read video presentations
• Persons who lack motor control use the keyboard
  or pointers to navigate
• Persons with color blindness cant differentiate
  between red and green
• Persons with learning disabilities need focus

9
Accessibility Basics

• Implications
• You must design materials to accommodate the
  needs of persons with disabilities
• Adaptation to your materials is not a good
  option!
• Fortunately
• Designing accessible materials improves
  everyones experience

10
Designing for Blindness

• Blind persons need web content read to them
• They use
• Technologies that literally read through a
  website as users navigate with the keyboard
• Screen readers (JAWS, Window-Eyes)
• Talking web browsers (IBM Home Page Reader)
• Text-based browsers (Lynx)
• Braille displays (less often)

• Users benefit from
• Course materials that include common style tags,
  table headers and image descriptions

11
Designing for Low Vision

• Persons with low vision need assistance reading
  text and images
• They use
• Screen enlargers (like ZoomText)
• Large screen CRTs
• Browsers set at high zoom levels and/or enlarged
  text
• Programs set to reverse (white on black) text
• They benefit from
• Materials that accommodate text and image
  magnification

12
Designing for Colour Blindness

• Colour
• 10 of male population is colour-blind
• See green and red as grey
• Cannot rely on colour only to differentiate
  objects
• Bad Example Required fields are shown in red
• Need or some other identifying characteristic

13
Colour Blindness Example

• To a person without colour blindness
• these circles look different.

14
Colour Blindness Example

• To a person with colour blindness
• these circles look quite similar.

15
Accessible Appearance

• To simulate Colour Blindness
• Open Vischeck link http//www.vischeck.com/vische
  ck/vischeckURL.php
• Copy the URL into colour check
• Go to the Colour heading on the page
• What do you see?
• For more information about the subject,
  Lighthouse International provides an excellent
  article on Effective Colour Contrast at
  http//www.lighthouse.org/color_contrast.htm

16
Designing for Deafness

• Deaf people need text for information
• They use
• The same computer equipment as you or I
• Interpreters
• They benefit from
• Video that includes captioning or transcripts
• Captioning is best because it retains the most
  context
• Transcripts are preferable to nothing
• Video, Flash animation, or auditory prompts must
  have text or visual supplementationSection 508

17
Designing for Deafness

• People who are born deaf often have a more
  reduced vocabulary
• Making your course accessible for students with
  dyslexia will also assist those students born
  deaf.

18
Designing for Dyslexia

• 10 of your students will have some degree of
  dyslexia
• Always place the salient points first
• Avoid unnecessary wording
• Bite-sized chunks of learning aid all students
  when reading from a screen
• Reading from a screen will slow a reader down by
  approximately 10 of their normal reading rate
  when reading from hard copy.

19
Choosing Fonts

• Times New Roman is not thought to be easy to read
  and is often used in formal documentation
• Arial is the preferred font for hard copy for
  light reading
• Verdana is often chosen for web pages
• Trebuchet MS is considered an easy to read font
  for dyslexic students because of its even
  characteristics.
• Note All these fonts are in the same number of
  points (32)

20
Text Composition(with Dyslexic students in mind)

• Short sentences (bullet points)
• Efficient use of words to impart knowledge
• Vital information first
• Reduce scrolling to a minimum.

21
Designing for Control

• Persons with impaired motor control need varying
  assistance
• They use (according to severity)
• Modified mice
• Special keyboards
• Head mounted pointers
• Eye-based, blink and click tools

• They benefit from
• Large clickable areas and streamlined actions
• Like preloading cursors in text boxes

22
Designing for Cognition

• Persons with cognitive impairments need
• Enhanced focus
• Multiple representations
• Minimal distraction and a quiet environment
• Support for short term memory
• They use
• Text enlargers with audio and highlighting
  (Kurzweil)
• They benefit from
• Minimal animation, concise text, logical
  organisation, and visual representations
• Like paragraph headings, meaningful icons and
  pictures

23
Designing for Accessibility

• Key things to remember when creating course
  materials
• Images are meaningless, unless described
• Tables need column and row names to make sense
• URLs for links are terrible descriptors
• Starting with accessible documents (especially in
  Word) is much easier than retrofitting
• Rememberyou have to provide context to a screen
  reader to give it to users!

24
Accessible Microsoft Word

• New Documents
• Need Microsoft Word 2000 or XP (PC)
• Use Format ? Styles to tag page content
• Save as Read only

25
Accessible Microsoft Word

• Gives screen readers information about layout
• Persons with visual impairments cant see page
• Adaptive technology has to give audio picture
• Style Tags provide context
• Similar to making html pages accessible
• Identify headings, section headers (Header 1,
  etc.), provide alternative text for images
• You cannot, however, mark up tables with Styles
• No Table header tags
• Even though JAWS says you can
• Instead you have to identify headers within JAWS

26
Word Example

• Here is an untagged Word document
• UntaggedDocument.doc
• This is how it sounds (JAWS)
• Read using JAWS

27
Word Example

• Here is a tagged Word document
• TaggedDocument.doc
• This is how it sounds (JAWS)
• With tags and more accessible presentation
• Read using JAWS
• Notice the difference?

28
Accessible PowerPoint

• Two ways to create accessible PowerPoint
• Use Microsofts Design Templates.
• Use sans-serif font for your presentations, such
  as Arial.
• Dont clutter the slides with too much text.
• Avoid adding text-boxes use the set PowerPoint
  layouts (autolayout/slide layout) for your text.
  The text entered also appears to the left of your
  slide, in Normal view.
• ensure that all the text is visible in the left
  column (Outline view) when in normal view.
• Use the Notes Pane to describe graphs, diagrams
  or images.
• Or, create PowerPoint document and convert it
  into html with Export Office Wizard (better!)

29
(No Transcript)
30
Accessible PowerPoint

• Tool from University of Illinois
• Helps convert PowerPoint presentations into
  accessible html (http//cita.rehab.uiuc.edu/softwa
  re/office/)
• Works in all browsers
• Has Text-Only, Mostly Text, or Graphic view
• User-friendly navigation
• Allows user to provide
• Short (alt) and expanded (longdesc) descriptions
• Automatically includes table information for
  charts

31
Accessible PDF

• Adobe Acrobat Reader Full Version 6.0
• Embedded speech synthesizer
• Accessible w/ limitations
• If document was not created with accessibility in
  mind, it will still pose significant
  accessibility challenges to users

32
PDF Accessibility Issues

• Jakob Nielsen's Alertbox, June 10, 2001
• Forcing users to browse PDF files makes
  usability approximately 300 worse compared to
  HTML pages.

33
PDF Accessibility Issues

• content is optimised for 8.5 x 11 paper, not
  for display in a browser window
• small peephole on a big, complicated layout -
  can't scroll in the simple, linear manner they
  are accustomed to on the Web

34
PDF Accessibility Issues

• lack navigation bars to help users move within
  the information space and relate to the rest of
  the site
• documents often very big - inability to easily
  navigate them takes a toll on users.
• typically lack hypertext, because they are
  designed with print in mind

?
35
PDF Accessibility Issues

• Non-standard User Interface
• scrolling works differently, as do certain
  commands, such as the one to make text larger (or
  smaller)
• after finishing with a PDF file, users may close
  the window instead of using the Back button,
  losing their navigation history

36
PDF Accessibility Issues

• According to Nielsen - PDF is good for documents
  that are intended for print.
• But what about individuals who
• dont have a printer available
• are using a portable device (wireless laptop,
  palm device)
• cant read conventional print documents

37
Still not convinced?

• So you are going to use PDF files because
• Your documents are intended only for print out,
  and not for reading online.
• You dont buy into any of the arguments against
  using this proprietary, browsing challenged,
  bulky format.
• You need to convert 100s of files to a web
  format, and dont have the resources to do
  anything else.
• Now what?

38
Accessible PDF

• PDF files must be created with accessibility in
  mind
• Tagged PDF is more Accessible PDF
• Must use latest version of Acrobat 6.0
• Extensions currently available for earlier
  versions of the software.

39
Accessible PDF Files

• To create accessible PDF documents, need
• Microsoft Word XP or 2000
• Adobe Acrobat 5.05 with Acrobat 5.05
  Accessibility and Forms Patch
• www.adobe.com/support/downloads/detail.jsp?hexID8
  8de
• -Or-
• Microsoft Word XP or 2000 OR Macintosh Word for
  OSX
• Adobe Acrobat 6.0

40
Accessible PDF

• 3 ways to generate tagged PDF
• Use MS Word to create the document, then convert
  to PDF
• Run Make Accessible plug-in, then clean it up
• The hard way create the tags yourself

41
What happened next?

• In attempt to redeem the situation, Adobe offered
  tools that convert PDF files into HTML or plain
  text files.
• On-the-fly conversion
• Forms and email
• Plug-ins?

42
What happened next?

• In attempt to redeem the situation, Adobe offered
  tools that convert PDF files into HTML or plain
  text files.
• On-the-fly conversion
• Forms and email
• Plug-ins?

43
Still not convinced?

• So you are going to use PDF files because
• Your documents are intended only for print out,
  and not for reading online.
• You dont buy into any of the arguments against
  using this proprietary, browsing challenged,
  bulky format.
• You need to convert 100s of files to a web
  format, and dont have the resources to do
  anything else.
• Now what?

44
Accessible PDF Files

• To create accessible PDF documents, need
• Microsoft Word XP or 2000
• Adobe Acrobat 5.05 with Acrobat 5.05
  Accessibility and Forms Patch
• www.adobe.com/support/downloads/detail.jsp?hexID8
  8de
• -Or-
• Microsoft Word XP or 2000 OR Macintosh Word for
  OSX
• Adobe Acrobat 6.0

45
Accessible PDF Files

• Yes, you can create accessible documents with a
  Macintosh, using Word OS X
• Save as read-only Word document
• Open and save as PDF file in Acrobat 6.0
• Mac Question Can I just print my Word
  document as a PDF file and not use Acrobat and
  have it accessible?
• No, screen readers wont recognize the tagging

46
Accessible PDFAcrobat 6.0

• Open Adobe Acrobat
• Open MyTaggedDocument.doc
• Document you just saved
• It will convert automatically--A nice
  improvement!
• Save it as MyTaggedDocument.pdf
• Check its accessibility
• Open MyTaggedDocument.pdf in Acrobat
• Go to Advanced and click Accessibility/Quick
  Check
• What did it show?

47
Accessible PDFAcrobat 6.0

• Acrobat will retain paragraph headings and table
  headers
• But you will need to re-add ltaltgt text for
  illustrations, and subtle tags like Caption

48
Accessible PDF Files

• This is how a tagged PDF file will sound more or
  less in JAWS
• Play TaggedDocument.pdf

49
Accessible PDF Files

• Making old PDF files accessible
• Similar to retrofitting a website by adding tags
• Adobe makes it easier, but not foolproof
• Download Adobe Make Accessible Plug-in (done)
• www.adobe.com/support/downloads/detail.jsp?hexID8
  8de
• or use Acrobat 6.0
• Which contains an accessibility section under
  Advanced

50
Your Choice

• may cause barriers to access for some users
• presents inherent usability issues
• requires significant author awareness to create
  accessibility features to mitigate barriers
• is quick and easy to create
• low cost for extensive conversion projects
• good for print presentations and standardized
  visual presentation

51
What is Flash?

• Flash combines drawing tools with ActionScript, a
  relatively robust object oriented scripting
  language that supports increasingly complex
  types of interactivity.
• Flash supports a number of file formats, so that
  images, audio and video may be presented within a
  Flash movie.

52
?s about Flash

• If a learner is not using a mouse for any reason,
  is it possible to navigate the resource using a
  keyboard instead?
• If a learner is blind or low vision, will they be
  able to use a screen reader to navigate, access
  the textual content, etc.
• If a learner is deaf or hard of hearing, will
  alternative formats for audio components by
  available?

53
Flash Accessibility Issues

• What Flash features limited accessibility?
• A published flash movie is a graphic, therefore,
  most types of text would not be read by screen
  readers.
• There was no way to provide alternative text for
  static images and animations.
• Flash movies had no anchors, so browser back and
  forward buttons were disabled.
• Flash allows for the development of complex
  navigation systems.

54
Text Alternatives

• For users with sensory impairments, alternative
  formats can be helpful.
• For example
• Videos can include captions and audio components
  can include transcripts
• Audio cues can be reinforced with visual cues.
• A fall back in the form of HTML-based content may
  also be provided. This process may be supported
  through the Flash authoring interface.

55
Focus Issue

• Providing keyboard accessibility (also known as
  device independence) has been a long-standing
  issue with Flash objects embedded in web pages.

56
So What is the Problem with Keyboard Access?

• Keyboard users frequently become "trapped" in a
  Flash object, unable to move focus to other page
  elements.
• Note that the problems are related to the
  interoperability of the plug-in, the browser and
  the adaptive technology. The difficulty is not
  the fault of any single product.

57
Changes in Flash MX

• Flash MX is a significant upgrade to previous
  versions of Flash.
• Components were introduced.
• ActionScript was extended.
• Accessibility Features were introduced.

58
Changes in Flash MX

• Flash MX is a significant upgrade to previous
  versions of Flash.
• Components were introduced.
• ActionScript was extended.
• Accessibility Features were introduced.

59
Some Limitations

• Users MUST access Flash using Internet Explorer
  it is the only browser currently supporting the
  MSAA standard.
• Flash 6 Player is not the most widespread version
  of the Flash Player and all of the accessibility
  features discussed here require this version of
  the plug-in.
• Many campus users lack administrative access and,
  therefore, cannot install or upgrade the Flash
  Player on their computers.

60
Flash MX Accessibility Features

• Accessibility Panel Flash MX Authoring
  Environment

61
Flash MX Accessibility Panel

• The new Accessibility Panel allows text
  equivalents to be specified.
• Two main fields
• Name
• Description

62
Flash MX Accessibility Panel

• Make Movie Accessible allows content to be hidden
  and/ or to group related objects.
• Make Child Objects Accessible allows developer to
  hide animated elements from the users screen
  reader.

63
Some Tips for Creating Accessible Content in
Flash MX

• Provide text equivalents for graphic elements,
  including buttons, navigation animations and
  animated text.
• Avoid animating buttons because this updates the
  users screen and will cause a screen reader to
  return to the top of the page.

64
Some Tips for Creating Accessible Content in
Flash MX

• Consider audio carefully. Audio components will
  make a screen reader very difficult to hear.
• Enable keyboard shortcuts for navigation
  elements, form inputs and buttons.
• Check tab order to ensure that it is logical.

65
I have theory

• in theory one can create individual Flash objects
  that are accessible in and of themselves
• However, in practice Flash objects embedded in a
  page are only accessible to certain combinations
  of assistive technologies, and are not accessible
  in the spirit of WCAG 1.0
• May be authored accessibly, or very inaccessibly
• Difficult to test

66
Resources

• For Macromedias guidelines to accessible design
  using Flash MX see
• http//www.macromedia.com/macromedia/accessibilit
  y/features/flash/http//www.macromedia.com/resou
  rces/elearning/objects/

67
For Recent Reviews

• FlashMX Clarifying the Concept by Joe Clark
• http//www.alistapart.com/articles/flashmxclarifyi
  ng/
• Flash MX Moving Toward Accessible Rich Media by
  Andrew Kirkpatrick
• http//www.alistapart.com/articles/flashmxmoving/

68
Other Resources

•  W3C WAI Web Content Accessibility Guidelines 1.0
• http//www.w3.org/TR/WAI-WEBCONTENT/

69
Adding Video Captions

• Why captions instead of transcripts?
• Section 508 requires that text be provided in
  addition to audio and that it be synchronized
  with multimedia (video, Flash, etc.)
• Better context for a deaf or hard of hearing
  person
• Captions improve comprehension for everyone

70
Captioning with MAGpie

• MAGpie was developed by W3C and NCAM (National
  Center for Accessible Media)
• Free!
• Easy to use!
• Can write to the three most popular viewer
  formats (RealPlayer, QuickTime and Windows Media
  Player)!
• New version 2.0 that works with OS X
• There is a Flash captioner in beta

71
MAGpie Comments

• MAGpie 2.0 is both Mac and PC ready
• Cannot caption RealMedia or Windows video in Macs
• MAGpie uses two video recorders
• QuickTime for QuickTime (.mov) clips
• Oratrix GRiNS for Real media (.rm)
• Either accepts .wav, .mpeg/mpg and .avi clips
• Allows captioning or audio descriptions
• Single or multiple lines (example English and
  Spanish)
• Customize the size and color of captions
• Import existing captions or audio descriptions

72
Using MAGpie

• Download MAGpie
• Go to http//ncam.wgbh.org/webaccess/magpie/index.
  html
• Install MAGpie
• Go to http//ncam.wgbh.org/webaccess/magpie/magpie
  _help/
• Read the installation instructions carefully.
• If you have OSX, install MAGpie directly
• If you do not, install this software, in this
  order
• Java Runtime Environment (JRE)
• QuickTime 4.1.2 or higher, with QuickTime Java
  enabled
• MAGpie 2.0
• Links are provided in the installation document

73
MAGpie Notes

• Set Times
• There are two ways to set start times for the
  caption
• Type in the time in minutessecondstenths of
  seconds
• Watch video and press F9 when you want it to
  appear (easier!)
• There are three ways to set end times
• Type the time, etc.
• Watch the video and press F10
• Do nothingMAGpie will end the caption when you
  press F9 to begin the next caption (easiest!)

74
MAGpie Notes

• Video players treat output differently
• RealPlayer and QuickTime support both captioning
  and audio descriptions
• Note To see captions in RealPlayer you must
  turn on Show Captions Preferences gt
  Content gt Accessibility Settings gt Show
  Captions
• Windows MediaPlayer supports closed captions only
• To view closed captions, Captions and Subtitles
  must be clicked on in Play

75
MAGpie Notes

• Easiest to save captioned video in original
  format
• Start with QuickTime format, save to QuickTime
  format likewise, start with RealPlayer format,
  save to QuickTime format
• Otherwise have to change extensions

76
Javascript

• use of scripts such as Javascript may create
  barriers to access for some users of adaptive
  technology
• ie traditional scripts to generate content on the
  "mouseover" event handler, as in the case of
  "rollovers"
• anyone who relies on keyboard access will not be
  able create the event that will cause the browser
  to generate the text

77
Accessible Javascript

• On the other hand, Javascript components that do
  not generate content dynamically are generally
  not problematic for users of adaptive technology.
  
• Examples would include confirmation of entry of
  form fields, browser version identification, etc.
• Specify logical event handlers rather than
  device-dependent

78
Accessible Javascript

• To test a page that includes javascript
  components for accessibility, turn off the
  javascript function in a Netscape browser
• Alternatively, build the page without javascript,
  and add it after as a presentation enhancement

79
Accessible Forms

• Accessible Forms Techniqueshttp//www.w3.org/TR/
  WCAG10-HTML-TECHS/forms-keyboard-access
• 9.4 Create a logical tab order through links,
  form controls, and objects. Priority 3
• 9.5 Provide keyboard shortcuts to important links
  (including those in client-side image maps), form
  controls, and groups of form controls.
  Priority 3

80
Accessible Courseware

• Evolution over recent years from a small range of
  generally inaccessible products during the
  pioneer days to a competitive market where
  accessibility is a key selling point

81
Where are we now?

• Most mainstream products claim technical
  accessibility, particularly compliance with Rehab
  508
• only partial compliance with WCAG 1.0
• One area where leading products fall short is the
  asynchronous chat
• Reliance on designer to create content in
  accessible formats to upload to the system

82
Usability

• Beyond technical accessibility, usability factors
  can make or break the successful use of online
  learning technologies.

83
Examples

• Five (or six) frames in main interface with
  titles or names that lack meaning
• Some products require a user to press the back
  button twice to move back through the history of
  pages
• Do not consistently provide enhancements such as
  bypass links, access keys

84
The Future

• Trend towards a development of online learning
  environments that can respond to the individual
  needs of the learner
• Focus on new IMS specifications is accommodation
  of individual preferences of the learner in the
  display, control and format of the content
• Example Angel software provides an option for
  users to access via a screenreader or PDA view

85
Conclusion

• Creating accessible documents, like accessible
  websites, is more than adding code
• Need to structure document and provide
  descriptive content
• Screen readers are the eyes of persons who are
  blind, captions are the ears of persons who are
  deaf
• Tools can make the job easier, but you will have
  to be a vigilant and active participant
• Result will be better comprehension for everyone
• A list of resources

86
Resources

• Online
• "Dive Into Accessibility, 30 days to a more
  accessible web site," Mark Pilgrim, 2002
• http//diveintoaccessibility.org
• W3C Website
• www.w3.org/

87
Resources

• Tools
• A-Prompt (aprompt.snow.utoronto.ca)
• Bobby (bobby.watchfire.com/bobby/html/en/index.jsp
  )
• IBM Home Page Reader (www-3.ibm.com/able/hprt
  rial3.html)
• W3C html Code Validator (validator.w3.org)
• W3C CSS Validator (jigsaw.w3.org/css-validator)
• Vischeck (www.vischeck.com/vischeck/vischeckURL.ph
  p)
• WAVE (wave.webaim.org)

88
Resources

• Text
• "Accessible Web Sites," Jim Thatcher, et al,
  glasshaus, 2002
• "Flash Usability Guide," Chris MacGregor, et al,
  friends of ED, 2002
• "Maximum Accessibility, Making Your Web Site More
  Usable for Everyone," John M. Slatin and Sharron
  Rush, Addison-Wesley, 2003
• "Usability for the Web," Tom Brinck et al, Morgan
  Kaufmann, 2002