Transcript Web Accessibility

Introduction to Web Accessibility
(and Usability)
Robert L. Todd
USG, Director, Policy and Partnership
Development
[email protected]
Senior Research Scientist
Georgia Institute of Technology
Introduction to Web Accessibility and Usability
Robert L. Todd
What is Accessible Web Design?
• Design for the web that attempts to
make information available to all users.
• Design for Disability, but also for
Usability - the design of interfaces that
are effective, efficient and satisfying
Introduction to Web Accessibility and Usability
Robert L. Todd
What is Accessible Web Design?
Web Accessibility –
Web accessibility means that people with disabilities
can use the Web. More specifically, Web accessibility
means that people with disabilities can perceive,
understand, navigate, and interact with the Web, and
that they can contribute to the Web. (W3C.org, 2013)
Introduction to Web Accessibility and Usability
Robert L. Todd
What is Accessible Web Design?
• Basically - it means that people with
disabilities can use the Web.
• Specifically - it includes all types of
disabilities, e.g., visual, auditory,
physical, speech, cognitive, and
neurological.
Introduction to Web Accessibility and Usability
Robert L. Todd
What is Accessible Web Design?
Introduction to Web Accessibility and Usability
Robert L. Todd
What is Accessible Web Design?
Example: Not very accessible …
Introduction to Web Accessibility and Usability
Robert L. Todd
What is usability?
• Usability - the design of interfaces that
are effective, efficient and satisfying
• Exhibit – Usable?
Introduction to Web Accessibility and Usability
Robert L. Todd
What is usability?
Usability is a quality attribute relating to
how easy something is to use. It refers
to how quickly people can learn to use
something, how efficient they are while
using it, how memorable it is, how errorprone it is, and how much users like
using it. (Nielsen & Loranger, 2006)
Introduction to Web Accessibility and Usability
Robert L. Todd
What is usability?
Good resource: Usability.gov
http://www.usability.gov/basics/ucd
/index.html
Introduction to Web Accessibility and Usability
Robert L. Todd
Relationship: Accessibility and
Usability
When designing online resources, it is
rarely useful to distinguish between
accessibility and usability - they are an
organic whole.
Introduction to Web Accessibility and Usability
Robert L. Todd
Relationship: Accessibility and
Usability
Electronic Curb Cuts - For the most part,
the same design features that make a site
accessible make it usable, and vice versa
Introduction to Web Accessibility and Usability
Robert L. Todd
Relationship: Accessibility and
Usability
• Example: If a site uses images for
navigation and there is no alt text, then
… it is not accessible.
• But … if it includes poorly written,
verbose alt text, it is accessible, but not
usable.
Introduction to Web Accessibility and Usability
Robert L. Todd
Relationship: Accessibility and
Usability
Alt Text Examples:
Introduction to Web Accessibility and Usability
Robert L. Todd
Relationship: Accessibility and
Usability
Alt Text Examples:
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessible – Also Usable
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessibility and Usability
To sum up: Accessibility is nothing more than the logical
extension of usability to include all people.
– Usability and accessibility should go hand-in-hand
– For the most part, this is true: increased
accessibility leads to greater usability
Introduction to Web Accessibility and Usability
Robert L. Todd
Who are the People with
Disabilities?
Introduction to Web Accessibility and Usability
Robert L. Todd
Disabilities
“Disability” is an imprecise word:
– Disability (and ability) is different over
time and between people
– People can have combinations of
disabilities
– Better to use functional descriptions
• TBI example
• Cerebral Palsy example
Introduction to Web Accessibility and Usability
Robert L. Todd
Disabilities
Specific disabilities and case studies
– Visual disabilities
– Hearing disabilities
– Physical disabilities
– Speech disabilities
– Behavioral disabilities
Introduction to Web Accessibility and Usability
Robert L. Todd
Disabilities
Specific disabilities and case studies
– Cognitive and neurological disabilities
– Multiple disabilities
– Aging related conditions
Introduction to Web Accessibility and Usability
Robert L. Todd
Disabilities
Excellent online source with case studies
at W3C/WAI:
http://www.w3.org/WAI/intro/people-useweb/Overview.html
Introduction to Web Accessibility and Usability
Robert L. Todd
Disabilities
Different disabilities may be addressed by
similar accommodations
– Blind person
– Person with no use of hands
• Both assisted by keyboard controls
in place of mouse, in conjunction
with other assistive technology (AT)
Introduction to Web Accessibility and Usability
Robert L. Todd
Disabilities
Accessibility solutions contribute to
Universal Design and Usability
– Example - Voice recognition benefits:
• Person with no use of hands
• Busy worker with poor typing skills
Introduction to Web Accessibility and Usability
Robert L. Todd
Macular Degeneration
Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm
In general, magnification and high levels of illumination
will assist in reading and other near vision tasks.
Introduction to Web Accessibility and Usability
Robert L. Todd
Cataracts
Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm
Age related cataracts are often yellow or brown
causing loss of sensitivity to blue.
Introduction to Web Accessibility and Usability
Robert L. Todd
Diabetic Retinopathy
Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm
This is the largest single cause of visual impairment among
those of working age.
Introduction to Web Accessibility and Usability
Robert L. Todd
Tunnel Vision/Retinitis Pigmentosa
Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm
This impairment often makes it possible to read
small print but not large print.
Introduction to Web Accessibility and Usability
Robert L. Todd
20/200 Legally Blind View of
Computer Screen
Introduction to Web Accessibility and Usability
Robert L. Todd
Aging/Cataract View of
Computer Screen
Introduction to Web Accessibility and Usability
Robert L. Todd
Audience Factors
19.4% of Americans (54 million) have a
disability
800 million+ world-wide
10% to 15% of the browsing population
Introduction to Web Accessibility and Usability
Robert L. Todd
Audience Factors: Numbers
Disability as a function of age
Introduction to Web Accessibility and Usability
Robert L. Todd
Audience Factors: Numbers
Prevalence of disabilities in U.S.
Introduction to Web Accessibility and Usability
Robert L. Todd
Audience Factors: Numbers
Aging and disability
Introduction to Web Accessibility and Usability
Robert L. Todd
Audience Factors: Numbers
Graying of the U.S.
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessibility Guidelines and
Standards
Introduction to Web Accessibility and Usability
Robert L. Todd
Web Accessibility Guidelines
Which guidelines to use?
– Section 508 similar to WCAG 2.0, level A
and part of level AA
– WCAG 2.0 Conformance levels AA and
AAA most restrictive
– WCAG 2.0 Conformance Level AAA - most
accessible, but some trade-off in design
limitations
Introduction to Web Accessibility and Usability
Robert L. Todd
Laws vs. Guidelines
508 or WCAG 1.0? A general comparison.
Paragraphs (l), (m), (n), (o), and (p) of Section 508 article 1194.22 are different from
WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1
checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to
comply with this section.
Introduction to Web Accessibility and Usability
Robert L. Todd
Web Accessibility Guidelines
Which guidelines to use?
– Section 508 - created by the Access Board,
legislated
– WCAG - created by the WAI/W3C,
voluntary, 2.0 current, 1.0 still used
Introduction to Web Accessibility and Usability
Robert L. Todd
Laws vs. Guidelines
508 or WCAG 2.0?
WCAG 2.0 techniques can be used to meet
unambiguously every one of the Section 508
guidelines.
Conversely, a Section 508-compliant page using
these techniques will also conform to WCAG
2.0 Level A and part of Level AA (with the
exception of three criteria)
Introduction to Web Accessibility and Usability
Robert L. Todd
Laws vs. Guidelines
508 or W3C? A general comparison.
– 508 paragraph (a)
• A text equivalent for every non-text element shall be
provided (e.g., via "alt", "longdesc", or in element
content).
– W3C Priority 1, checkpoint 1.1
• Provide a text equivalent for every non-text element (e.g.,
via "alt", "longdesc", or in element content). This
includes: images, graphical representations of text
(including symbols), image map regions, animations
(e.g., animated GIFs), applets and programmatic objects,
ascii art, frames, scripts, images used as list bullets,
spacers, graphical buttons, sounds (played with or
without user interaction), stand-alone audio files, audio
tracks of video, and video.
Introduction to Web Accessibility and Usability
Robert L. Todd
Laws vs. Guidelines
508 or W3C?
– W3C is a more international standard
– W3C 2.0 has three levels of conformance
•A
• AA
• AAA
– WCAG 2.0 current - POUR
Introduction to Web Accessibility and Usability
Robert L. Todd
Laws vs. Guidelines
508 or W3C?
– Level AA of WCAG requires use of relative
values; no use of absolute values
– Level A of WCAG and Section 508 absolute values allowable
WCAG 1.4.4 Resize text: Except for captions and
images of text, text can be resized without assistive
technology up to 200 percent without loss of content
or functionality. (Level AA)
Introduction to Web Accessibility and Usability
Robert L. Todd
Web Accessibility Guidelines
Section 508 guidelines
Guidelines www.section508.gov
Checklist www.webaim.org/standards/508/checklist
Introduction to Web Accessibility and Usability
Robert L. Todd
Web Accessibility Guidelines
WCAG Guidelines
Guidelines www.w3.org/TR/WCAG10/
http://www.w3.org/TR/WCAG20/
Checklist http://webaim.org/standards/wcag/checklist
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessibility Verification
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessibility Verification
Some free, online tools for verifying web
accessibility:
WAVE - http://wave.webaim.org/
Cynthia Says - http://www.cynthiasays.com/
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessibility Verification
Some free, online tools for verifying web
accessibility:
Achecker - http://achecker.ca/checker/index.php
PowerMapper http://try.powermapper.com/demo/powermapp
er.aspx
Let’s test on a site and see what happens …
Introduction to Web Accessibility and Usability
Robert L. Todd
Accessibility Verification
Professional tools:
•Powermapper tools
•HiSoftware Compliance Sheriff
Rather complete list of all tools, free and
for pay:
•WebAIM List of Evaluation Tools
Introduction to Web Accessibility and Usability
Robert L. Todd
Validating Web Pages
Validation and Repair Tools
– Validation tools - perform accessibility
analyses of pages or sites and return a
report or rating
• WAVE - http://wave.webaim.org/index.jsp
• Cynthia Says - http://www.contentquality.com/
Introduction to Web Accessibility and Usability
Robert L. Todd
Validating Web Pages
Validation and Repair Tools
– Repair tools - tools that assist web authors
to modify code to be more accessible.
Many such tools are automatic or wizard
based. Most include validation tools, as
well.
• Powermapper tools
• HiSoftware Compliance Sheriff
Introduction to Web Accessibility and Usability
Robert L. Todd
Validating Web Pages
More tips on validating pages
– Use all alternative browsers available
– Consult case studies of users with
disabilities
– Test with users with disabilities!
– Important considerations for manual +
assisted checks:
http://webaim.org/articles/tools/#list
Introduction to Web Accessibility and Usability
Robert L. Todd
Access Techniques
Introduction to Web Accessibility and Usability
Robert L. Todd
Separating Content from
Presentation
Assistive Technology (AT) strips content from
presentation and represents it
Code with this in mind, and you will ease the
transition from browser to AT mode.
– Can be done a variety of different ways
– Keep *naked* code
– Avoid deprecated tags
– Use CSS, etc., to create look and feel
Introduction to Web Accessibility and Usability
Robert L. Todd
Text Equivalents (images)
Navigational elements or bitmap text
– ALL images require descriptive alternative
text, “alt text”
– If the image is text, the alt description
must be the same as the visual description
– Each area of an image map must have a
unique alt description as well as an
overall descriptor
Introduction to Web Accessibility and Usability
Robert L. Todd
Text Equivalents (images)
Appropriate alternative text depends
strongly on context.
Example: What to call this?
Introduction to Web Accessibility and Usability
Robert L. Todd
Alt Text Depends on Context
Introduction to Web Accessibility and Usability
Robert L. Todd
Text Equivalents (images)
Navigational elements or bitmap text
– Buttons that are images (NOT code/html
generated) require action alt description
RESNA Logo
Go to RESNA Home
Introduction to Web Accessibility and Usability
Robert L. Todd
Text Equivalents
Federal
Court
Concepts
kwajex.gif (45k)
Email me
Introduction to Web Accessibility and Usability
Robert L. Todd
Text Equivalents (images)
Images not important for understanding
– Non-informational & Spacers
• Null alt
–<img src=“clear.gif alt=“”>
• Allows assistive technology and
accessibility checking software to
*ignore* non-informational images
Introduction to Web Accessibility and Usability
Robert L. Todd
Primer on Alt Text
Alt attribute on <img> tag – how to do it
correctly:
http://webaim.org/techniques/images/alt_text
Introduction to Web Accessibility and Usability
Robert L. Todd
Image Maps
All image maps must be linearized &
contain valid alt text
– Create client-side image maps using the “usemap”
command rather than server-side with “ismap” command
because server-side maps may require a specific input
device
– Use an alt attribute for each <area> tag & make sure that
they are distinct from one another
Introduction to Web Accessibility and Usability
Robert L. Todd
Image Maps
Introduction to Web Accessibility and Usability
Robert L. Todd
Color & Contrast
Using the palettes in Photoshop
Web safe
palette
Deutan color
palette
Protan color
palette
Introduction to Web Accessibility and Usability
Robert L. Todd
Color and Contrast
If the colors used in a site have poor contrast, it may be
difficult to read for some users.
(i.e. light blue text on light green background)
This text has better contrast, but the heading on this
slide is even better.
(i.e. black text on light green background; white or yellow text on black
background)
Introduction to Web Accessibility and Usability
Robert L. Todd
Color & Contrast
Avoid using color alone to convey information. Some
statistics:
– 1 in 20 visitors to your site will have a color deficiency
(8% of men 4% of women)
– Over half (4.9%) of color deficiencies are deuteranomolous
trichromats (green-insensitive)
– Use redundant textual cues for all information conveyed in
color alone
– Ensure that all information conveyed with color is also
conveyed without color (even think about the colors of active,
visited links and how to deliver this contextual information to
your color deficient users)
– Keep in mind cultural connotation to color values as well
Introduction to Web Accessibility and Usability
Robert L. Todd
Color & Contrast
Avoid using color alone to convey information. Some
statistics:
– 1 in 20 visitors to your site will have a color deficiency
(8% of men 4% of women)
– Over half (4.9%) of color deficiencies are deuteranomolous
trichromats (green-insensitive)
– Use redundant textual cues for all information conveyed in
color alone
– Ensure that all information conveyed with color is also
conveyed without color (even think about the colors of active,
visited links and how to deliver this contextual information to
your color deficient users)
– Keep in mind cultural connotation to color values as well
Introduction to Web Accessibility and Usability
Robert L. Todd
Color & Contrast
Ways to avoid color access barriers:
– Switchable Style Sheets
– Print design comps on b/w printer
– Free preview tools for images and interface
elements to simulate end-user experience
(lighthouse, iamcal & vischeck)
– Use published color blindness palettes at the
development level for interface elements
– Design for dichromats will accommodate any
lesser degree of color deficiency
Introduction to Web Accessibility and Usability
Robert L. Todd
Layout Tables
Unless you have a very good reason
…DON’T USE TABLES FOR LAYOUT!
AT Linearization
– Null summary <table summary=“”>
– If you cannot linearize, provide an alternate
version
Introduction to Web Accessibility and Usability
Robert L. Todd
Reading Order of Tables
Screen
Readers
read
information
across
tables
in a
linear
way
thereby
making
it
difficult
to
understand
information
contained
in tables.
Introduction to Web Accessibility and Usability
Robert L. Todd
Screenreader View of Table
“There is a 30% chance of Classes at the
University of rain showers this morning, Wisconsin
will resume on but they should stop before
September 3rd. the weekend.”
There is a 30% chance of
Classes at the University of
rain showers this morning,
Wisconsin
will resume on but they
should stop before
September 3rd. the
weekend.
Introduction to Web Accessibility and Usability
Robert L. Todd
Table Accessibility: More?
More info on accessible tables, available
online at:
http://webaim.org/techniques/tables/
Introduction to Web Accessibility and Usability
Robert L. Todd
Navigation
Consistent placement of elements
– Ads, navigation bars, content, etc.
Create predictability through consistency
– Efficiency, speed, enables “power
browsing”
Describe navigational elements
– Global, local, content, but in the user’s
language.
Group related links with structural markup
Introduction to Web Accessibility and Usability
Robert L. Todd
Navigation
Named Anchors
– Local link points within a single html page
<a name=“content”></a>
<a href=“#content”>skip to</a>
– Needed to make skip nav methods work
Introduction to Web Accessibility and Usability
Robert L. Todd
Navigation
Skip Navigation
– HTML Link
– Linking a clear .gif
<a href=“#content”><img
src=“clear.gif alt=“skip to main
content”></a>
– Invisible HTML Link – simply use text link
that is hidden by style sheet
Introduction to Web Accessibility and Usability
Robert L. Todd
Navigation
Skip Navigation Examples
– NY times
– AssistiveTech
– American Foundation for the Blind –
http://www.afb.org/default.aspx
Introduction to Web Accessibility and Usability
Robert L. Todd
Navigation
Helpful techniques:
• Provide navigation bars to highlight and give access
to the navigation mechanism.
• Group related links, identify the group (for user
agents), and, until user agents do so, provide a way to
bypass the group.
– Group sets of links with a group title attribute
– title attribute may annotate any number of elements
Introduction to Web Accessibility and Usability
Robert L. Todd
Cascading Style Sheets (CSS)
Uses:
–
–
–
–
–
–
–
–
–
Fonts
Colors
Backgrounds
Graphical bullets
Positioning
Padding
Indenting
Borders
And a million more!
Introduction to Web Accessibility and Usability
Robert L. Todd
Cascading Style Sheets (CSS)
Purpose/Goal
– Separating Content from Presentation
• Redefine HTML tags
• Move towards *naked* code
• Create a fluid design
– Reduce maintenance
– Create site-wide consistency
Introduction to Web Accessibility and Usability
Robert L. Todd
Cascading Style Sheets (CSS)
Custom Classes
– More control
– Control whether CSS can be overridden by user defined style
sheet
– Modularity & reusability
Style Swapping
– Provide different presentation of content
– Allows for user customization
Introduction to Web Accessibility and Usability
Robert L. Todd
Cascading Style Sheets (CSS)
Other CSS Examples:
– Texas School for the Blind & Visually
Impaired
– CSS Zen Garden
Introduction to Web Accessibility and Usability
Robert L. Todd
Audio
Audio may be inaccessible to people who
are deaf or hard of hearing
The same section 508 provision that
applies to images for the visually
impaired applies here:
– 1194.22 – “A text equivalent for every
non-text element shall be provided.”
Introduction to Web Accessibility and Usability
Robert L. Todd
Audio
Example: http://www.pbs.org/newshour/
Caution: Care must be taken to associate audio
files with links to transcripts so that speech
output and text-only browsers will make the
association clear (i.e., proper positioning and
alt text).
Introduction to Web Accessibility and Usability
Robert L. Todd
Resources for Audio and Video
• W3C Multimedia Accessibility FAQ
• WebAIM tools for multimedia
Introduction to Web Accessibility and Usability
Robert L. Todd
Video
Section 508 - 1194.22 (b) - Equivalent
alternatives for any multimedia
presentation shall be synchronized with
the presentation
Since the content must be synchronized,
transcripts will not suffice
How to proceed? Captioning.
Introduction to Web Accessibility and Usability
Robert L. Todd
Video
Captioning - synchronizes images, audio and text.
Captioning makes materials accessible to some, but
more useful to almost everyone.
It can present material in multiple sensory modalities,
enhancing the learning experience for all.
It also helps those who do not speak the target
language well.
Examples:
http://ncam.wgbh.org/invent_build/web_multi
media/mobile-devices/sample-clips
Introduction to Web Accessibility and Usability
Robert L. Todd
Video
A convenient, free tool for this is MAGpie:
The Media Access Generator (MAGpie) was developed
by the National Center for Accessible Media (NCAM).
MAGpie makes it easy for multimedia content
developers to add captions to their audio and video
content. MAGpie provides an environment for
developers to listen to their content, add captions and
synchronize the captions to the content by adding a
timecode to each event.
Introduction to Web Accessibility and Usability
Robert L. Todd
Video
MAGpie can export the captions to three
multimedia formats:
– Microsoft's Synchronized Accessible Media
Interchange (SAMI) format,
– The World Wide Web Consortium's (W3C)
Synchronized Multimedia Integration Language
(SMIL) format and
– Apple's QuickTime format.
Introduction to Web Accessibility and Usability
Robert L. Todd
Video
MAGpie has an integrated help center. The
tutorial offers detailed instructions on how to
create captions and audio descriptions.
MAGpie:
http://ncam.wgbh.org/webaccess/magpie/
Introduction to Web Accessibility and Usability
Robert L. Todd
Video: New Captioning Technology
Sony Entertainment Access Glasses
Introduction to Web Accessibility and Usability
Robert L. Todd
What is Assistive Technology?
How can it impact Web
Accessibility?
Introduction to Web Accessibility and Usability
Robert L. Todd
Assistive Technology
Assistive Technology (AT) - products used
by PWDs to help accomplish task that
they can’t accomplish otherwise
Adaptive Strategies - techniques (with or
without AT) that are used to accomplish
tasks
Introduction to Web Accessibility and Usability
Robert L. Todd
Assistive Technology
For our purposes, two main types:
– General, prosthetic AT - can by anything
that helps a person do something that
couldn’t otherwise be accomplished
– Web access AT - specific to web access
and use
Introduction to Web Accessibility and Usability
Robert L. Todd
Assistive Technology
Web access AT:
– Built-in
• Windows
• Mac OS
– Add-on
• Text to speech
• Text browsers
Introduction to Web Accessibility and Usability
Robert L. Todd
Built-in AT Example
Introduction to Web Accessibility and Usability
Robert L. Todd
Add-on Web AT
Add-on applications and tools:
– Used in conjunction with web
browsers or operating systems
– Common in web applications
Introduction to Web Accessibility and Usability
Robert L. Todd
Add-on AT Examples
Introduction to Web Accessibility and Usability
Robert L. Todd
Add-on Web AT
For visual disabilities:
– Text to speech
– Text only
– Screen magnifiers
– Braille and refreshable Braille
– Style sheets, tabbing
Introduction to Web Accessibility and Usability
Robert L. Todd
Add-on Web AT
For physical disabilities:
– Alternative keyboards or switches
– Speech recognition
– Scanning software
– Pointing devices
– Eyegaze equipment
Introduction to Web Accessibility and Usability
Robert L. Todd
Add-on Web AT
For hearing disabilities:
– Captioning software
For cognitive disabilities:
– Predictive dictionaries
– Text to speech + text
Introduction to Web Accessibility and Usability
Robert L. Todd
Introduction to Web Accessibility
(and Usability)
Robert L. Todd
USG, Director, Policy and Partnership
Development
[email protected]
Senior Research Scientist
Georgia Institute of Technology
Introduction to Web Accessibility and Usability
Robert L. Todd