PowerPoint Presentation

SLIDE FORMAT
Generally, slides have a navy blue background behind white text.

SLIDE 1
SLIDE TITLE:  Accessible Web Design: Background 
SLIDE TEXT:  Presented by:  Sharon Trerise, Coordinator of Accessible IT
Cornell University Northeast ADA & IT Center

SLIDE 2
SLIDE TITLE:  Northeast ADA & IT Center
SLIDE TEXT:  
Funded by National Institute on Disability and Rehabilitation Research, US Dept. of Education
Provide technical assistance & training on:
- Americans with Disabilities Act
- Accessible Information Technology including web accessibility
- www.northeastada.org
- 1-800-949-4232

SLIDE 3
SLIDE TITLE:  Topics
SLIDE TEXT:
- Who are we talking about?
- Policy and law
- Why make sites accessible?
- How do people with disabilities access the web?

SLIDE 4
SLIDE TITLE:  Accessible Web Pages - Who is our audience?
SLIDE TEXT:
- People with disabilities
- Blind or visually impaired
- Mobility impairments
- Deaf or hearing impaired
- Cognitive disabilities (reading difficulties)
- People with slow internet connection
- People using PDAs, phones or other mobile devices, older equipment to view the web
- People whose primary language is not English
- Seniors
- People who are color blind

SLIDE 5
SLIDE TITLE:  Disability as a function of age
SLIDE TEXT:
Slide displays the logo of the Trace Center, School of Engineering, University of Wisconsin in the upper left side of the frame.
In the lower right side of the frame, we see:
Source: U.S. Census Bureau Report on Americans with Disabilities: 1994-95, P70-61 (August 1997)
Based on Survey of Income and Program Participation, Oct. 1994-Jan. 1995
SLIDE NOTES:  
Interpret title as “the prevalence of disability by age group”:These data do include disability caused by both the aging process as well as those caused birth defect and accidents.

Note that the US Census Report may under report the incidence of disability because it relies on “self reporting” of those survey.  Many respondents may have visual or hearing impairments, but do not report their disability.

SLIDE 6
SLIDE TITLE: In the upper right hand corner of the slide is the text "18-24 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Four of the silhouettes are colored in. 
SLIDE NOTES:
SPECIAL NOTE: 
It is suggested that you instruct each person in your audience to select one of the “figures” and follow him/her through the progression of slides.  The figures are male and female so they can find one of their own gender.  Those that are not translucent, have a disability in this first age group. 

The power of this presentation technique will be evident by the end of the slide set.

7% of age group 18-24 yrs.
 
SLIDE 7
SLIDE TITLE:  In the upper right hand corner of the slide is the text "25-34 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Five of the silhouettes are colored in. 
SLIDE NOTES:
9% of age group 25-34 yrs.

SLIDE 8
SLIDE TITLE:  In the upper right hand corner of the slide is the text "35-44 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Eight of the silhouettes are colored in. 
SLIDE NOTES:
15% of age group 35-44 yrs.

SLIDE 9
SLIDE TITLE:  In the upper right hand corner of the slide is the text "45-54 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Eleven of the silhouettes are colored in. 
SLIDE NOTES:
20% of age group 45-54 yrs.

SLIDE 10
SLIDE TITLE:  In the upper right hand corner of the slide is the text "55-64 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Seventeen of the silhouettes are colored in. 
SLIDE NOTES:
29% of age group 55-64 yrs.

SLIDE 11
SLIDE TITLE:  In the upper right hand corner of the slide is the text "65-74 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Twenty of the silhouettes are colored in. 
SLIDE NOTES:
37% of age group 65-74 yrs.

SLIDE 12
SLIDE TITLE:  In the upper right hand corner of the slide is the text "75-84 yrs."
SLIDE TEXT:
The slide is composed of silhouettes against a white background representing about 30 people of mixed gender.  On the lower left side of the slide is a stylized pie chart.    Thirty-two of the silhouettes are colored in. 
SLIDE NOTES:
At the conclusion, each figure will either represent a person with a “disability” (i.e. non-translucent) or will represent a person who is close to someone who has a disability.

