Try the all-new QuickBooks Online for FREE.  No credit card required.


Document Sample
accessibility Powered By Docstoc
					        How Do I Design
     An Accessible Web Site?

                   Presented by
Paul Tang - Applications Specialist II Alternate Media
               Irvine Valley College
            Presentation Objectives
 What is Web accessibility?
 What are the accessibility barriers?
 What are the demographics on student disability?
 Why is accessibility a legal requirement?
 Who needs accessibility?
 What is universal Web design?
 How do I design for Web access?
 What is multimedia?
 How do I design for media access?
                                            Web Access Symbol
 Summary                               (for people with disabilities)
      What Is Web Accessibility?
“The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, W3C

An “accessible Web site” will successfully communicate
its information to anyone despite physical, sensory and
cognitive disabilities.

                                         Student in wheel
                                         chair at computer
       What Are The Accessibility
 Visual – Blindness, color blindness, tunnel vision, etc.

 Audio – Deaf, impaired hearing, no soundcard/speakers, and
  poor quality of recording.

 Motor - Can’t use mouse; individuals with a more severe
  physical impairment may need to have a special keyboard that
  can be operated by speech, head pointing or eye gaze.

 Learning or Cognitive – Need consistent navigation structure,
  flickering, moving or complicated designs can cause problems.

    What Are The Demographics
      On Student Disability?
In 1997, more than 1.4 million
 students were enrolled in
 California Community Colleges               College entrance

   5% (70,000) of these students had disabilities

By the year 2007, “Tidal Wave II” will have
 brought 350,000 additional students to our colleges
   10% (35,000) of these students will have disabilities
             Why Is Accessibility A
             Legal Requirement?
Laws          Applications      Mandates
Title II -    Public entities   Prohibits discrimination as well
ADA                             as making programs accessible
                                to individuals with disabilities

Section 504 - Anyone            Opportunity for the disabled to
Rehab. Act    receiving         participate must be as effective
(guidelines)  federal funds     as that provided to others for
                                programs and services

                Why Is Accessibility A
                Legal Requirement?
Laws         Applications                     Mandates
Section 508 -States receiving federal funds   Provide the disabled
Rehab. Act   under the “Assistive             access to electronic
(standards)  Technology Act State Grant       and information
             Program”                         technology (EIT)
SB 105 -     Anyone receiving California      Provide the disabled
CA state law state funds must comply with     access to EIT
             Section 508
Title 5 -    Anyone receiving California      Distance education
CA Code Of state funds                        courses must be
Regulations                                   accessible to people
                                              with disabilities 7
       What Is Electronic And
      Information Technology?
In Section 508, electronic and information
 technology (EIT) is defined to include:
   Information technology and any equipment or
    interconnected system or subsystem of
    equipment, that is used in the creation,
    conversion, or duplication of data or

                                           Section 508 scroll
      What Is Electronic And
     Information Technology?
EIT includes, but is not limited to, such
things as:
 Computer hardware         Information kiosk
 OS and Software           Web sites
 Multimedia                Copiers
 Video                     Fax machines
 Networks                  Peripherals
 Telecommunication
  devices                                        9
Who Benefits From Section 508?
Everyone benefits from the accessibility
of electronic and information technology.
Voice activated cell
 phones help users who
 are blind and people
 who are driving while
 using their phones.
                           Driver using cell phone

Who Benefits From Section 508?
 Making a site accessible to
  people with low vision will
  also benefit people who use
  PDAs or other devices with
  small screens                  Personal Digital Assistant

 Closed captioned TV
  allows the deaf and sport
  fans in a noisy bar to stay
  informed about the game
  they are watching                                      11
                                Fans watching hockey
  Who Needs Web Accessibility?

Computer Users
   Blind and visually
   Deaf and hard of
   Physically and
    motor impaired
                         Motor impaired student using a
   Learning disabled     voice recognition software

       How Is Your Course Content
          Perceived by Others?
 Perception takes place    Neither smell nor taste are
  through one or more        of much use for Web
  of our five senses:        browsing but sight,
      Sight                 hearing and touch are the
      Hearing               modes of perception.
      Touch
      Smell
      Taste
     How Is Your Course Content
        Perceived by Others?
Individuals without sight usually rely on their
 hearing to access Web content using screen
Those without hearing need to rely on their sight.
Those who can neither see nor hear often rely on
 Braille devices to access Web content so their
 mode of perception is touch.
       Is Your Course Content
           Web Accessible?
Without equal access to technology,
 members of our society who have
 disabilities are greatly disadvantaged.   Computer

The ability to access and use computers and
 other technologies has become essential to
 virtually every aspect of academic and
 professional life.
    What Is Assistive Technology?
Assistive technology is a piece of equipment or
 a software product that is used to increase,
 maintain, or assist the functional capabilities of
 individuals with disabilities.
