Document Sample
Accessibility Powered By Docstoc

                                 By Walter Maner

      Based in large part on a presentation by

         Michael Elledge, “Accessible Website Design,” U of M

      with some material from

         Anne L. Allen, “Accessible Websites, ” U of Florida
         Mark Pilgrim, “Diving Into Accessibility”
         Lelventhal and Barnes, Usability Engineering, Chapter 16
    Iteration #3 Advice
   js Header comments needed too, like this:
     * @author (Charles L. Chen, author, unless otherwise noted)
     * @author (Walter Maner, modifier -- see line comments)
     * @author (Jon Gear, modifier -- see line comments)

   Include all user stories (short, long) and all test cases
       Fixup previous work if necessary
       Reviewers should do regression testing

   "Is it complete?"  "Is it sufficiently complete
    for productive use by Sheri?"
   On cover page, useful to state briefly what each
    contributed to the iteration
   Validate rendered page as HTML 5
Iteration 4+ Advice
   Find some way to use cached AxsJAX earcons

       7 earcons are defined in axsEarcons.swf
   Implement a context-dependent "Where am
    I?" function
       probably easy to echo page title
   Shift-? should get help
   Need always-available hot key to invoke search
       if nav fails, desperate user can always search for it

"The power of the Web is in its
Access by everyone regardless of
disability is an essential aspect."

                                 Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
What Is Web Accessibility?

 Web  sites are accessible when
 individuals with disabilities
 can access and use them
 as effectively as people who do
 not have disabilities
Who, Me?

 Thisseems like a lot of
 trouble for a small number of
 people who might possibly use
 the material
What Do These Have In

   Carbon paper
   Typewriter
   Curb cuts
Who Benefits?
   Carbon paper

       First developed for
        blind and partially
        sighted clerks who
        could not tell when
        their quill pens ran out
        of ink
       With carbon paper,
        they could use a metal
        stylus instead of a quill
Who Benefits?

   Typewriter
       The first working
        typewriter was built by
        Pellegrino Turri in 1808
       Given to his blind lover
        Countess Carolina Fantoni
        da Fivizzono
       Why? So she could write
        him legible love letters
Who Benefits?

 Curb Cuts
The Market
   more people with disability trying to use
    computers than ever before
       1 in 25 persons have a disability significant enough
        to impact their use of computers
   more seniors and retirees trying to use
    computers than ever before
       75 million computer-using baby-boomers soon to
        retire, already have trouble discriminating shades
        of blue due to yellowing of cornea
   more children trying to use computers than
    ever before
The Market …
 more underprivileged people trying to
  use computers than ever before
 more ESL people trying to use
  computers than ever before
 more third-world people trying to use
  computers than ever before
 more people with learning disabilities
  trying to use computers than ever
The Market …
    The market for people like us
       able-bodied people
       people born or bred into high technology
    is shrinking fast
    Ignoring this market trend is
       bad for business and
       bad for profit
Is Accessibility Important?
   ~20% of the US population has a permanent
    physical disability
       That includes approximately 400,000 university students
   ~100% will suffer at least a temporary
   Persons with disability still spend a lot of
    money, and this amount is increasing
   For those in education or government …
    accessibility is the law
   The U S population is aging into the
    “disability years”
U.S. Census Bureau, 1996 Survey of Income and Program Participation: August-November 1997
Accessibility is Important!

 20%* = 54 Million People in the US

    * People with a permanent physical disability
Accessibility is Important!

 $175 Billion in Discretionary Income
Accessibility is Important!
   “No otherwise qualified individual with a
    disability … shall, solely by reason of her or
    his disability, be excluded from the
    participation in, be denied the benefits of, or
    be subjected to discrimination under any
    program or activity receiving Federal
    financial assistance.”
    Section 504 (a), Rehabilitation Act of 1973 (as amended in 1998)
Accessibility is Important!

   “No covered entity shall discriminate against
    a qualified individual with a disability because
    of the disability of such individual in regard
    to job application procedures, the hiring,
    advancement, or discharge of employees,
    employee compensation, job training, and
    other terms, conditions, and privileges of

    Title II, Americans with Disabilities Act of 1990
