is your website ada-compliant?
Post on 22-Jun-2015
500 Views
Preview:
DESCRIPTION
TRANSCRIPT
Is your website ADA-compliant?
Laura Solomon
Library Services Manager
OPLIN
DISCLAIMERS
•IANAL
•The law isn’t clear
•I’m primarily a code geek here
•I can’t cover it all
•I’m not perfect, either
Wht we’ll cover:
• Why web accessibility?
• Current accessibility guidelines
• Online validators• Getting into the guts of Section
508 (**CODE WARNING**)
Accessibility versus usability
BONUS!
What are the standards?
• WCAG 2 (W3C/WAI)
• Section 508
WCAG 2.0
• A (26 criteria)
• AA (23 criteria)
• AAA (23 criteria)
• More info? http://www.w3.org/WAI/intro/wcag
4 principles of WCAG 2.0
• Perceivable
• Operable
• Understandable
• Robustness
Problems with standards
Online validators
• Cynthia Says (http://www.cynthiasays.com)
• AChecker (http://achecker.ca/checker/index.php )
Need more? Complete list of web accessibility validation tools, maintained by WAI:
http://www.w3.org/WAI/RC/tools/complete
“Only true accesibility test”
• Elderly
• Learning disabilities
• Physical disabilities
• Low vision
• Blind
Diving into the
code
Stop using these:• Flash• Frames• <blink> or
<marquee> tags
• AJAX menus• Tables for
layout
Use with extreme caution:
• Iframes• Drop-down
menus• Image maps• Video/multimedia• Javascript
Make sure your code validates!
Photo credit: Sebastian Bergmann
Use the <lang> attribute
• Syntax:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang=“en"
xml:lang=“en">
•Without:
http://www.meanlaura.com/soundfiles/cnn_menu.mp3
With:
http://www.meanlaura.com/soundfiles/lowes_menu.mp3
Alternative text
GOOD:<img
scr=“http://www.oplin.org/panda.jpg” alt=“Panda bear relaxing on a large rock” />
BAD:<img
scr=“http://www.oplin.org/panda.jpg” alt=“Panda” />
What is longdesc?
<img src="graph.gif" longdesc="graph.html" ALT="3D pie chart of funding statistics">
Meaningful images
Photo from Westville Public Library, NJ (https://secure.flickr.com/photos/njla/4015734912/sizes/z/in/photostream/ )
Alt vs. title
Fixed vs. proportional fonts
• BAD:– Font-size: 12px;– Font-size: 12pt;
• GOOD:– Font-size: 1.3em;– Font-size: .78em;
Use header tags correctly
BAD:
<h2>This is a Level-2 Header</h2> <h3>This is a Level-3 Header</h3>
GOOD:
<h1>This is a Level-1 Header</h1>
<h2>This is a Level-2 Header</h2>
Forms
Form picture & following 2 examples from the Veterans Health Administration http://www.webjunction.org/accessibility/-/articles/content/98661533
Form labels• Bad Checkboxes:
• <LABEL>Please rate your experience with our services</label>
• <P>• <INPUT id=good type=checkbox
value=good name=good><br>• Good • <INPUT id=excellent
type=checkbox value=excellent name=excellent>
• <br>Excellent!• <INPUT id=spectacular
type=checkbox value=spectacular name=spectacular>
• Spectacular!
• Good Checkboxes:
• <legend>Please rate your experience
• with our services</legend> • <P>• <INPUT id=good type=checkbox
value=good name=good><LABEL for=good>good</label>
• <INPUT id=excellent type=checkbox value=excellent name=excellent><LABEL for=excellent>Excellent</LABEL>
• <INPUT id=spectacular type=checkbox value=spectacular name=spectacular><label for=spectacular>Spectacular</label>
Text input fields
Bad text input:
Full Name<BR><INPUT name=first> <INPUT maxLength=1 size=1
name=MI> <INPUT id=last size=25
name=last>
Good text input:
Full Name<br /><label>for=“first“>First</label><input name=“first“ id=“first“ > <label for=MI">M.I.</label><input maxlength=“1“ size=“1“
name=“MI“ id=“MI“> <label for=“last“>Last</label><input id=“last“ size=“25“
name=“last“>
Tab index
Example from http://webdesign.about.com/od/examples/l/bl_aa071105.htm
Meaningful link text
“Click here”
versus
“More bestsellers”
Duplicate link text
Tables
BAD table markup:
<table>
<tr>
<td><strong>Fruit</strong></td>
<td><strong>Vegetables</strong></td>
<tr>
<td>Bananas</td>
<td>Celery</td>
</tr>
<tr>
<td>Apples</td>
<td>Lettuce</td>
</tr>
</table>
GOOD table markup:
<table summary=“Fruits & vegetables table”>
<tbody>
<tr>
<th>Fruit</th>
<th><Vegetables</th>
<tr>
<td>Bananas</td>
<td>Celery</td>
</tr>
<tr>
<td>Apples</td>
<td>Lettuce</td>
</tr>
</tbody>
</table>
Fruit Vegetables
Bananas Celery
Apples Lettuce
PDFs need a link to Adobe Reader
Use of color
•Can’t be the only indicator of meaning
Some notes about NVDA
• Download: http://www.nvda-project.org/
• Use it in Firefox
• It takes a lot of time to get familiar with it!
• The page may not scroll while the reader is reading
• Getting started guide: http://webaim.org/articles/nvda/
Resources• Official Section 508 website:
http://www.section508.gov/• Website Accessibility Under Title II of the ADA
(from the DoJ) http://www.ada.gov/pcatoolkit/chap5toolkit.htm
• Writing great alt text http://webdesign.about.com/od/accessibility/a/great_alt_text.htm
• “Web accessibility no longer an afterthought”—CNN, 2009 http://www.cnn.com/2009/TECH/12/15/cnet.web.accessibility/index.html
http://www.twitter.com/laurasolomon
http://www.facebook.com/laurasolomon
http://www.linkedin.com/in/laurasolomon
laura@designforthelittleguy.com
http://www.meanlaura.com
http://www.slideshare.net/laurasolomon
Thank you!
top related