Transcript Accessible Web Design Overview

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