59% of age group 75+ yrs.

SLIDE 13 - 
SLIDE TITLE:  Accessibility:  Everyone Needs It
SLIDE TEXT:
(Returns to previous slide format of white text on navy blue background)
"More and more Americans will have functional limitations 
as they get older, with one in three people facing at least 
one limitation by the time they reach 55 to 64 years of 
age." 

Craig Luigart, CIO
U.S. Department of Education

From“Access Granted” by Brian Friel
Government Executive Magazine, June 1, 2002


SLIDE 14
SLIDE TITLE:  Who is our audience?
SLIDE TEXT:
EVERYONE

SLIDE 15
SLIDE TITLE:  Federal laws and Accessible IT
SLIDE TEXT:
- ADA & Section 504 of the Rehabilitation Act – establishes the rights (the word "rights" is emphasized) of individuals to an accommodation
- Section 508 of the Rehabilitation Act – establishes standards (the word "standards" is emphasized) for development, procurement, maintenance and use of accessible IT by federal agencies & their employees

SLIDE 16
SLIDE TITLE:  NYS Laws
SLIDE TEXT:
NYS Web Accessibility Policy 99-3 (1999)
- http://www.oft.state.ny.us/policy/99-3.htm
- requires that "all New York State agencies' web sites provide universal accessibility to persons with disabilities"
- uses W3C guidelines

SLIDE 17
SLIDE TITLE:  Standards/Guidelines for Accessibility
SLIDE TEXT:
- Section 508 of the Rehabilitation Act
- Web Content Accessibility Guidelines (WCAG)
  - http://www.w3.org/WAI/
  - 14 guidelines
  - Priority 1, 2 and 3 checkpoints
  - Priority 1 - MUST DO
  - Priority 2 - SHOULD DO
  - Priority 3 - MAY DO
  - Version 2 in draft form

SLIDE 18
SLIDE TITLE:  How do People with Disabilities Access the Web?
SLIDE TEXT:
- Blind and visually impaired
- Color blind
- Deaf and hearing impaired
- Mobility impairments
- Learning disabilities

SLIDE 19
SLIDE TITLE:  Blindness
SLIDE TEXT:
Slide is divided into two columns; on the left is the disability and some facts about the way people with the disability interact with technology.  In the right column are some design considerations associated with the disability.
Left Column:
Users:
- Do not use a mouse
- May use a screen reader to listen to the content
- May use a refreshable braille display (includes a small photo of a braille display)
Right Column:
Design Considerations:
- Images, photos and graphics are unusable
- Colors are unusable
- Navigation may be difficult/confusing
- All content must be accessible from the keyboard

SLIDE 20
SLIDE TITLE:  Blindness:  Accessible Design Techniques
SLIDE TEXT:
- Provide text description for all images & photos ("alt" tags)
- Provide an option to skip navigation
- Ensure keyboard accessibility
- Use meaningful links ("Class schedule" rather than "click here")
- Use proper HTML (header tags, etc.)
- Don't write scripts that require mouse usage


SLIDE 21
SLIDE TITLE:  Low Vision
SLIDE TEXT:
Slide is divided into two vertical columns.  
On the left:
Users:
- Use screen magnification software
On the right:
Design Considerations:
- Images, photos and graphics may become unusable when enlarged
- Navigation may be difficult/confusing

Note:  The next two slides deal with sets of two images, a photo of an individual and an image of text.

SLIDE 22
SLIDE TITLE:  Low Vision: Common causes
SLIDE TEXT:
There are two sets of imagess on this slide:
The first, with the caption "Cataracts," depicts a photo of a young boy that is generally indistinct, as if there is a semi-opaque film over the camera lens. Next to that photo is an image of text, which is also very indistinct and filmy.
The second, comprising two images with the caption "Glaucoma," shows the same photo of an individual, with the photo's periphery blanked out, as if viewing the image through a tube.  Another image depicts what effect this condition might have on viewing text, where the focus is restricted to a circle in the center of the image.

