talks!
An Overview of Website Accessibility January 14, 2010Audio is only available by calling this number:Conference Call: 866-740-1260; Access Code: 6339392
Sponsored by
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Using ReadyTalk• Chat & raise hand • Mute = *6,
Unmute = *7• If you lose your
internet connection, reconnect using the link emailed to you.
• If you lose your phone connection, re-dial the phone number and re-join.
• ReadyTalk support: 800-843-9166
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
You are being recorded…• This seminar will be available on the TechSoup
website along with past webinar presentations:– www.techsoup.org/go/webinars
• You will receive a link to this presentation, material and links.
• After the webinar, you can ask follow-up questions in the Web Building Community Forum:– tinyurl.com/ya5otgy
• Twitter hashtags: #techsoup
talks!
An Overview of Website AccessibilityPresenter: Jane Vincent, AMLS
Center for Accessible TechnologySponsored by
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Today’s Speakers
Kami GriffithsTechSoup
Assisting with chat questions:Becky Wiegand, TechSoup
Jane VincentCenter for Accessible Technology
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Why Accessibility?
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Current Accessibility Guidelines: WCAG 2.0• Published in early 2009 by the
WorldWideWeb Consortium (W3C); supersedes and has significant differences from WCAG 1.0
• Intended to respond to new technologies as they develop
• Four principles: Perceivable, Operable, Understandable, Robust (POUR)
• Three compliance levels: A (26 criteria), AA (13), AAA (23)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Current Accessibility Guidelines: Section 508• Amended 1998; administered by the
Federal Access Board• Required compliance for federal agencies;
useful for other entities• Currently has 16 rules; forthcoming
revision will likely expand this to dovetail with WCAG
• All current 508 rules are covered under WCAG 2.0 at AA level compliance
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Current Accessibility Guidelines: International• Guidelines generally based on WCAG
1.0 or 508• May not have been updated after
WCAG 2.0
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Guideline Implementation
• Usually requires access to source code
• Often requires minimal code addition/modification
• Can be facilitated by use of templates and cascading style sheets (CSS)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
The Problems With Guidelines
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Simple Code Example: LANG Tag• Syntax:
<html…lang=“en” xml:lang=“en”…>
• Screen reader example with no LANG tag present:
• Screen reader example with LANG tag present:
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Attribute Example: Text equivalents (1)
• White House website: <IMG…ALT=“Photo of First Lady Michelle Obama”>
• Website reporting on an event: <IMG…ALT=“Michelle Obama smiles at Dmitri Belser’s joke”>
• Fashion website: <IMG…ALT=“Michelle Obama, June 2009” plus extended description>
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Attribute Example: Text Equivalents (2)• Always use a null ALT attribute (ALT=“”) for
invisible or purely decorative elements• Extended descriptions (80+ characters):
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Markup Example: Form Fields(1)
• Form read without markup:
• Form read with markup:
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Markup Example: Form Fields (2)Source code excerpt:
<label for="surname">Surname</label></b> <input id="surname" type="text" name="name1" size="40"> <b><label for="forename">Forename</label></b> <input id="forename" type="text" name="name2" size="40"> <fieldset> <legend><b>Title</b> </legend> <input id="Doctor" type="radio" name="Title" value="Doctor" /> <label for="Doctor">Dr</label> <input id="Mister" type="radio" name="Title" value="Mister" /><label for="Mister">Mr</label> <input id="Mrs" type="radio"
name="Title" value="Mrs" /><label for="Mrs">Mrs</label> <input id="Ms"type="radio" name="Title" value="Ms" /><label for="Ms">Ms</label> <input id="Miss" type="radio"
name="Title" value="Miss" /><label for "Miss">Miss</label> </fieldset> <b><label for="address">Postal Address</label></b> <textarea id="address" name="address" rows="5" cols="40" wrap="virtual"></textarea>
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
CSS Example: Text Size (1)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
CSS Example: Text Size (2)
• From Amazon’s style sheets: font-size: 14px; font-size: 10pt;
• From SF Gate’s style sheets: font-size: .86em; font-size: .78em;
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Automatic Accessibility Checkers• May provide a summary report,
expose problems, or both• Cannot check all issues• Cannot provide meaningful feedback
on all issues
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Only True Accessibility Test
• Have site tested by individuals with disabilities who do and do not use assistive technology:– Blind– Low vision– Physical disabilities– Learning disabilities– Elders
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Accessibility and Content Management Systems (CMSs)• Access to source code? • Access to style sheets?• Use of templates/skins?• Accessibility prompts/assistance
built-in?
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Accessibility and Popular CMSs
• Drupal• WordPress• Plone• Joomla
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Accessibility and Sample Social Media • Facebook
• Flickr
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Thanks!
Jane Vincent, AMLSUsability/Accessibility ManagerCenter for Accessible TechnologyBerkeley, CA [email protected]
talks!
Questions?Submit your questions using the chat box.
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Continue the Discussion…
• Additional questions can be answered by posting in the Web Building Community Forum:– tinyurl.com/ya5otgy
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Get the Most Out of TechSoup
• At TechSoup, you’ll find a range of technology services to help your nonprofit:
– Read helpful articles in our Learning Center– Request donated software, hardware, and
online services– Join our community forums to learn from
your colleagues– Browse upcoming events and conferences
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Upcoming Webinars
• Integrating Social Media into Your Website – Tuesday, January 19, 10 a.m.
• Avoid the Junk: How to Get Quality Used Computers – Thursday, January 28, 11 a.m.
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Thank you to our Webinar Sponsor!
ReadyTalk offers dedicated product demos for TechSoup organizations 4 times per week.
For more information: pages.readytalk.com/techsoup.html
talks!
Thank you! Please complete the post event survey!
Kami Griffiths, [email protected], 415-633-9392