Web accessibility 2010 v2
description
Transcript of Web accessibility 2010 v2
![Page 1: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/1.jpg)
Web Accessibility
Principles Strategies &Tactics
Sean Yo • University of Guelph • Web Solutions • CCS@seanyo • seanyo.ca • [email protected]
![Page 2: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/2.jpg)
Web Analyst
Accessibility Advocate
![Page 3: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/3.jpg)
IntroductionFundamentals of Web Accessibility
![Page 4: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/4.jpg)
Pop Quiz:
What is A11y?
![Page 5: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/5.jpg)
What is Web Accessibility?
![Page 6: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/6.jpg)
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
![Page 7: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/7.jpg)
VisualHearingMotor
Cognitive
![Page 8: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/8.jpg)
Why Web Accessibility?
![Page 9: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/9.jpg)
• 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/
![Page 10: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/10.jpg)
User Experience
![Page 11: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/11.jpg)
Accessibility Experience
![Page 12: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/12.jpg)
People Have Experiences
Checklists Don’t
![Page 13: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/13.jpg)
http://manwithnoblog.com/2010/05/20/kill-accessibility/
![Page 14: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/14.jpg)
PrinciplesThinking About Web Accessibility
![Page 15: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/15.jpg)
The Only One That Matters
People First
![Page 16: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/16.jpg)
AODA Principles
IndependenceDignityIntegrationEquality of opportunity
![Page 17: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/17.jpg)
W3C Principles
PerceivableOperableUnderstandableRobust
![Page 18: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/18.jpg)
StrategiesPlanning For Web Accessibility
![Page 19: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/19.jpg)
Plan for Accessibility……From the Beginning
![Page 20: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/20.jpg)
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.”
![Page 21: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/21.jpg)
Analysis
Design
BuildLaunch
Support
Website Lifecycle
![Page 22: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/22.jpg)
Support
![Page 23: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/23.jpg)
Analysis
Design
BuildLaunch
Support
Change Request Lifecycle
![Page 24: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/24.jpg)
Plan for Accessibility……at every step
![Page 25: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/25.jpg)
Accessibility is not an optionIt is completing a website
![Page 26: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/26.jpg)
Avoid Assumptions About Your Visitors
![Page 27: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/27.jpg)
Count on Text Provide Text Alternatives
![Page 28: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/28.jpg)
Don’t take control of your visitor’s experience
![Page 29: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/29.jpg)
Use Clear Language
![Page 30: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/30.jpg)
Be Usable, Searchable and Navigable
![Page 31: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/31.jpg)
Be Semantic
![Page 32: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/32.jpg)
Separate Content & Presentation
![Page 33: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/33.jpg)
Progressive Enhancement Is the new
Graceful Degredation
![Page 34: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/34.jpg)
Accessibility Testing
DesignFunctional
DemoFinal
![Page 35: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/35.jpg)
Design Testing
LayoutColour Contrast
Unpack Assumptions
![Page 36: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/36.jpg)
Functional Testing
Must work with a keyboard…EasilyLinear Flow
Assistive Technology is a Pre-Req
![Page 37: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/37.jpg)
Demo Testing
All Alt Text in PlaceTest with Screen Reader
Turn off CSS
![Page 38: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/38.jpg)
Final Testing
Real PeopleDifferent Needs
Assistive Technology
![Page 39: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/39.jpg)
Ethnographic TestingTest with Real People
![Page 40: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/40.jpg)
TacticsDoing Web Accessibility
![Page 41: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/41.jpg)
HTML
CSS
JS
Solve Problems Lower on the Web Stack
![Page 42: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/42.jpg)
Images, Forms & TablesOh My!
![Page 43: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/43.jpg)
Images
Forms
Tables
![Page 44: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/44.jpg)
People First
Separate Content & Presentation
Be Sematic
![Page 45: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/45.jpg)
Alt Tags
![Page 46: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/46.jpg)
The Meaning of Colour
![Page 47: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/47.jpg)
Give Forms Linear Flow
![Page 48: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/48.jpg)
Tables Aren’t Evil
![Page 49: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/49.jpg)
Tools:Jaws, NVDA, Fangs
Firefox WebDev ToolbarFirefox Accessibility Extension
![Page 50: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/50.jpg)
Services:http://wave.webaim.org/http://fae.cita.uiuc.edu/
http://www.contentquality.com/http://www.tawdis.net/ingles.html
![Page 51: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/51.jpg)
![Page 52: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/52.jpg)
![Page 53: Web accessibility 2010 v2](https://reader036.fdocuments.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/53.jpg)