Accessible Web Design: Enhancing Inclusive Online Experiences

1. Rick EllsUW-IT Web Guy rells@uw.edu Accessible Web Design Overview

2. AccessibleWeb@U • 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 listhttps://mailman2.u.washington.edu/mailman/listinfo/accessibleweb • Blog is at http://accesswebu.blogspot.com/

3. The Goals of Accessible Web Design • 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. Quick Evaluation • Tools • Firefox Web Developer browser extensionhttp://chrispederick.com/work/web-developer/help/ • Firefox WCAG Contrast Checker https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/

5. QE: headers and layout • 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. QE: alternative text <imgsrc=“gw.jpg” alt=“George Washington”> • 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. QE: Labelling <form action="form_action.asp" method="get"> <label for="first">First name:</label> <input type="text" name="fname" id="first"/><br /> <label for="last">Last name:</label> <input type="text" name="lname" id="last" /><br /> <input type="submit" value="Submit" /> </form>

8. QE: colors

9. QE: semantic markup Semantic: New Technology <h2 style="font: medium bold verdana, sans-serif"> New Technology</h2> Non-Semantic: New Technology <div style="font: medium bold verdana, sans-serif"> New Technology</div>

10. QE: problem areas • 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. Accessibility at the UW • DO-IT http://uw.edu/doit • Information Technology Accessibilityhttp://uw.edu/accessibility/ • Access Technology Center http://uw.edu/itconnect/accessibility/atl • WebInSighthttp://webinsight.cs.washington.edu/ • AccessComputinghttp://www.washington.edu/accesscomputing/

12. Accessibility Research at the UW • AIM Research Group http://depts.washington.edu/aimgroup/ • Project Accesshttp://cognitivetech.washington.edu/ • Enablehttp://enable.cs.washington.edu/index.php/Main_Page • Center for Technology and Disability Studieshttp://uwctds.washington.edu/ • Design, Use, Build (DUB)http://dub.washington.edu/

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

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

15. The Legal Situation • 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/1000g.pdf • Do you have a contractual agreement with students? • Do you have obligations to your funding sources?

16. Walk the Path Welcome to the Basics 201 class! • Login with your UW NetID • View a course page • Download a PDF article • Submit a question • Use an online Web tool • Watch a video

17. Where Are the Obstacles? Course Web Site UW NetID Download PDF Ask a Question Basics 201 Ideas.pdf Ask aProfessorOnlineForm Watch a Video Great Basicsof World History Use Online Tool BasicsOnline Forum

18. Goals/Principles/Patterns • 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 literature

19. Goals • Inclusive • Effective • Efficient • Supportive

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

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

22. Content Management Systems Most CMSs come out-of-the-box with good accessibility; don’t ruin it • DrupalAccessibility Grouphttp://groups.drupal.org/accessibility • Plone Accessibilityhttp://plone.org/accessibility-info • WordPress Accessibilityhttp://codex.wordpress.org/Accessibility • Joomla Accessibilityhttp://www.joomla.org/accessibility-statement.html

23. Vendors Invest in Accessibility • Apple Accessibilityhttp://www.apple.com/accessibility/ • VoiceOverhttp://www.apple.com/accessibility/voiceover/ • Microsoft Accessibilityhttp://www.microsoft.com/enable/ • Adobe Accessibilityhttp://www.adobe.com/accessibility/

24. HTML5 • Capable of excellent accessibility • Structured • Semantic • Roles • Validatable • HTML5 Accessibilityhttp://html5accessibility.com/

25. Trends Going Forward • 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. Mobile First • 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 Wroblewskihttp://www.lukew.com/ff/entry.asp?933

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

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

29. Resources • Sites • UW Information Technology Accessibilityhttp://uw.edu/accessibility • Web Accessibility in Mind (WebAIM)http://webaim.org/ • Accessible Technology Coalitionhttp://atcoalition.org/ • W3C Web Accessibility Initiative • Web Accessibility Presentations and Tutorialshttp://www.w3.org/WAI/train.html • WAI Guidelines and Techniqueshttp://www.w3.org/WAI/guid-tech.html