SLIDE 23
SLIDE TITLE:  Low Vision: Common causes
SLIDE TEXT:
There are two sets of images on this slide.  
The first, with the caption "Macular Degeneration," shows a dark circle obscuring the center of the photo (in this case, the individual's face).  The same effect is applied to an image of text.
The second, with the caption "Retinopathy," shows amorphous dark blots randomly scattered over the photo.  The image of text is similarly affected, with dark blots obscuring the text.

SLIDE 24
SLIDE TITLE:  Low Vision: Experience it
SLIDE CONTENT:
The image that occupies this slide is fuzzy black lettering (it appears to be out of focus) on a white background.  The lettering reads "Graphical Text."

SLIDE 25
SLIDE TITLE:  Low Vision: Accessible Design Techniques
SLIDE TEXT:
The slide is divided into two columns.  In the left column:
- Limit or eliminate text within graphics
- Have plenty of contrast
- Use relative rather than absolute font sizes
In the right column are two images of random text, vertically stacked.  The top image shows yellow text against a black background.  The bottom image shows white text against a black background.

SLIDE 26
SLIDE TITLE:  Color Blindness
SLIDE TEXT:
Slide is divided into two vertical columns.  
On the left:
Users:
- May change color settings in browser
- Approximately 8-10% of the male population and about 0.5% of the female population experiences some form of color deficiency 
- Cell phone, PDA and text browser users may not have color
On the right:
Design Considerations:
- Reds & greens are often indistinguishable
- Other colors may be indistinguishable

SLIDE 27
SLIDE TITLE:  Color Blindness: Experience it
SLIDE TEXT:
Map of Hurricane Isabel (with color)
Below this label is a map of the northeastern quarter of the United States in green, against a turquoise background, showing the path of the 2003 Hurricane Isabel.  In the upper right of the image is the logo for NOAA.  In the lower right corner of the image is a legend to the colors and symbols used on the map.

The northern North Carolina Atlantic coast, as well as the coast from Maryland north to Massachusetts, are colored in a dark royal blue, which the legend indicates represents a tropical storm warning.  The Virginia Atlantic coast is colored in red, which the legend indicates represents a hurricane warning.  

There is a black dot haloed in orange just southeast of Williamsburg, Virginia, indicating the hurricane's position at the time the map was prepared.  Radiating north-north-west from the current position are a series of large black dots connected by a black line.  Each of the dots represents a time and day, indicating the projected future positions of the hurricane as it moves ashore.  Surrounding the line indicating the hurricane's projected path is an area of white, which the legend indicates is the potential 1-3 day track area of the storm.

SLIDE 28
SLIDE TITLE:  Color Blindness: Experience it
SLIDE TEXT:
Map of Hurricane Isabel (with red/green colorblindness)
Below the label is the same map as appeared in slide 27, although the colors are altered.  The map of the U.S. is a mustard yellow-brown, the background is a light periwinkle blue.  The dark royal blue indicating the tropical storm warning area is still visible, but the red indicating hurricane warning is the same mustard yellow-brown, as is the current location of the storm.

At the bottom of the slide is this note:
"Simulated using Vischek (http://www.vischeck.com/vischeck/vischeckURL.php)".



SLIDE 29
SLIDE TITLE:  Color Blindness: Experience it
SLIDE TEXT:
The slide consists of the label "Subway map" and below it, two images.  The image on the left is a subway map on which the routes are laid out in various colors against a white background.  In the image on the right, the image is just black on white.

SLIDE 30
SLIDE TITLE:  Color Blindness: Accessible Design Techniques
SLIDE TEXT:
The slide consists of text above two images.
The text:
- Do not use color alone to convey content
- Use additional cues or information to convey content
The images consist of text on a white background.
On the left:
The flights listed below in RED (the word "RED" is in red) have been cancelled. The flights in GREEN (the word "GREEN" is in green) are departing on time.  
Delta 1342 (in red)
United 320 (in green)
American Airlines 787 (in green)
Southwest 2390 (in red)
On the right:
The flights listed below that have been cancelled are indicated in RED (the word "RED" is in red) and by an asterisk. The flights in GREEN (the word "GREEN" is in green) are departing on time.
Delta 1342* (in red)
United 320 (in green)
merican Airlines 787 (in green)
Southwest 2390* (in red)


SLIDE 31
SLIDE TITLE:  Mobility Impairments
SLIDE TEXT:
The slide is divided into two vertical columns.
On the left:
Users:
- May use only the keyboard for navigation
- May tire quickly
- May not have fine motor control
On the right:
Design Considerations:
- All content must be accessible from the keyboard
- Lengthy navigation may cause fatigue
- Small links are difficult to select

SLIDE 32
SLIDE TITLE:  Mobility Impairments: Assistive Technology
SLIDE TEXT:
The slide is divided into two columns.
On the left:
- Head wand 
Beneath the label is a photo of a head wand, a headband with a long, angled rod affixed to it.  At the end of the rod is what appears to be a rubber tip, flanged and wider at the outermost end than the rod itself.
- Adaptive Keyboard
Beneath the label is a photo of a keyboard which has embossed round depressions representing each key.
On the right:
- Mouth stick
Beneath the label are two photos of a mouth stick.  The upper photo shows a device which is wide and mouth-shaped on one end.  It appears to be approximately 18" long.  At the other end is a rounded rubber tip.  The lower photo demonstrates how the rubberized end of the stick is used to maneuver the computer keyboard.

SLIDE 33
SLIDE TITLE:  Mobility Impairments: Accessible Design Techniques
SLIDE TEXT:
- Ensure that the page is keyboard accessible
- Do not require fine motor control (free of moving links or very small links)
- Provide a way to skip over long lists of links & other lengthy content (visible skip navigation link)

SLIDE 34
SLIDE TITLE:  Deaf and Hearing Impaired
SLIDE TEXT:
The slide is divided into two vertical columns.
On the left:
Users:
- Do not use audio features
On the right:
Design Considerations:
- Video clips that include audio-only are unusable
- Audio clips are unusable

SLIDE 35
SLIDE TITLE:  Deafness: Accessible Design Techniques
SLIDE TEXT:
- Provide transcripts for all audio content 
- Provide synchronized captions for all video content (MAGpie-free captioning tool)
- Many people benefit
  - Students in library w/o headset
  - People with learning disabilities
  - People for whom English is not their primary language
  - People in a noisy environment
  - Everyone (content is presented in >1 medium)

SLIDE 36
SLIDE TITLE:  Cognitive Disabilities
SLIDE TEXT:
The slide consists of two vertical columns.
On the left:
Users:
- May have difficulty focusing on or comprehending lengthy sections of text
- Complex layouts or inconsistent navigational schemes may be confusing
- May need content in >1 form
On the right:
Design Considerations:
- Animated images may be distracting
- Complex layouts may lead to confusion
- Text-only content may be limiting

SLIDE 37
SLIDE TITLE:  Cognitive Disability: Accessible Design Techniques
SLIDE TEXT:
- Simplify the layout as much as possible
- Provide clear and consistent site navigation
- Organize information into manageable "chunks"
- Logically organize your site and individual documents
- Use icons, illustrations, arrows, audio, video or other multimedia to enhance understanding

SLIDE 38
SLIDE TITLE:  Web Accessibility:  Designing for  Everyone
SLIDE TEXT:
- People using different web browsers
- People using different screen resolutions
- People using phone web services
- People using handheld display units
- People using car computing systems
- People using screen readers
- People who are deaf or hard of hearing
- People who can't use a mouse
- People who are color blind
- People with differences in attention/perception

SLIDE 39
SLIDE TITLE:  To Learn More
SLIDE TEXT:
- WebAIM (Web Accessibility in Mind) http://www.webaim.org
- EASI (Equal Access to Software and Information) http://www.rit.edu/~easi
- NCAM (National Center for Accessible Media), WGBH http://ncam.wgbh.org/index.html
- AccessIT (National Center on Accessible Information Technology in Education) http://www.washington.edu/accessit