Accessibility is Important!
   “Individuals with disabilities…seeking
    information or services from a Federal
    agency must have access to and use …
    comparable to the public who are not
    individuals with disabilities.”

    Section 508, Rehabilitation Act of 1973 (as amended in 1998)
Which Disabilities?

              5% 2% 1% 0%         Hearing
       9%                         Vision
 12%                        48%   TBI
        23%                       Spinal
Accessibility Basics
   Persons with disabilities use websites
       Persons who are blind listen to sites
       Persons who are deaf read sites
       Persons who lack motor control use the keyboard
        or head pointers
       Persons with color blindness miss color-coded
       Persons with learning disabilities have trouble
        focusing on what’s important (autistic people)
Accessibility Basics
   Implications
     It is crazy to think that persons with
      disabilities can somehow adapt to websites
      built with no thought of them
     So … if we want them to be part of our
      audience, we must accommodate them
   Fortunately, designing accessible sites
    improves everyone’s experience
Designing for Blindness
   Blind persons need web content read to them
       Screen readers (JAWS, Window-Eyes)
       Talking web browsers (FireVox)
       Text-based browsers (Lynx)
         • Lynx is having a resurgence in popularity. Do you know why?
       Braille displays (less often)
   These technologies literally read through a
    website, in response to keyboard commands
   In general, all users benefits from
    accommodations made for blind persons
Designing for Low Vision
   Persons with low vision need assistance
    reading text and images
       Screen enlargers (like ZoomText)
       Large-screen displays
       Browsers set at high zoom levels and/or enlarged text

   They benefit from sites that
    accommodate text enlargement and
    image magnification
Designing for Deafness
 Deaf people need auditory content in an
  alternate textual form
 They benefit from
       Video that includes captioning or transcripts
         • Captioning is best because it retains the most context
         • Transcripts are better than nothing
       Video, Flash animation, or auditory prompts must
        have text or visual supplementation (Section 508)
   Synchronization is a big problem
Designing for Control
   Persons with impaired motor control
    need assistance (varies according to severity)
       Modified mice
       Special keyboards                           Example
       Head-mounted pointers
       Eye-based, “blink and click” tools
       Sip-and-puff controls

   They benefit from
       large click targets
       streamlined actions (preloading cursors in text boxes)
       forgiveness
Designing for Cognition
   Persons with cognitive delays or
    impairments need
       Enhanced focus
       Multiple redundant representations of the same content
       Minimal cognitive distraction
       Quiet
       Periodic refreshing of their short term memories
   They use
       Text enlargers with redundant audio and highlighting
   If operating the interface is a full
    cognitive load, there will be no "brain
    cycles" left over for performing the task
Designing for Cognition …
    Persons with cognitive delays or
     impairments benefit from …
        minimal animation
        clear navigation
        concise text
        vocal redundancy (seeing + hearing)
        logical organization, and
        visual representations
    Examples?
        “breadcrumb” trails
        paragraph headings
        meaningful icons and pictures
Designing for Accessibility
   Key things to remember
     Images are meaningless, until they are explained
     Tables need column and row names to make sense
     URLs are terrible descriptors
     Screen readers can provide context to users, but
      only if you give it to them first
     Most assistive technology is PC-only, based on
      Microsoft UI Automation technology
           For example, the Microsoft Speech API (SAPI)
