intro to accessibility workshop slides
TRANSCRIPT
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
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
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
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
Inclusive
Effective
Efficient
Supportive
Accessibility Goals
6
We will design our Web services so they are:
Perceivable
Operable
Understandable
Robust
Accessibility Principles
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
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
Why does Accessibility matter?
“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.”
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
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
Accessibility doesn’t happen automatically
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
Accessibility Tools and TechniquesBill Corrigan, Accessible[ly]
15
photo credit: Dan Comden, University of Washington, 3/2012
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
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
<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
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
• 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
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
• 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
Presented by Bill Corrigan, Accessible[ly], April 25, 2014, Austin, TX
[email protected], @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