1 / 29

Accessible Web Design Overview

Rick Ells UW-IT Web Guy rells@uw.edu. Accessible Web Design Overview. 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

oriole
Download Presentation

Accessible Web Design Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related