Assistive technologies includes the following:
   Screen readers
     • Used by people who are blind
     • Makes on-screen information available as
        – Synthesized speech (JAWS - Job Access With Speech) or
        – Refreshable Braille display (Duxbury Braille Translator)
 What Is Assistive Technology?
 Voice recognition software
  • Assists people who have difficulty using a mouse
    or keyboard
     – Dragon Naturally Speaking
 Magnification software
  • Helps people with low vision
     – ZoomText Xtra
 Alternative keyboards and mice
  • Used by people who are unable to use a standard
    keyboard or mice
 What Is Universal Web Design?

It is a style of Web development which seeks
to create Web sites which are accessible to
the broadest audience possible.

              Networking of computers
                 around the globe
 What Does Universal Design Do?
Universal design seeks to create Web pages
at the point where assistive technologies and
Web based innovation intersect.

        Web Design Overview
Identify target population
Define page content
Design Web site presentation
   Intuitive site navigation
                                          Computer user
   Clearly worded text
   Consistent and simple design layout
   Content appropriate and meaningful to the audience
Implement Web site
     Designing For Low Vision
People with low vision may have any one
 of a number of problems with their vision
   Poor acuity (blurred or fogged vision)
   Loss of all central vision (only see with
    edges of their eyes)

                              Adult reading with
                              a magnifying glass
      Designing For Low Vision

People with low vision (continued)
   Extreme far-sightedness or near-sightedness
   Tunnel vision (like looking through a tube or
    soda straw)
   Loss of vision in different parts of their visual
    field as well as other problems (glare and
    night blindness)

      Designing For Low Vision
Solutions to accessibility:
   Allow the user to zoom in to view portions of
    the screen in more detail
   Allow the user to adjust the fonts, colors and
    cursors used in your program to make them
    more visible
   Use a high contrast between text and
      Designing For Low Vision
Solutions to accessibility:
   Do not place text over a patterned background
    where the two might interfere with each other

                 Can you read this?

       Designing For Low Vision
Solutions to accessibility:
   Use a consistent or predictable layout for
    screens and dialogs within the program
   Use good color contrast
     • Red text on brown background
       (bad color contrast)              Bad

  Designing For Color Blindness
Color blindness is
 more common in
 men and rare in
Most color blind
 people have a
 deficiency with
                       Image of red and green apples
 either red or green

     Designing For Color Blindness
                                Solutions to accessibility:
                                    Use either light text on a
                                     dark background or dark
                                     text on a light background
Image of red and green apples
                                    Make sure that there is
                                     sufficient contrast
                                    Avoid using red and green
                                     colors because they are
                                     often indistinguishable

View of apples by the color-blind: green                   27
     Designing For The Blind
Access by people who are blind is
 usually accomplished using special
 screen reading software to access and
 read the contents of the screen, which
 is then sent to a voice synthesizer
 (JAWS) or dynamic Braille display.

      Designing For The Blind
Solutions to accessibility:
   Use consistent or predictable screen and
    dialog layouts
   Use single column text whenever possible
   Make line-by-line reading in tables sensible
     • Associate table headers with table cells

       Designing For The Blind
Example – Accessible Data Table
     Coffee Consumption by California Senators
    Name            Cups    Types      Sugar?
    D. Feinstein    4       Espresso   No
    B. Boxer        6       Decaf      Yes

               Text read aloud using JAWS
Name: D. Feinstein, Cups: 4, Types: Espresso, Sugar: No
Name: B. Boxer, Cups: 6, Types: Decaf, Sugar: Yes
     Designing For The Blind
Solutions to accessibility:
   Provide text alternatives for all visual
     • Graphics have Alt tags – text descriptions of

                    Graduation cap
       Designing For The Blind
Solutions to accessibility:
   All text should be available as e-text to allow
    a screen reader program to read aloud
    through a voice synthesizer (e.g. JAWS)
   Use hyperlinks with descriptive text
     • Click here for a picture of Tom Cruise
       (bad design)
     • Click here for a picture of Tom Cruise
       (good design)
      Designing For The Blind
Solutions to accessibility:
   Avoid frames but, if used, include title that helps
    understand the frames purpose
     • Title = “Navigation Frame”; Title = “Content Frame”
        Best Practices            Web Accessibility
        Web Accessibility         Courseware Accessibility
        Adaptive Technology       Emerging Technology
                                  Web Accessibility Resources

       Note: If a browser does not support frames, use the
       NOFRAMES alternative to provide a link to a non-frame
       version of the same content.                        33
        Designing For The Blind
Solutions to accessibility:
   Provide alternate means of accessing equivalent
    content for scripts, applets and plug-ins with
    hypertext links in case active features are inaccessible
     • Scripts – Macro commands, e.g. Salary Calculator
     • Applets – Small executable applications, e.g. 3-D Clock
     • Plug-Ins – Modules extending Web browser capability,
       e.g. Adobe Acrobat Reader - PDF (Portable Document
       Format) files

        Designing For The Deaf