Designing for Accessibility

   Video John, a software
                                   Video, Karen, content
    dev engineer (mobility)         publishing mgr (low
   Video Jenny, Dir Ad             vision)
    Center (hearing)               Video Kyle, IT pro (low
   Video Brett, lead               vision)
    software eng (low vision)
    Screen Readers
  A screen reader
                      <table border="1" cellspacing="0" cellpadding="0" summary="This is a structural

                     table of 5 rows and 8 columns; the center six columns have been merged except
                      in the second row where they provide main navigation">

  sees raw HTML
                          <td colspan="4" class="MedBlueBackground"> <form method="get"
                      action="" class="SearchText">
                               <a name="Search" id="Search"></a><label for="search">Search for

 It reads it like
                               <input name="q" type="text" class="SearchBoxText" id="search"
                      accesskey="s" tabindex="4" value="Information" />
                               <input type="submit" name="sa" value="Search" />
                               <input type="hidden" name="hq" value="inurl:ltg-

  we read a book,
            " />
                                <td colspan="4" class="MedBlueBackground"><span class="HideSkips"><a

  line by line, top
                      href="#Search" title="Go to Search: Alt + S" class="HideSkips" accesskey="S"
                             (Alt + S)</a>|</span><a href="#Content" title="Go to Content: Alt + C"
                      class="HideSkips" accesskey="C" tabindex="1">Content

  to bottom
                             (Alt + C)</a> <span class="HideSkips">|</span><a href="#PageNavigation"
                      title="Go to Page Navigation: Alt + P" class="HideSkips" accesskey="P"
                             Navigation (Alt + P)</a> <span class="HideSkips">|</span><a
                      href="Accessibility.html" title="Go to site accessibility information: Alt + A"

 But it reads
                      class="HideSkips" accesskey="A" tabindex="3">Accessibility
                             Info (Alt + A)</a><span class="HideSkips">|</span></td>

                          <td class="Logo"><img src="Images/Logo.gif" width="150" height="50"
                      alt="Logo of rising sun" /><a href="Logo.html" title="Description of logo
                          <td colspan="6" class="Logo"><img src="Images/Logo2.gif" alt="Online
                      accessibility makes a better web for everyone!" width="450" height="75" /></td>
                          <td class="SideGraphic">&nbsp;</td>
FireVox Demo
   Let’s try this URL:
 What did you hear?
 Do you think you could find your way
More FireVox Exercises
   Find forecast high temperature for today
    at or
   Find what the latest weather forecast for
    Bowling Green at
   What trains go from Toledo to New York
    City at
   At, find the lowest round trip
    fare from Los Angeles to Honolulu
Many Other “Voices” Exist

   Mike         Jennifer
   Crystal      Daniel
   Audrey       Karen
   Klara        Samantha
   Rosa         Julia
   Heather      Lauren
   Lucy         Mel
   Salma        Ray
   Chiara       Rich
   Erik         Claire

                             If links don’t work, go directly to
    Accessibility Requirements
   Web Accessibility Initiative (WAI)
     Priority One -- MUST
     Priority Two -- SHOULD

     Priority Three -- MAY (helpful)

   CSE HTML Validator is a commercial
    product that does an excellent job of
    WAI checking
Accessibility Requirements
   Section 508
     Mandated for products sold to the
      Federal Government and websites the
      Government hosts
     Becoming a common standard for
        • For businesses
        • For universities
       Find a summary at
Section 508 Standards
somewhat out-dated now

a)   Text equivalent for images   i)   Title frames with text
b)   Synchronized multimedia      j)   No page flicker
     captioning                   k)   A text-only version only
c)   Information not color             when no alternative
     dependant                    l)   Accessible alternative to
d)   Readable without style            scripting
     sheet                        m)   Links to accessible plug-ins
e)   Redundant text links for          or applets
     image maps                   n)   Make forms accessible
f)   Client-side image maps       o)   Ability to skip repetitive
g)   Row and column headers for        navigation links
     data tables                  p)   Notification of timed
h)   Associate data with               response and ability to
     headers in complex tables         notify more time is needed
Enhancing Accessibility
   Ways you can enhance accessibility
    1.   Structure
    2.   Navigation
    3.   Appearance       We will examine
    4.   Content          each of these
    5.   Special Cases    one at a time
         •   Multimedia
         •   Scripting
                                              1.   Structure
                                              2.   Navigation
                                              3.   Appearance

