Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Trinity of Inclusive Web Development

3,672 views

Published on

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.

Published in: Technology, Business
  • Be the first to comment

The Trinity of Inclusive Web Development

  1. 1. SEO, mobile web & accessibility: Trinity of Inclusive Web Development CSUN 2012 San Diego - March 2nd, 20122012. AccessibilitéWebToll Free: 1 (877) 315-5550 /1
  2. 2. Some Rights Reserved ttribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /2
  3. 3. Speaker enis Boudreau 11+ yrs experience - Web Accessibility Chairman, AccessibilitéWeb @dboudreau Co-editor, SGQRI 008 standards Invited Expert, W3C2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /3
  4. 4. Accessibility: A Tough Sell? aking accessibility happen hat was your experience? hat were the challenges?2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /4
  5. 5. Times, They Are A-Changin’ eviewing the a11y game plan ooking back at all we’ve accomplished ecognizing some practices as “sexier” f you can’t beat them, join them!2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /5
  6. 6. A Few Positive Signs...2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /6
  7. 7. At long last, #perfectA11y2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /7
  8. 8. A11y: Have We Lost Our Way? (Keep it Simple and Smart) oing back to basics... hat is the intent of web accessibility? orget obligations: aim for results!HOW ABOUT:Keeping Information Semantically Structured? ow does one eat an elephant?2012. AccessibilitéWebToll Free: 1 (877) 315-5550 /8
  9. 9. Headed Towards Inclusion rogressively... ragmatically... ealistically... BUILDING a11y, ONE STEP AT A TIME Accessibility 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 /9
  10. 10. Trinity of Inclusive Web Development ethinking the web development strategy nalysis of SEO / Mobile Web practices rawing a parallel between practices elling accessibility, indirectly ustifying efforts, differently2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 10
  11. 11. My Own Personal 80/20 a11y Rule ost recurrent a11y problems encountered ocussing on the basics! ü Text Equivalents ü Keyboard Navigation ü Content Structure ü Forms Associations ü Color Contrasts ü Significant Hyperlinks ü Document Language ü Screen Reader Compatibility2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 11
  12. 12. Because What It Comes Down To Is...2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 12
  13. 13. ...Nothing Less Than Changing The World HOW CAN WE TURN THIS AROUND?2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 13
  14. 14. Accessibility and the Mobile Web obile web best practices 1.0 0 practices declined in 5 themes • Overall Behavior • Navigation and Links • Page Layout and Content • Page Definition Resources • User Input Mobile Web Best Practices 1.0 - Basic Guidelines http://www.w3.org/TR/mobile-bp/ From WCAG 2.0 to MWBP (W3C Note) http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 14
  15. 15. From WCAG 2.0 to MWBP 1.0 ridging WCAG 2.0 and MWBP 1.0 irectly related to WCAG 2.0 MWBP Elements Criteria Level WCAG Criteria lus 17 other Non-text alts criteria (AA and AAA) 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 Purpose2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 15
  16. 16. Common Barriers ridging WCAG 2.0 and MWBP 1.0 xamples of barriers in user exp. rouped under the WCAG principles nother WCAG/MWBP mapping Resource Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities http://www.w3.org/WAI/mobile/experiences2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 16
  17. 17. Accessibility and SEO Best Practices earch engines, including Google... nly understand text ever rely on external devices ely on the content structure ove section headings islike automatic refreshes njoy efficient navigation mechanisms2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 17
  18. 18. SEO And Text Equivalents o salvation beyond text content 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 Audio Description or Media 1.2.3 A Alternative (Prerecorded) 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 AAA2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 18
  19. 19. SEO And Keyboard Navigation o navigationCriteria Details the mouse Criteria WCAG beyond 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 AAA2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 19
  20. 20. SEO And Content Structure eadings:WCAG Criteriaintegrated GPS Criteria HTML’s 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 AAA2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 20
  21. 21. SEO, Refreshes And Delays nfinite loopsCriteria Details Criteria WCAG and barriers to infos Level 2.2.1 Timing Adjustable A 2.2.1 Pause, Stop, Hide A 2.2.3 Additional Criterion AAA2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 21
  22. 22. SEO And Efficient Navigation emantics: allCriteria Details CriteriaWCAG about making senseLevel 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 AAA2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 22
  23. 23. SEO And Significant Hyperlinks lick (w)Here!? Details Criteria WCAG Criteria Level 2.4.4 Link Purpose (in context) A 2.4.9 Additional Criterion AAA2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 23
  24. 24. Overview – Setting An A11y Baseline winning combination on many levels Criteria to consider WCAG MWBP SEO Text Equivalents ✔ ✔ ✔ Keyboard Navigation ✔ ✔ ✔ Content Structure ✔ ✔ ✔ Significant Hyperlinks ✔ ✔ ✔ Refreshes and Delays ✔ - ✔ Efficient Navigation ✔ - ✔ Sufficient Color Contrasts ✔ ✔ - Forms Associations ✔ ✔ - Resource SEO and Accessibility Overlap http://www.communis.co.uk/blog/2009-08-06-seo-and-accessibility-overlap2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 24
  25. 25. Bringing Down Barriers, One at a Time2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 25
  26. 26. Beyond Best Practices, "Web Quality" 11y within a global quality process ecognize the progressive aspect of a11y ive up on the desire to do everything at once ivide work among the various stakeholders rioritize every team members action items2012. AccessibilitéWebToll Free: 1 (877) 315-5550 dapt the production lifecycle to the gameplan / 26
  27. 27. Finding Your WAI (way) he W3C provides a lot of resources resentations you can copy efore and After demo you can use Resource case resources usiness Finding Your WAI (way) to New Accessibility Resources http://www.w3.org/WAI/yourWAI.html oming across inaccessible websites nd much more!2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 27
  28. 28. And Above All... Keep spreading the word. Be that change.2012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 28
  29. 29. Thank You! enis Boudreau, Spkr8 - Comments, suggestions? resident http://spkr8.com/t/9309 lideshare.net – present yourself! oopérative AccessibilitéWeb 751 Richardson street, suite 6111 ontreal (Quebec), Canada H3K 1G6 oll Free: +1 (877) 315-55502012. AccessibilitéWebToll Free: 1 (877) 315-5550 / 29 mail: dboudreau@accessibiliteweb.com

×