People who are deaf will not be able to hear
 sound at all.
Other people who have hearing impairments may
 be able to hear some sound but may not be able
 to distinguish words.
People who are deaf or with hearing impairments
 need to get visual signals for all information
 otherwise conveyed by sound.

              Hard of hearing person         35
        Designing For The Deaf
Solutions to accessibility:
   An individual with a mild to moderate hearing
    impairment may just need a mechanism to
    increase the volume – assistive listening
   An individual with a severe hearing
    impairment or who is deaf may need to have
    auditory/video information presented in some
    visual form – text transcript or closed caption.
        Designing For The Deaf
Solutions to accessibility:
   Provide all auditory information in a visual
    form using text transcripts.

               Text transcript – Zoot Suit Fashion

   Provide a link to a text transcript for audio clips –
    e-text file or HTML file
         Designing For The Deaf
Solutions to accessibility:

     Have a mode of operation that will work in
      noisy environments or if sound is turned off.
     Use closed or open caption for digital video
      Example: Blackboard Tour

 Designing For The Motor Impaired

Types of physical impairments:
   Loss of limbs or digits
   Repetitive stress injury
   Arthritis
   Stroke and head injury
   Parkinson's disease
   Cerebral Palsy
                                  Office worker using cell
   Muscular Dystrophy             phone in wheel chair

 Designing For The Motor Impaired

Solutions to accessibility
   An individual with a mild physical impairment
     • May just need to have the behavior of the keyboard
       and mouse changed slightly in order for them to be
       able to effectively use the computer.
   An individual with a more severe physical
     • May need to have a special keyboard that can be
       operated by speech, head pointing or eye gaze.

  Designing For The Motor Impaired
Solutions to accessibility:
   Use of “hot keys” or keyboard commands
    allows the physical or motor impaired access
    to Distance Education courses when the user
    can’t use the mouse
     • TAB, SHIFT + TAB, and ENTER keys to navigate pages
   Avoid timed responses (less than 5-8 sec.) or
    allow for the response time to be changed
            Designing For
        The Learning Disabled
Types of learning disabilities
   Mental Retardation
   Language and Learning Disabilities
   Dyslexia
   Short Term Memory
   Dementia
                                         Learning disabled
             Designing For
         The Learning Disabled
Solutions to accessibility:
   Make sure the user is alerted and given sufficient
    time to indicate more time when a timed response is
   Make sure that all messages and alerts stay on screen
    until they are dismissed by the user
   Make language as simple and straightforward as
    possible, both on screen and in any handouts
   Use simple and consistent screen layouts
             Designing For
         The Learning Disabled
Solutions to accessibility:
   Keep pages clear, concise and scannable
   Ensure well-structured pages with good site
   Use graphics to enhance the understandability of the
   Eliminate graphics that distract from the main content

                      Irrelevant image                44
           Designing For
       The Learning Disabled
Solutions to accessibility:
   Avoid blinking, moving or flickering content
     • Internet Explorer and Netscape Navigator do not
       allow users to control flickering or blinking
     • Information that is shown or conveyed through
       blinking, flickering, or movement may cause
       seizures in users with photosensitive epilepsy

                                       Marquee –
                                      moving lights
          What Is Multimedia?
Multimedia is the use of computers to present
 text, graphics, video, animation, and sound in
 an integrated way.

                 Student using computer
  Designing For Media Access
Accessible PowerPoint Presentations
   Use text descriptions on all graphics and photos

            Palm trees overlooking ocean in Hawaii

   Save PowerPoint slide as Web page - HTML
       Designing For Media Access
Accessible Web Videos
   Use synchronized captions in streaming videos or
   Provide text transcripts to make content accessible
Accessible PDF (Portable Document Format) Files
   Visit and download Acrobat
    Reader 6.0 with accessibility features
   Use JAWS or Window-Eyes to read PDF files

    Designing For Media Access
Accessible Flash Animation
   Flash MX allows for media accessibility
      • Flash MX allows designers to create accessible.
        animation, interactive Web features and movies.
      • MAGpie (Media Access Generator) allows closed
        captioning of Flash animations.
      • Use Window-Eyes 4.2 to read Flash animation.
   Flash MX demonstration – Zoot Suit Culture

By providing Web accessibility for disabled
 students, you and Irvine Valley College will be in
 compliance with Section 508 of the Rehabilitation
   Provide disabled students access to
    electronic and information technology
    to achieve academic and career success

                                             Graduating student
                                               in wheel chair
   Acknowledgement Of Sources
High Tech Center Training Unit
University of Bath
WebAIM (Accessibility In Mind)
National Center for Accessible Media
University of Wisconsin - Trace R & D Center
California State University, Northridge -
 Disability Conference
California State University, Fresno - Videos