web accessibility 2010 v2
DESCRIPTION
Okay folks, I think we'll get started. Web Accessibility: Principles, Strategies & Tactics. Sean Yo, BA & MA with a focus on digital media. Despite his youthful facade, he's been at the university twenty years. Works at subunit of web solutions, for many departments on campus. Has presented many times on accessibility. I give you Mr. Sean Yo. 10:02 AM Sean: I started my undergrad in 1994, I'll leave the arithmetic as an exercise for the audience. Thank you, welcome. Last year I presented "Real World Accessibility" where myself and Rob Geddes presented a case study on some sites we'd launched with our Web Solutions team. Was gratifying to receive the response, but also seemed that our expectations weren't quite as far behind as we thought. Had a lot of people asking us questions we thought we be assumed. 10:03 AM We wanted to step back, practice what we preach, start off with fundamentals and not make so many assumptions. I'm a web analyst with a group on campus called Web Solutions, part of Computing & Communications Services. I'm an accessibility advocate - I chose that word, because it's not "expert". I think it's a challenge to lay down the gauntlet to be an expert. 10:04 AM Before we get into it, I want to go over some fundamentals. Anyone here seen this abbreviation: A11Y, people who have drank beer with me don't get to answer. Randy... Randy: I've seen it, yes. Sean: That's awesome. A11Y stands for accessibility. Anyone know why? Number of characters. Me trying to use this abbreviation more. Good on Twitter. 10:05 AM So to make sure we're on the same page, what is web accessibility? I like the Wikipedia definition, though it's a week and a half old. "the practice of making websites usable by people of all abilities and disabilities. All users can have equal access to information and functionality". Very strong, lots to work with, clearly centered on people. 10:06 AM When we talk about disabilities, four categories: visual, hearing, motor and cognitive. Visual: blindness or low vision, contrast, colourblindness. Hearing: low hearing or deafness. Motor: physical issues, limited or fine motor control. Cognitive: learning disabilities, distractability, focus. Have to think about why are we doing this? I think our keynote speaker gave us some great information or ideas about why it's important. 10:07 AM Following all coding best practices, XHTML/CSS, readable whitespace in your code. Pride in craft, but the purpose of a website is to communicate. Ignore accessibility and you're not communicating with a wide audience. Pay attention to website, better for everyone. 10:08 AM Built environment: ramps are accessibility feature, but useful to anyone. Not going to spend a lot of time on the rationale, I'm going to assume most of us at an accessibility conference see the value. If you need more information, here are a couple of links and a high-level overview of the key points. Most important one is the first one, it's the right thing to do. Other two: saving resources and Google will love you. These slides will be up within minutes of the presentation, so don't worry about copious notes. 10:09 AM So something before I get into the presentation, finish up with a small shift in my thinking lately. Last couple of years, if you read web design blogs and sites, you've noticed there's a new terms; UX for user experience. Usability, more people-centric, tied into specific experience. I like it, moves away from lab tests and checklists. Focus design on people. I've stopped talking about accessibility, trying to talk more about accessibility experience. It helps remind us and keeps us anchored on people. If there's one thing you take away today, accessibility is all about people. 10:10 AM People have experiences, checklists don't. Not to say they aren't useful, I use them in accessibility testing and in my life. But they can give you false positive reTRANSCRIPT
![Page 1: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/2.jpg)
Web Analyst
Accessibility Advocate
![Page 3: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/3.jpg)
IntroductionFundamentals of Web Accessibility
![Page 4: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/4.jpg)
Pop Quiz:
What is A11y?
![Page 5: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/5.jpg)
What is Web Accessibility?
![Page 6: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/7.jpg)
VisualHearingMotor
Cognitive
![Page 8: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/8.jpg)
Why Web Accessibility?
![Page 9: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/10.jpg)
User Experience
![Page 11: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/11.jpg)
Accessibility Experience
![Page 12: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/12.jpg)
People Have Experiences
Checklists Don’t
![Page 13: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/14.jpg)
PrinciplesThinking About Web Accessibility
![Page 15: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/15.jpg)
The Only One That Matters
People First
![Page 16: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/16.jpg)
AODA Principles
IndependenceDignityIntegrationEquality of opportunity
![Page 17: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/17.jpg)
W3C Principles
PerceivableOperableUnderstandableRobust
![Page 18: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/18.jpg)
StrategiesPlanning For Web Accessibility
![Page 19: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/19.jpg)
Plan for Accessibility……From the Beginning
![Page 20: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/21.jpg)
Analysis
Design
BuildLaunch
Support
Website Lifecycle
![Page 22: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/22.jpg)
Support
![Page 23: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/23.jpg)
Analysis
Design
BuildLaunch
Support
Change Request Lifecycle
![Page 24: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/24.jpg)
Plan for Accessibility……at every step
![Page 25: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/26.jpg)
Avoid Assumptions About Your Visitors
![Page 27: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/27.jpg)
Count on Text Provide Text Alternatives
![Page 28: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/29.jpg)
Use Clear Language
![Page 30: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/30.jpg)
Be Usable, Searchable and Navigable
![Page 31: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/31.jpg)
Be Semantic
![Page 32: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/32.jpg)
Separate Content & Presentation
![Page 33: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/33.jpg)
Progressive Enhancement Is the new
Graceful Degredation
![Page 34: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/34.jpg)
Accessibility Testing
DesignFunctional
DemoFinal
![Page 35: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/35.jpg)
Design Testing
LayoutColour Contrast
Unpack Assumptions
![Page 36: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/38.jpg)
Final Testing
Real PeopleDifferent Needs
Assistive Technology
![Page 39: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/39.jpg)
Ethnographic TestingTest with Real People
![Page 40: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/40.jpg)
TacticsDoing Web Accessibility
![Page 41: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/42.jpg)
Images, Forms & TablesOh My!
![Page 43: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/43.jpg)
Images
Forms
Tables
![Page 44: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/44.jpg)
People First
Separate Content & Presentation
Be Sematic
![Page 45: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/45.jpg)
Alt Tags
![Page 46: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/46.jpg)
The Meaning of Colour
![Page 47: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/47.jpg)
Give Forms Linear Flow
![Page 48: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/48.jpg)
Tables Aren’t Evil
![Page 49: Web accessibility 2010 v2](https://reader036.vdocument.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.vdocument.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.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/51.jpg)
![Page 52: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/52.jpg)
![Page 53: Web accessibility 2010 v2](https://reader036.vdocument.in/reader036/viewer/2022062617/54ba01bc4a795932218b468f/html5/thumbnails/53.jpg)