The document introduces web accessibility and provides guidelines for making web content accessible to people with disabilities. It defines web accessibility and outlines goals of ensuring barriers are identified and design conflicts are found and resolved. Tools for identifying accessibility issues are introduced. The document discusses educating all content contributors on accessibility challenges and reforming policies and training. Basic design principles are outlined, such as using proper HTML layout without relying solely on CSS. Methods for identifying potential accessibility issues are listed, including online checking tools and examples of common problems.
2. Goals of Presentation
Introduce the concept of web accessibility
Identify our audience & define the barriers
Learn some easy to identify design conflicts
Introduce tools to help find accessibility
issues
Explain how to implement some changes
#cascadeserver @hannon_hill
3. Cliché Definition Slide
Web Accessibility (n)
…means that the Web is designed so that people with
disabilities can perceive, understand, navigate, and interact
with it effectively, as well as create and contribute content
to the Web. – W3.org
http://www.w3.org/WAI/lexicon
#cascadeserver @hannon_hill
4. Alphabet Soup of Accessibility
Acronym What does it stand for? What does it mean/do?
508 Standard Section 508 Standard of the
Rehabilitation Act
Provide web standards for federally funded programs and services; technology must be
accessible to employees and members of the public with disabilities to the extent it does not
pose an “undue burden.”
ADA Americans with Disabilities Act Prohibits discrimination and ensures equal opportunity for persons with disabilities
IDEA Individuals with Disabilities
Education Act
Ensures services to children (birth to 21) with disabilities; support the use of technology to
maximize accessibility to the general education curriculum
Level A WCAG Level A Conformance Satisfies the minimal requirements (Priority 1 checkpoints) as set by WCAG
Level AA WCAG Level AA Conformance Satisfies all Level A and Level AA Success Criteria (Priority 1 & 2 checkpoints) as set by WCAG
Level AAA WCAG Level AAA Conformance Satisfies all Level A, Level AA, and Level AAA Success Criteria (Priority 1,2, & 3 checkpoints)
as set by WCAG
UAAG User Agent Accessibility
Guidelines
Primarily for developers of Web browsers, media players, assistive technologies, and other
user agents
WAI Web Accessibility Initiative WAI develops the guidelines that makes the standard for Web accessibility and provide
resources
WCAG Web Content Accessibility
Guidelines
International set of technical standards for Web accessibility for content developers, web
authoring tool developers and web accessibility evaluation tool developers
6. To Do List
a. Educate
b. Identify Potential Issues
c. Solve the Issues
d. Repeat
#cascadeserver @hannon_hill
7. Education
It’s not just important that you know about
accessibility, but we must educate all content
contributors. Teach them to fish!
•Learn about challenges
•Form/reform policies
•Train developers and contributors
#cascadeserver @hannon_hill
8. Basic Design Principles
• Layout HTML without CSS
• Provide a navigational skip to main content
area
• Use headers in appropriate order
• Only use images where text will not suffice
#cascadeserver @hannon_hill
9. How do you know if your content is
not accessible?
Identify potential design issues
Color Contrast Checker Online Tool (http://www.accesskeys.org/tools/color-contrast.html)
Accessibility Color Wheel (http://gmazzocato.altervista.org/colorwheel/wheel.php)
Identify issues on specific pages
WebAIM Online Tool (http://wave.webaim.org)
Online Tool for Pages & Snippets of HTML (http://achecker.ca/checker/index.php)
Color Contrast Checker Online Tool (http://www.accesskeys.org/tools/color-contrast.html)
Accessibility Color Wheel (http://gmazzocato.altervista.org/colorwheel/wheel.php)
#cascadeserver @hannon_hill
10. Examples
No flickering/blinking images
Color contrast
Alternative Text
Provide captions for media
Table summary/header
Ability to jump to main content
Headings
Use labels and submit elements on forms, make sure there is a way
to fill required fields
Link text
Page should make sense without CSS
#cascadeserver @hannon_hill
11. Q & A
Contact me later:
Penny Kronz
Hannon Hill (Atlanta, GA)
penny@hannonhill.com
678.904.6900 ext 255
#cascadeserver @hannon_hill