(1) Structure                                 4.
                                                   Special Cases

   Gives screen readers information about
       Persons with visual impairments can’t see page
       Adaptive technology has to give audio picture
   HTML code provides some of the context
       Metadata: Describes subject matter of web page
       Page titles: Describes page itself
       Headings: Subdivide page content
       Table tags: Explain how data is displayed
       Frames: Tell what each section contains
    (1) Structure Tags …
   Metadata
       Ordered set of name-value pairs
        • Examples of names
           • description
           • keywords
           • author
       Stored within <meta> tag
    <meta name="keywords" content="Accessibility, usability” />

   WAI-ARIA is another form of metadata
(1) Structure Tags …
   Page Titles
       “Title” within <head> element
         • First item announced by a screen reader
       Example
    <title>Accessibility and Website Design</title>
(1) Structure Tags …
   Text Headers
       “h1,” “h2”, etc. within <body> element
         • Are announced by readers
         • Can be clicked through sequentially
         • Create context for subsequent text
       Example
        <h2>Site Description</h2>
        <p>This site has been developed to help you design
    accessible websites and web-based software.</p>
(1) Structure Tags …
 Table   Tags
   Use   percentages instead of pixels
    • Example: width=“100%”
    • Allows user to resize page
    • Allows table-based layouts to work
      correctly in today’s screen readers
   Designers    want to use pixels.
(1) Structure Tags …
   Table Tags
     Include “Summary” information in <table>
     Example
        <table width=“100%” summary=“This is a
        structural table of 5 rows and 8
        columns; the center six columns have
        been merged, except in the second row
        where they provide main
(1) Structure Tags …
   Frames
       Frames are acceptable if some rules are followed
         • <noframes> also necessary
         • Automatic refreshing not allowed
            • Will return user to top of page (HPR)
            • Give annoying reminders (“page has just refreshed”)
         • “Title” and “Name” tags are necessary along with
           dimensions in percent
       Frames can actually facilitate access
         • By “containing” content areas
         • By naming parts of page
                                           1.   Structure
                                           2.   Navigation
                                           3.   Appearance

(2) Navigation                             4.
                                                Special Cases

 Enablesusers to move easily
 through site
     A problem for persons who can’t use mouse
       • Impaired vision
       • Impaired motor control
     Solution
       • program navigation that uses the keyboard only
       • offer search as an alternative to navigation
(2) Navigation …
 Enablers
   “Skip” links
   Page Links

   Access keys    We will examine
   Tab ordering   each of these
                   one at a time
(2) Navigation Tags …
   “Skip” Links
       An in-document link that that enables user
        to skip ahead to where the main content
         • Place link at very top of <body> section
         • Put corresponding anchor tag at beginning of
           page content
       Enables user to skip navigation bar
         • Otherwise has to tab through every link on
(2) Navigation Tags …
 “Skip”     Links ...
    <a href=“#Content” title=“Go to Content” >Content</a>
    <h1><a name=“Content”></a>Welcome...</h1>

 .skiplink {display:none}
 <a class=“skiplink” title=“Go to Content”
 <h1><a name=“Content”></a>Welcome…</h1>
(2) Navigation Tags …
   Page Links
       Persons often surf using links
         • No surrounding sentences for context, so description
           must stand alone
         • Use text that makes sense by itself
            • “Website for W3C” rather than “”
       Include the “title” tag
         • Users can set screen reader default to link titles
         • Description will display on mouseover for IE (“tool tip”)
       Example
        <a href=“About.html”
           title=“Information about this site”>
           About this site
(2) Navigation Tags …
   Access (shortcut) keys
       “Accesskey” within <a href> element
       User can go to directly to link
         •   Main navigation
         •   Inputs on forms
         •   Use Alt or Control button plus keystroke: Alt + A
         •   Identify access key in label: About (alt + A) or About
       Example
        <a href=“About.html”
           title=“Information about this site”
           accesskey=“A”>About this site (Alt-A)
       See CS website for an example
(2) Navigation Tags …
   Tab Ordering
     “Taborder” within the <a href> element
     Generates “reading” order for links and
         • Any number from 1 to 1000+
         • Can skip numbers (allows for modifications later)
       Example
        <a href=“About.html”
           title=“Information about this site: Alt + A”
           class=“BottomNav” accesskey=“A”
           tabindex=“121”> About this site (Alt-A)
                                             1.   Structure
                                             2.   Navigation
                                             3.   Appearance

