the trinity of inclusive web development
DESCRIPTION
Promote accessibility and reach more users by making Search Engine Optimization (SEO), Mobile Web Best Practices (MWBP), and Web Content Accessibility Guidelines (WCAG) work together.TRANSCRIPT
![Page 1: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/1.jpg)
SEO, mobile web & accessibility:
Trinity of Inclusive Web Development
CSUN 2012San Diego - March 2nd, 2012
/ 12012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 2: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/2.jpg)
Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada
/ 2
Some Rights Reserved
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 3: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/3.jpg)
Speaker
Denis Boudreau
11+ yrs experience - Web Accessibility
Chairman, AccessibilitéWeb
Co-editor, SGQRI 008 standards
Invited Expert, W3C
/ 32012. AccessibilitéWebToll Free: 1 (877) 315-5550
@dboudreau
![Page 4: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/4.jpg)
Accessibility: A Tough Sell?
/ 4
Making accessibility happen
What was your experience?
What were the challenges?
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 5: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/5.jpg)
Times, They Are A-Changin’
/ 5
Reviewing the a11y game plan
Looking back at all we’ve accomplished
Recognizing some practices as “sexier”
If you can’t beat them, join them!
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 6: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/6.jpg)
A Few Positive Signs...
/ 62012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 7: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/7.jpg)
At long last, #perfectA11y
/ 72012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 8: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/8.jpg)
A11y: Have We Lost Our Way?(Keep it Simple and Smart)
/ 8
Going back to basics...
What is the intent of web accessibility?
Forget obligations: aim for results!
How does one eat an elephant?
HOW ABOUT:
Keeping Information Semantically Structured?
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 9: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/9.jpg)
Headed Towards Inclusion
/ 9
Progressively...
Pragmatically...
Realistically...
BUILDING a11y, ONE STEP AT A TIMEAccessibility should not be about what legislators want. It should be about
embodying inclusion and meeting the adaptation needs of real people.
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 10: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/10.jpg)
Trinity of Inclusive Web Development
Rethinking the web development strategy
Analysis of SEO / Mobile Web practices
Drawing a parallel between practices
Selling accessibility, indirectly
Justifying efforts, differently
/ 102012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 11: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/11.jpg)
My Own Personal 80/20 a11y Rule
Most recurrent a11y problems encountered
Focussing on the basics!
1. Text Equivalents2. Keyboard Navigation3. Content Structure4. Forms Associations5. Color Contrasts6. Significant Hyperlinks7. Document Language8. Screen Reader Compatibility
/ 112012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 12: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/12.jpg)
Because What It Comes Down To Is...
/ 122012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 13: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/13.jpg)
...Nothing Less Than Changing The World
/ 13
HOW CAN WE TURN THIS AROUND?
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 14: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/14.jpg)
Accessibility and the Mobile Web
Mobile web best practices 1.0
60 practices declined in 5 themes• Overall Behavior• Navigation and Links• Page Layout and Content• Page Definition• User Input
/ 14
ResourcesMobile Web Best Practices 1.0 - Basic Guidelineshttp://www.w3.org/TR/mobile-bp/From WCAG 2.0 to MWBP (W3C Note)http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 15: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/15.jpg)
From WCAG 2.0 to MWBP 1.0
Bridging WCAG 2.0 and MWBP 1.0
Directly related to WCAG 2.0
Plus 17 other criteria (AA and AAA)
/ 15
MWBP Elements Criteria Level WCAG Criteria
Non-text alts 1.1.1. A Non-text Content
Fonts 1.3.1 A Info and Relations
Style Sheets Use 1.3.1 A Info and Relations
Use of Color 1.4.1 A Use of Color
Tab Order 2.4.3 A Focus Order
Auto-Refresh 3.2.5 AAA Change on Request
Link Target ID 2.4.9 AAA Link Purpose
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 16: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/16.jpg)
Common Barriers
Bridging WCAG 2.0 and MWBP 1.0
Examples of barriers in user exp.
Grouped under the WCAG principles
Another WCAG/MWBP mapping
/ 16
ResourceShared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilitieshttp://www.w3.org/WAI/mobile/experiences
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 17: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/17.jpg)
Accessibility and SEO Best Practices
Search engines, including Google...
Only understand text
Never rely on external devices
Rely on the content structure
Love section headings
Dislike automatic refreshes
Enjoy efficient navigation mechanisms
Depend on significant hyperlinks
Again, some interesting parallels between specific SEO best practices and WCAG 2.0 success criteria!
/ 172012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 18: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/18.jpg)
SEO And Text Equivalents
No salvation beyond text content
/ 18
Criteria WCAG Criteria Details Level
1.1.1 Non-Text Content A
1.2.1 Audio or Video Content Only A
1.2.2 Captions (prerecorded) A
1.2.3 Audio Description or Media Alternative (Prerecorded) A
1.2.4 Captions (live) AA
1.2.5 Audio Description (prerecorded) AA
1.4.5 Images of Text AA
1.2.6 to 1.2.9 Additional Criteria AAA
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 19: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/19.jpg)
SEO And Keyboard Navigation
No navigation beyond the mouse
/ 19
Criteria WCAG Criteria Details Level
2.1.1 Keyboard A
2.1.1 No Keyboard Traps A
2.4.3 Focus Order A
2.4.7 Focus Visible AA
2.1.3 Additional Criterion AAA
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 20: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/20.jpg)
SEO And Content Structure
Headings: HTML’s integrated GPS
/ 20
Criteria WCAG Criteria Details Level
1.3.1 Info and Relationships A
2.4.2 Page Titled A
2.4.6 Headings and Labels AA
2.4.10 Additional Criterion AAA
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 21: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/21.jpg)
SEO, Refreshes And Delays
Infinite loops and barriers to infos
/ 21
Criteria WCAG Criteria Details Level
2.2.1 Timing Adjustable A
2.2.1 Pause, Stop, Hide A
2.2.3 Additional Criterion AAA
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 22: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/22.jpg)
SEO And Efficient Navigation
Semantics: all about making sense
/ 22
Criteria WCAG Criteria Details Level
2.4.1 Bypass Blocks A
2.4.2 Page Titled A
2.4.3 Focus Order A
2.4.4 Link Purpose (in context) A
2.4.5 Multiple Ways AA
2.4.6 Headings and Labels AA
2.4.7 Focus Visible AA
2.4.8 Additional Criterion AAA
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 23: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/23.jpg)
SEO And Significant Hyperlinks
Click (w)Here!?
/ 23
Criteria WCAG Criteria Details Level
2.4.4 Link Purpose (in context) A
2.4.9 Additional Criterion AAA
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 24: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/24.jpg)
Overview – Setting An A11y Baseline
A winning combination on many levels
/ 24
Criteria to consider WCAG MWBP SEO
Text Equivalents ✔ ✔ ✔
Keyboard Navigation ✔ ✔ ✔
Content Structure ✔ ✔ ✔
Significant Hyperlinks ✔ ✔ ✔
Refreshes and Delays ✔ - ✔
Efficient Navigation ✔ - ✔
Sufficient Color Contrasts ✔ ✔ -
Forms Associations ✔ ✔ -
ResourceSEO and Accessibility Overlaphttp://www.communis.co.uk/blog/2009-08-06-seo-and-accessibility-overlap
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 25: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/25.jpg)
Bringing Down Barriers, One at a Time
/ 252012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 26: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/26.jpg)
Beyond Best Practices, "Web Quality"
/ 26
a11y within a global quality process
1.Recognize the progressive aspect of a11y
2.Give up on the desire to do everything at once
3.Divide work among the various stakeholders
4.Prioritize every team member's action items
5.Adapt the production lifecycle to the gameplan
6.Provide "real means" to achieve set goals
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 27: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/27.jpg)
Finding Your WAI (way)
The W3C provides a lot of resources
Presentations you can copy
Before and After demo you can use
Business case resources
Coming across inaccessible websites
And much more!
LOTS OF GOOD STUFF!
/ 27
ResourceFinding Your WAI (way) to New Accessibility Resourceshttp://www.w3.org/WAI/yourWAI.html
2012. AccessibilitéWebToll Free: 1 (877) 315-5550
![Page 28: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/28.jpg)
And Above All...
/ 282012. AccessibilitéWebToll Free: 1 (877) 315-5550
Keep spreading the word. Be that change.
![Page 29: The Trinity of Inclusive Web Development](https://reader035.vdocument.in/reader035/viewer/2022062701/55420e44b4c905454b8b45c8/html5/thumbnails/29.jpg)
Thank You!
Denis Boudreau,President
Coopérative AccessibilitéWeb
1751 Richardson street, suite 6111
Montreal (Quebec), Canada H3K 1G6
Toll Free: +1 (877) 315-5550
Email: [email protected]
Web: www.accessibiliteweb.com
Blog: www.accessiblogue.com
Twitter : @AccessibiliteWb / @dboudreau
/ 292012. AccessibilitéWebToll Free: 1 (877) 315-5550
Spkr8 - Comments, suggestions? http://spkr8.com/t/9309
Slideshare.net – present yourself!http://is.gd/X28Lgd