Download - Intro to accessibility workshop slides
![Page 1: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/1.jpg)
Designing for Accessibility Hands-on Workshop
Bill Corrigan, Accessible[ly] April 25, 2014, Austin, TX
photo from: http://personaldemocracy.com/disability-community-involvement-initiative
![Page 2: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/2.jpg)
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
![Page 3: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/3.jpg)
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
![Page 4: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/4.jpg)
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
![Page 5: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/5.jpg)
5
Inclusive
Effective
Efficient
Supportive
Accessibility Goals
![Page 6: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/6.jpg)
6
We will design our Web services so they are:
Perceivable
Operable
Understandable
Robust
Accessibility Principles
![Page 7: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/7.jpg)
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
![Page 8: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/8.jpg)
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
![Page 9: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/9.jpg)
9
Why does Accessibility matter?
![Page 10: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/10.jpg)
“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.”
![Page 11: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/11.jpg)
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
![Page 12: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/12.jpg)
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
![Page 13: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/13.jpg)
Accessibility doesn’t happen automatically
![Page 14: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/14.jpg)
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
![Page 15: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/15.jpg)
Accessibility Tools and TechniquesBill Corrigan, Accessible[ly]
15
photo credit: Dan Comden, University of Washington, 3/2012
![Page 16: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/16.jpg)
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
![Page 17: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/17.jpg)
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
![Page 18: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/18.jpg)
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
![Page 19: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/19.jpg)
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
![Page 20: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/20.jpg)
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
![Page 21: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/21.jpg)
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
![Page 22: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/22.jpg)
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
![Page 23: Intro to accessibility workshop slides](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a4f9441a28ab8e6e8b4708/html5/thumbnails/23.jpg)
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