(3) Appearance                               4.
                                                  Special Cases

   Know how and what to control
       Blind or low vision persons need image
       Color blind need contrast and proper
        color combinations
(3) Appearance Tags …
   Alternative Text for Images
       “Alt” within the <img> element
         • Provide concise, relevant description of image
         • May also appear in "mouseover" or "hover" help
       Examples
           <img src=“Images/Logo.gif”
                alt=“Logo of rising sun” />

           <img src=“Images/Logo.gif”
                alt=“Logo of rising sun” />
           <a href=“Logo.html”
              title=“Description of logo metaphor” </a>
(3) Appearance Tags …
   Images of text
       Pixel-based images of text, such as .gif or .jpg
       Problem for people using software to enlarge text
         • Images deteriorate at high magnification
         • Will not enlarge when zoom used in browser
       Solutions
         • Use relative values for text (i.e., “ems”)
         • When text is contained in images, use vectors to scale
           without loss
(3) Appearance Tags …
   Color
       10% of male population is color-blind
         • See green and red as grey
       Cannot rely only on color to differentiate
         • Bad Example: “Required fields are shown in
       Need “*” or some other identifying
(3) Color Blindness Example
   To a person without color blindness…

…these circles are easily distinguished by
(3) Color Blindness Example
   To a person with a specific form of
    color blindness…

…the same circles are hard to distinguish
(3) Appearance Tags …
   Contrast
     Persons with low vision benefit from
      high contrast between objects, text
      and background
     Make sure text stands out from the
     When using color, make sure color-
      coded elements rely on differences in
      saturation, not differences in hue
