1. Rick Ells UW-IT Web Guy rells@uw.edu

2.  An interest group that advocates for inclusive Web design  A working group of the UW Web Council  You do not work for us  You can add yourself to the email list https://mailman2.u.washington.edu/mailman /listinfo/accessibleweb https://mailman2.u.washington.edu/mailman /listinfo/accessibleweb  Blog is at http://accesswebu.blogspot.com/http://accesswebu.blogspot.com/

3.  Be usable and intelligible to as many people as possible, including…  People not able to use a mouse  People not navigating by touch  Be interpretable by assistive technologies  Structured  Semantic  Standard

4.  Tools  Firefox Web Developer browser extension http://chrispederick.com/work/web- developer/help/ http://chrispederick.com/work/web- developer/help/  Firefox WCAG Contrast Checker https://addons.mozilla.org/en- US/firefox/addon/wcag-contrast-checker/ https://addons.mozilla.org/en- US/firefox/addon/wcag-contrast-checker/

5.  Are header elements being used semantically and are they organized hierarchically  Pseudo headers created with bolding and sizing will not be recognized as headers  Are tables being used for page layout?  Tables layout makes navigation much more complex  Can content be interpreted intelligibly without layout?

6. Text should be: Be accurate and equivalent Be succinct Not be redundant Not use phrases like “image of…” Example from http://webaim.org/techniques/alttext/

7. First name: Last name:

9. Semantic: New Technology Non-Semantic: New Technology

10.  Tables layout  Essential information in graphics without alt text  Content buried in scripts  Not using progressive enhancement methods  Content added after page load (Ajax)  ARIA roles needed to signal assistive technology which areas might receive updates

11.  DO-IT http://uw.edu/doit http://uw.edu/doit  Information Technology Accessibility http://uw.edu/accessibility/ http://uw.edu/accessibility/  Access Technology Center http://uw.edu/itconnect/accessibility/atl http://uw.edu/itconnect/accessibility/atl  WebInSight http://webinsight.cs.washington.edu/ http://webinsight.cs.washington.edu/  AccessComputing http://www.washington.edu/accesscomputing/ http://www.washington.edu/accesscomputing/

12.  AIM Research Group http://depts.washington.edu/aimgroup/ http://depts.washington.edu/aimgroup/  Project Access http://cognitivetech.washington.edu/ http://cognitivetech.washington.edu/  Enable http://enable.cs.washington.edu/index.php/Main_Page http://enable.cs.washington.edu/index.php/Main_Page  Center for Technology and Disability Studies http://uwctds.washington.edu/ http://uwctds.washington.edu/  Design, Use, Build (DUB) http://dub.washington.edu/ http://dub.washington.edu/

13.  W3C Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/ http://www.w3.org/TR/WCAG20/  Section 508 http://www.section508.gov/ http://www.section508.gov/  Section 508 Tutorial http://www.access-board.gov/sec508/software- tutorial.htm http://www.access-board.gov/sec508/software- tutorial.htm

14.  Personal  Community  Added value to our institution  Legal guidelines and requirements  Public relations  The baby-boomers are coming (and they have money)

15.  Are UW Web sites a “public accomodation” under the Americans with Disabilities Act?  Do Washington state guidelines apply? http://ofm.wa.gov/ocio/policies/documents/1 000g.pdf http://ofm.wa.gov/ocio/policies/documents/1 000g.pdf  Do you have a contractual agreement with students?  Do you have obligations to your funding sources?

16. Welcome to the Basics 201 class! 1. Login with your UW NetID 2. View a course page 3. Download a PDF article 4. Submit a question 5. Use an online Web tool 6. Watch a video

17. UW NetID Basics 201 Course Web Site Ideas.pdf Download PDF Ask a Professor Online Form Ask a Question Basics Online Forum Use Online Tool Great Basics of World History Watch a Video

