Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Rick Ells UW-IT Web Guy [email protected] 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 Blog is at http://accesswebu.blogspot.com/ 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 http://chrispederick.com/work/webdeveloper/help/ Firefox WCAG Contrast Checker https://addons.mozilla.org/enUS/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? <img src=“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/ <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> 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> 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 http://uw.edu/doit Information Technology Accessibility http://uw.edu/accessibility/ Access Technology Center http://uw.edu/itconnect/accessibility/atl WebInSight http://webinsight.cs.washington.edu/ AccessComputing http://www.washington.edu/accesscomputing/ AIM Research Group http://depts.washington.edu/aimgroup/ Project Access http://cognitivetech.washington.edu/ Enable http://enable.cs.washington.edu/index.php/Main_Page Center for Technology and Disability Studies http://uwctds.washington.edu/ Design, Use, Build (DUB) http://dub.washington.edu/ W3C Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/ Section 508 http://www.section508.gov/ Section 508 Tutorial http://www.access-board.gov/sec508/softwaretutorial.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? 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? 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 Course Web Site Download PDF Basics 201 Ideas.pdf Ask a Question Watch a Video Great Basics of World History Use Online Tool Basics Online Forum Ask a Professor Online Form 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 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 http://groups.drupal.org/accessibility Plone Accessibility http://plone.org/accessibility-info WordPress Accessibility http://codex.wordpress.org/Accessibility Joomla Accessibility http://www.joomla.org/accessibility-statement.html Apple Accessibility http://www.apple.com/accessibility/ VoiceOver http://www.apple.com/accessibility/voiceover/ Microsoft Accessibility http://www.microsoft.com/enable/ Adobe Accessibility http://www.adobe.com/accessibility/ Capable of excellent accessibility Structured Semantic Roles Validatable HTML5 Accessibility http://html5accessibility.com/ 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 http://www.lukew.com/ff/entry.asp?933 Web pages that themselves adapt to the capabilities of the device viewing them Responsive Web Design – Ethan Marcotte http://www.alistapart.com/articles/responsive-webdesign/ Examples Sample Page – Robot or Not? http://responsivewebdesign.com/robot/ Responsive & Responsible – Scott Jehl http://filamentgroup.com/examples/bdconf2011/sjehl-bdconf-2011.pdf Blogs WebAxe – http://webaxe.blogspot.com Presentations Top Mistakes in Web Accessibility – Wojtek Zajac http://www.slideshare.net/wojciechzajac/top-mistakes-inweb-accessibility Facebook Mike Paciello - http://www.facebook.com/mike.paciello Reports Digital Inclusion of People With Disabilities http://www.disabledworld.com/editorials/technology/digital-inclusion.php Sites UW Information Technology Accessibility http://uw.edu/accessibility Web Accessibility in Mind (WebAIM) http://webaim.org/ Accessible Technology Coalition http://atcoalition.org/ W3C Web Accessibility Initiative ▪ Web Accessibility Presentations and Tutorials http://www.w3.org/WAI/train.html ▪ WAI Guidelines and Techniques http://www.w3.org/WAI/guid-tech.html