(3) Appearance Tags …
                  a {
                    text-decoration: none;
                    color: red;

                  a {
                    text-decoration: none;
                    color: red;
                    font-weight: bold;

       Also an
      issue for
(3) Appearance Tags …
   How does your page look to a color-
    blind user?

                                              1.   Structure
                                              2.   Navigation
                                              3.   Appearance

(4) Content                                   4.
                                                   Special Cases

   Make your site easy to read
       Allow low-vision persons to enlarge text
        (no fixed-size fonts)
       Force “focus” for persons with
        cognitive impairment
         • Example: Force insertion cursor into first
           text-entry field
(4) Content Techniques …
   Relative Sizing
       Use “em,” “%,” preferably in style sheets
       Example
        <h1 class=“Title”>Welcome...</h1>


            .Title {
                   font-family: Arial, Helvetica, sans-serif;
                   font-size: 1.25em;
                   font-weight: bold;
                   margin-left: 5%;
(4) Content Techniques …
   Em-sizing is relative to the parent element’s
    font size
(4) Content Techniques …
   Use common words and phrases
     Your goal is to communicate
     Use language your users understand

     Could even use AECMA “simplified English”
      if targeting a worldwide audience

                                 Helps auto-
(4) Content Techniques …
   Simplified English starts with a lexicon of approved
   Each word can only be used as one part of speech
       The lexicon defines “close” as a verb, so …
         • “Close the door” is correct
         • “Do not go close to the landing gear” is wrong
         • Rephrase: “Do not go near the landing gear”
   Words can only be used with the approved meaning:
       The lexicon states "follow" means “to come after”, so …
         • “The puppy follows the adult” is correct
         • “Follow the safety rules” is wrong
         • Rephrase: “Obey the safety rules”
(4) Content Techniques …
   Expressive English: Place the water heater in a
    clean, dry location as near as practical to the area of
    greatest heated water demand. Long un insulated hot
    water lines can waste energy and water. Clearance
    for accessibility to permit inspection and servicing
    such as removing heating elements or checking
    controls must be provided.

   Simplified English: Put the water heater in a clean,
    dry location near the area where you use the most
    hot water. If the hot water lines are long and they
    do not have insulation, you will use too much energy
    and water. Make sure you have access to the heating
    elements and the controls for inspection and
(4) Content Techniques …
   Sentence structure
     Be consistent in style and formatting
     Lead with the subject

     Use active voice

     Position links on text that is meaningful
(4) Content Techniques …
   Table markup using “id” and “headers”
   Example
        <tr><th id=“category1”>Tutorial</th>
               <th id=“category2”>Formats</th></tr>
        <tr><td headers=“category1”>Introduction</td>
               <td headers=“category2”>Stylesheets</td></tr>
(4) Content Techniques
   Forms
       Associate a label with input
       Can be done two ways
        1. Make input relationships explicit
           • Use label, id and for tags [on next slide]
        2. Structure content logically
           • Left-to-right and up-to-down in cells
           • Labels preceding text boxes
           • Labels following checkboxes and radio
(4) Content Techniques …
   Forms …
       Example
    <label for=“FirstName” >First name:</label>
    <input name=“fn” type=“text” id=“FirstName” />
(4) Content Techniques
   Forms …
       Context
        • Group questions or sections logically
        • Identify them by fieldset and legend

       Example:
              <legend>Contact Information</legend>
(5) Special Case:                          1.

Multimedia                                 4.
                                                Special Cases

   Accessibility has become more challenging
    with interactive websites
       Blind persons are excluded from animation
       Deaf persons are excluded from audio prompts
       Persons with cognitive difficulties can find
        animation perplexing
   Communicate information in an accessible way
       Captioning
       Visual prompts
       Media players
(5) Special Case: Multimedia …
   Captioning
       Provide alternative, accessible content to
         • Audio
         • Video
         • Flash
       Captioning preferred to transcripts
         • Better context since contiguous with action
         • Improves comprehension: non-impaired and EASL
         • Required by Section 508
         • Still, transcripts better than nothing
(5) Special Case:
Multimedia …
   MAGpie
   a multiple format captioning tool from
    National Center for Accessible Media
       Free
       Easy to use
       Addresses most popular web formats: QuickTime,
        RealPlayer, Windows Media Player
   Can also caption Flash, YouTube
(5) Special Case: Scripting
            This advice is obsolete

   Alternative html content must be
    provided whenever JavaScript is used
     Users will sometimes disable JavaScript
     Not all assistive technology reads script
     “Noscript” section necessary following
      JavaScript code blocks
Website Validation and

 Creating accessible code is not
 Have to validate and evaluate your
     Validators check HTML code for
      syntax problems, browser issues
     Evaluators check HTML code for
      accessibility problems
Website Validation
   W3C html Code Validator
   W3C CSS Validator
Website Evaluation

   ATRC Web Accessibility Checker
    (University of Toronto)

   WAVE
    (Temple University)
Evaluation Tools
   ATRC Web Accessibility Checker
     Very helpful for evaluating and repairing
       • Shows problem code and presents window for
Evaluation Tools
   The WAVE
     More readable than Bobby
     Shows how site will linearize (i.e., tab)
Home Grown Evaluation

   You can “dumb down” your
   browser to simulate some
   accessibility issues
Home Grown Evaluation
     Use Chris Pederick's Web Developer
      Toolbar to selectively disable specific
  Final HTML Hacks
<html lang=“en”>

<link rel=“home” title="Home"
      href=“http://url/of/home/page” />
<link rel=“prev” title=“Title of previous page”
      href=“http://url/of/previous/page” />
<link rel=“next” title=“Title of next page”
      href=“http://url/of/next/page” />

Don't use <a target=“_blank”> to force links to open in a new window.

<acronym title=“cascading style sheets”>CSS</acronym>

<img src=“spacer.gif” alt=“” width=“1” height=“10”>
   Building accessible websites is
    relatively easy if you …
     Become familiar with accessibility-related
      tags and techniques
     Get early buy-in from management

     Frontload accessibility (as opposed to retrofitting)

     Make frequent use of a validator

     Make frequent use of an evaluator

 Justabout everything you do,
 or don’t do, has an immediate
 impact on accessibility

 Discrimination is a moral
 issue; universal design is an
 ethical obligation

Shared By: