PowerPoint Presentation

SLIDE FORMAT
Generally, slides have a white background with text in black or other dark-color. A dark blue footer area exists on the bottom.

SLIDE 1
SLIDE TITLE:  Accessible Web Design: Background

SLIDE 2
SLIDE TITLE:  Topics
SLIDE TEXT:
- Who benefits from accessible web design?
- Policy and law
- Why make sites accessible?
- How do people with disabilities access the web?

SLIDE 3
SLIDE TITLE:  Who benefits from accessible Web sites?
SLIDE TEXT:
- People with disabilities
- Our aging population
- People using a wide range of technologies

SLIDE 4
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 bottom half 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 5
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 6
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 7
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 8
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 9
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 10
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 11
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 12 - 
SLIDE TITLE:  Our Aging Population
SLIDE TEXT: In 2010, the majority of the US population will be 45 years and older

Image of Adam at his desk with nose pushing through laptop, coffee in left hand.

Brian Basset, Cartoonist and creator of syndicated cartoon Adam@Home

SLIDE 13
SLIDE TITLE:  Accessible Web Pages - Who benefits?
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, or older equipment to view the web
- People whose primary language is not English
- Older people and Seniors
- People who are color blind
In short ....

EVERYONE

SLIDE 14
SLIDE TITLE:  Who benefits?
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 Policies
SLIDE TEXT:
New York State's Official Policy/Standards

NYS Statewide Technology Policy P08-005
"Accessibility of Web-Based Information and Applications”
http://www.cio.ny.gov/Policy/NYS-P08-005.pdf

SLIDE 17
SLIDE TITLE:  Standards/Guidelines for Accessibility
SLIDE TEXT:
- Section 508 of the Rehabilitation Act
www.section508.gov
- Web Content Accessibility Guidelines (WCAG v1.0)
  - 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
  - NYS Statewide Technology Policy P08-005

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:
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)
Design Considerations:
- Images, photos and graphics are unusable
- Colors are unusable
- Navigation may be difficult/confusing
- All content must be accessible from the keyboard
Image of a refreshable Braille display

SLIDE 20
SLIDE TITLE:  Blindness:  Accessible Design Techniques
SLIDE TEXT:
- Provide text description for all meaningful images and photos (“alt” text attributes – e.g. alt=“Photo of … ”)
- Provide an option to skip repetitive navigation
- Ensure keyboard accessibility
- Use meaningful link text (“Class schedule” rather than “click here”)
- Use proper, semantic markup (titles, 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
Partial screenshot magnified browser area
On the right:
Design Considerations:
- Images, photos and graphics may become unusable when enlarged
- Navigation may be difficult/confusing
Partial screenshot magnified browser area with navigation distorted due to magnification 

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:
- Limit or eliminate text within graphics
- Have plenty of contrast
- Use relative rather than absolute font sizes

Below the text are two images of random text, from left to right. The first image shows yellow text against a black background.  The second image shows white text against a black background.

SLIDE 26
SLIDE TITLE:  Color Blindness
SLIDE TEXT:
Users:
- Approximately 8-10% of the male population and about 0.5% of the female population experiences some form of color deficiency 
Design Considerations:
- Reds and 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: simulation
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: simulation
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 text boxes 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:
Users:
- May use only the keyboard for navigation
- May tire quickly
- May not have fine motor control
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 three sections.  The first and second run left to right. The third is located below the first two.
First section:
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.
Second section:
Adaptive Keyboard
Beneath the label is a photo of a keyboard which has embossed round depressions representing each key.
Third Section:
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 and other lengthy content (visible skip navigation link)

SLIDE 34
SLIDE TITLE:  Deaf and Hearing Impaired
SLIDE TEXT:
Users:
- Do not use audio features
Design Considerations:
- Video clips that include audio-only are unusable. If included, clips should be captioned.
- Audio clips are unusable. If included, provide a transcript.

SLIDE 35
SLIDE TITLE:  Deafness: Accessible Design Techniques
SLIDE TEXT:
- Provide transcripts for all audio content 
- Provide synchronized captions for all video content (e.g. 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:
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
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:
This slide is divided into two columns.
Left column
People using:
- different web browsers
- different screen resolutions
- phone web services
- handheld display units
- car computing systems
- screen readers
Right Column
People who:
- are deaf or hard of hearing
- are blind or visually impaired (e.g. low vision, color blind)
- can't use a mouse
- possess differences in attention/perception

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