18.  Goals – Why are we doing this?  Principles – How are we going to reach the goals?  Patterns - What we are going to do to solve specific problems that come up as we implement the principles? From Luke Wrobelski “Design Principles”, (http://www.lukew.com/ff/entry.asp?1292), which he derived from Service Oriented Architecture literaturehttp://www.lukew.com/ff/entry.asp?1292

19.  Inclusive  Effective  Efficient  Supportive

20. We will design our Web services so they are…  Perceivable  Operable  Understandable  Robust

21.  Adhere to standards  Use semantic elements  WCAG 2.0  Accessible Rich Internet Applications (ARIA)  ECMA Standard Scripting  Progressive enhancement methods in scripting

22. Most CMSs come out-of-the-box with good accessibility; don’t ruin it  Drupal Accessibility Group http://groups.drupal.org/accessibility http://groups.drupal.org/accessibility  Plone Accessibility http://plone.org/accessibility-info http://plone.org/accessibility-info  WordPress Accessibility http://codex.wordpress.org/Accessibilityhttp://codex.wordpress.org/Accessibility  Joomla Accessibility http://www.joomla.org/accessibility-statement.htmlhttp://www.joomla.org/accessibility-statement.html

23.  Apple Accessibility http://www.apple.com/accessibility/ http://www.apple.com/accessibility/  VoiceOver http://www.apple.com/accessibility/voiceover/http://www.apple.com/accessibility/voiceover/  Microsoft Accessibility http://www.microsoft.com/enable/ http://www.microsoft.com/enable/  Adobe Accessibility http://www.adobe.com/accessibility/ http://www.adobe.com/accessibility/

24.  Capable of excellent accessibility  Structured  Semantic  Roles  Validatable  HTML5 Accessibility http://html5accessibility.com/ http://html5accessibility.com/

25.  Rapid change  Mobile devices – smartphones to tablets – do it now, here, get immediate results  Web sites and apps need to work with wide range of sizes – smartphone, tablet, laptop, desktop  Pressure for simplification – Keep It Seriously Succinct

26.  Start with designing for the mobile device, then supplement the design for laptops and desktops  Priority of mobile is rising  Mobile forces you to focus  Mobile offers new capabilities (knows location, direction)  Mobile First – Luke Wroblewski http://www.lukew.com/ff/entry.asp?933 http://www.lukew.com/ff/entry.asp?933

27.  Web pages that themselves adapt to the capabilities of the device viewing them  Responsive Web Design – Ethan Marcotte http://www.alistapart.com/articles/responsive-web- design/http://www.alistapart.com/articles/responsive-web- design/  Examples  Sample Page – Robot or Not? http://responsivewebdesign.com/robot/http://responsivewebdesign.com/robot/  Responsive & Responsible – Scott Jehl http://filamentgroup.com/examples/bdconf- 2011/sjehl-bdconf-2011.pdfhttp://filamentgroup.com/examples/bdconf- 2011/sjehl-bdconf-2011.pdf

28.  Blogs  WebAxe – http://webaxe.blogspot.comhttp://webaxe.blogspot.com  Presentations  Top Mistakes in Web Accessibility – Wojtek Zajac http://www.slideshare.net/wojciechzajac/top-mistakes-in- web-accessibility http://www.slideshare.net/wojciechzajac/top-mistakes-in- web-accessibility  Facebook  Mike Paciello - http://www.facebook.com/mike.paciellohttp://www.facebook.com/mike.paciello  Reports  Digital Inclusion of People With Disabilities http://www.disabled- world.com/editorials/technology/digital-inclusion.php http://www.disabled- world.com/editorials/technology/digital-inclusion.php

29.  Sites  UW Information Technology Accessibility http://uw.edu/accessibility http://uw.edu/accessibility  Web Accessibility in Mind (WebAIM) http://webaim.org/http://webaim.org/  Accessible Technology Coalition http://atcoalition.org/http://atcoalition.org/  W3C Web Accessibility Initiative ▪ Web Accessibility Presentations and Tutorials http://www.w3.org/WAI/train.htmlhttp://www.w3.org/WAI/train.html ▪ WAI Guidelines and Techniques http://www.w3.org/WAI/guid-tech.htmlhttp://www.w3.org/WAI/guid-tech.html