53
Web Accessibility Principles Strategies &Tactics Sean Yo • University of Guelph • Web Solutions • CCS @seanyo • seanyo.ca • [email protected]
Web Accessibility
Principles Strategies &Tactics
Sean Yo • University of Guelph • Web Solutions • CCS@seanyo • seanyo.ca • [email protected]
Web Analyst
Accessibility Advocate
IntroductionFundamentals of Web Accessibility
Pop Quiz:
What is A11y?
What is Web Accessibility?
Web accessibility refers to the practice of making websites usable by people of all abilities
and disabilities. When sites are correctly designed developed and edited all users can
have equal access to information and functionality.
http://en.wikipedia.org/wiki/Web_accessibility
VisualHearingMotor
Cognitive
Why Web Accessibility?
• Doing the Right Thing • Beneficial Standards • Save Internet Resources • Be Recognized • It’s the Law… Or it Will Be • Ease of Maintenance • More Aging Visitors • Care and Sleep Well • Google Will Love You
http://accessites.org/why/http://www.webaim.org/intro/
User Experience
Accessibility Experience
People Have Experiences
Checklists Don’t
http://manwithnoblog.com/2010/05/20/kill-accessibility/
PrinciplesThinking About Web Accessibility
The Only One That Matters
People First
AODA Principles
IndependenceDignityIntegrationEquality of opportunity
W3C Principles
PerceivableOperableUnderstandableRobust
StrategiesPlanning For Web Accessibility
Plan for Accessibility……From the Beginning
Most errors are introduced during requirements analysis and design. The later they are removed, the most expensive it is to take them out.
Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.”
Analysis
Design
BuildLaunch
Support
Website Lifecycle
Support
Analysis
Design
BuildLaunch
Support
Change Request Lifecycle
Plan for Accessibility……at every step
Accessibility is not an optionIt is completing a website
Avoid Assumptions About Your Visitors
Count on Text Provide Text Alternatives
Don’t take control of your visitor’s experience
Use Clear Language
Be Usable, Searchable and Navigable
Be Semantic
Separate Content & Presentation
Progressive Enhancement Is the new
Graceful Degredation
Accessibility Testing
DesignFunctional
DemoFinal
Design Testing
LayoutColour Contrast
Unpack Assumptions
Functional Testing
Must work with a keyboard…EasilyLinear Flow
Assistive Technology is a Pre-Req
Demo Testing
All Alt Text in PlaceTest with Screen Reader
Turn off CSS
Final Testing
Real PeopleDifferent Needs
Assistive Technology
Ethnographic TestingTest with Real People
TacticsDoing Web Accessibility
HTML
CSS
JS
Solve Problems Lower on the Web Stack
Images, Forms & TablesOh My!
Images
Forms
Tables
People First
Separate Content & Presentation
Be Sematic
Alt Tags
The Meaning of Colour
Give Forms Linear Flow
Tables Aren’t Evil
Tools:Jaws, NVDA, Fangs
Firefox WebDev ToolbarFirefox Accessibility Extension
Services:http://wave.webaim.org/http://fae.cita.uiuc.edu/
http://www.contentquality.com/http://www.tawdis.net/ingles.html
![Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://static.documents.pub/doc/80x56/54c70c954a79593b3d8b45c6/progressive-enhancement-with-aria-accessibility-summit-2010.jpg)
