Rick Ells UW-IT Web Guy rells@uw.edu

pogonotomygobbleAI and Robotics

Nov 15, 2013 (3 years and 11 months ago)

98 views

Rick Ells

UW
-
IT Web Guy

rells@uw.edu


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/web
-
developer/help/


Firefox WCAG Contrast Checker

https://addons.mozilla.org/en
-
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?

<
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/software
-
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?

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

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”,
(
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


K
eep
I
t
S
eriously
S
uccinct



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
-
web
-
design/


Examples


Sample Page


Robot or Not?


http://responsivewebdesign.com/robot/


Responsive & Responsible


Scott
Jehl


http://filamentgroup.com/examples/bdconf
-
2011/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
-
in
-
web
-
accessibility


Facebook


Mike
Paciello

-

http://www.facebook.com/mike.paciello


Reports


Digital Inclusion of People With Disabilities

http://www.disabled
-
world.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