Slides from a workshop in April, 2014. Focus on tools and techniques to make sites and content accessible to everyone, regardless of disabilities. Starts with Intro, moves into description of an accessibility, and concludes with a look at what developers can do to avoid problems.

1. Designing for Accessibility
Hands-on Workshop
Bill Corrigan, Accessible[ly]
April 25, 2014, Austin, TX
photo from: http://personaldemocracy.com/disability-community-involvement-initiative

2. 2
Be usable and intelligible to as many people as possible,
including
People not able to use a mouse
People not navigating by touch
Be interpretable by assistive technologies
Structured
Semantic
Standard
The Goals of Accessible Web Design

3. Personal
Community
Added value to our (school, institution, company, etc.)
Legal guidelines and requirements
Public relations
The baby-boomers are coming (and they have money)
3
Motivations

4. 4
Goals – Why are we doing this?
Principles – How are we going to reach the goals?
Patterns - What we are going to do to solve
specific problems that come up as we implement
the principles?
From Luke Wrobelski “Design Principles”, (http://www.lukew.com/ff/entry.asp), which he derived from
Service Oriented Architecture literature
Goals/Principles/Patterns

5. 5
Inclusive
Effective
Efficient
Supportive
Accessibility Goals

6. 6
We will design our Web services so they are:
Perceivable
Operable
Understandable
Robust
Accessibility Principles

7. 7
Adhere to standards
Use semantic elements
WCAG 2.0
Accessible Rich Internet Applications (ARIA)
ECMA Standard Scripting
Progressive enhancement methods in scripting
Accessibility Patterns

8. 8
Rapid change
Mobile devices – smartphones to tablets – do it
now, here, get immediate results
Web sites and apps need to work with wide range
of sizes – smartphone,tablet, laptop, desktop
Pressure for simplification – Keep It Seriously
Succinct
Trends Going Forward

9. 9
Why does Accessibility matter?

10. “The U.S. Census Bureau says that over 47 million
Americans have a disability of some kind. The UN
and the World Bank say this adds up to 650 million
people worldwide. That’s around 10% of everyone in
the world.”
!
Excerpt From: Whitney Quesenbery. “A Web for
Everyone.”

11. Web accessibility means that people with disabilities
can perceive, understand, navigate, and interact with
the Web, and that they can contribute to the Web.
http://www.w3.org/WAI/intro/accessibility.php

12. also benefits people using a slow Internet connection,
people with "temporary disabilities" such as a broken
arm, and people with changing abilities due to aging.
http://www.w3.org/WAI/intro/accessibility.php
Flexibility

13. Accessibility doesn’t happen automatically

14. How to avoid Audits
Semantic page markup
Consistent navigation
Keyboard navigation
Skip Navigation
Color
Page titles
Heading tags
Tables
Forms labels
“Click here” text
14

15. Accessibility Tools and Techniques
Bill Corrigan, Accessible[ly]
15
photo credit: Dan Comden, University of Washington, 3/2012

16. 16
• Are header elements being used semantically and
are they organized hierarchically?
• Pseudo headers created with bolding and sizing
will not be recognized as headers
• Check headers with the Web Developer toolbar
Information item; pull it down to "View Document
Outline".
Headers

17. 17
Check for tables with the Web Developer toolbar
Outline item; pull down to "Outline Tables" and then
"Table Cells".
Check content without layout with the Web Developer
toolbar CSS item;
Pull down to "Disable Styles" and then "All Styles".
Scroll down through bare-bones content;
Layout

18. 18
<img src="gw.jpg" alt="George Washington">
Alternative text should be...
Accurate and equivalent
Be succinct
Not be redundant
Not use phrases like "image of..."
Alternative Text

19. The label element associates a name (for="first"with the input element with an id of that name
(id="first")
<form action="form_action.asp" method="get">!
<label for="first">First name:</label>!
<input type="text" name="fname" id="first"/><br />!
<label for="last">Last name:</label>!
<input type="text" name="lname" id="last" /><br />!
<input type="submit" value="Submit" />!
</form>!
Check labeling in a form with the Web Developer toolbar View Source
item; Search in the source for "<label"
19
Labeling

20. 20
• Color choice and the contrast between adjacent
colors are important for determining readability.
• Evaluate colors and contrast with WCAG Contrast
Checker.
• In Photoshop, Choose View > Proof Setup > Color
Blindness, and then choose either Protanopia-type
or Deuteranopia-type
Colors

21. 21
Semantic:
<h2 style="font: medium bold verdana, sans-serif"> New
Technology</h2>!
Non-Semantic:
<div style="font: medium bold verdana, sans-serif"> New
Technology</div>!
Use DIVs for structural elements such as navigation, content,
header, and footer.
Presentation (font size, font family, font size, etc.) of the types is
controlled by the CSS.
Semantic Markup

22. 22
• Tables for layout
• Essential information in graphics without alt text
• Content buried in scripts
• Not using progressive enhancement methods
• Content added after page load (Ajax)
• ARIA roles needed to signal assistive technology
which areas might receive updates
Problem Areas

23. Presented by Bill Corrigan, Accessible[ly], April 25,
2014, Austin, TX
billc@accessible.ly, @accessiblel_ly
Sponsored by Progress UX
http://progress-ux.squarespace.com/, @ProgressUX
Some of the content here was derived from notes
from Rick Ells, University of Washington and the
Accessible Web User Group there.
23
Credits