View
498
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Library websites are about to become subject to new accessibility legislation. Is yours ready? If you have no idea where to begin, this webinar can help you to get a firm grasp on the basics of preventing legal violations. This presentation looks at what it takes, under the hood, to make a website meet accessibility standards. Web accessibility is about a lot more than just using an "alt" tag. This is more than an overview--we're going to be getting dirty with actual code. Please note: Attendees will need at least a basic understanding of HTML and/or XHTML to get the most from this session
Citation preview
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
http://www.meanlaura.com
http://www.slideshare.net/laurasolomon
Thank you!