Rick Ells UW-IT Web Guy

 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 list /listinfo/accessibleweb /listinfo/accessibleweb  Blog is at

 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

 Tools  Firefox Web Developer browser extension developer/help/ developer/help/  Firefox WCAG Contrast Checker US/firefox/addon/wcag-contrast-checker/ US/firefox/addon/wcag-contrast-checker/

 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?

Text should be: Be accurate and equivalent Be succinct Not be redundant Not use phrases like “image of…” Example from

First name: Last name:

Semantic: New Technology Non-Semantic: New Technology

 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

 DO-IT  Information Technology Accessibility  Access Technology Center  WebInSight  AccessComputing

 AIM Research Group  Project Access  Enable  Center for Technology and Disability Studies  Design, Use, Build (DUB)

 W3C Web Content Accessibility Guidelines (WCAG)  Section  Section 508 Tutorial tutorial.htm tutorial.htm

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

 Are UW Web sites a “public accomodation” under the Americans with Disabilities Act?  Do Washington state guidelines apply? 000g.pdf 000g.pdf  Do you have a contractual agreement with students?  Do you have obligations to your funding sources?

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

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

 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”, ( which he derived from Service Oriented Architecture literaturehttp://

 Inclusive  Effective  Efficient  Supportive

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

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

Most CMSs come out-of-the-box with good accessibility; don’t ruin it  Drupal Accessibility Group  Plone Accessibility  WordPress Accessibility  Joomla Accessibility

 Apple Accessibility  VoiceOver  Microsoft Accessibility  Adobe Accessibility

 Capable of excellent accessibility  Structured  Semantic  Roles  Validatable  HTML5 Accessibility

 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

 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

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

 Blogs  WebAxe –  Presentations  Top Mistakes in Web Accessibility – Wojtek Zajac web-accessibility web-accessibility  Facebook  Mike Paciello -  Reports  Digital Inclusion of People With Disabilities world.com/editorials/technology/digital-inclusion.php world.com/editorials/technology/digital-inclusion.php

 Sites  UW Information Technology Accessibility  Web Accessibility in Mind (WebAIM)  Accessible Technology Coalition  W3C Web Accessibility Initiative ▪ Web Accessibility Presentations and Tutorials ▪ WAI Guidelines and Techniques