Talks! An Overview of Website Accessibility January 14, 2010 Audio is only available by calling this number: Conference Call: 866-740-1260; Access Code:

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


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


Today’s Speakers

Kami GriffithsTechSoup

Assisting with chat questions:Becky Wiegand, TechSoup

Jane VincentCenter for Accessible Technology


Why Accessibility?


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)


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


Current Accessibility Guidelines: International• Guidelines generally based on WCAG

1.0 or 508• May not have been updated after

WCAG 2.0


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)


The Problems With Guidelines


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:


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>


Attribute Example: Text Equivalents (2)• Always use a null ALT attribute (ALT=“”) for

invisible or purely decorative elements• Extended descriptions (80+ characters):


Markup Example: Form Fields(1)

• Form read without markup:

• Form read with markup:


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>


CSS Example: Text Size (1)


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;


Automatic Accessibility Checkers• May provide a summary report,

expose problems, or both• Cannot check all issues• Cannot provide meaningful feedback

on all issues


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


Accessibility and Content Management Systems (CMSs)• Access to source code? • Access to style sheets?• Use of templates/skins?• Accessibility prompts/assistance

built-in?


Accessibility and Popular CMSs

• Drupal• WordPress• Plone• Joomla


Accessibility and Sample Social Media • Facebook

• Twitter

• Flickr


Thanks!

Jane Vincent, AMLSUsability/Accessibility ManagerCenter for Accessible TechnologyBerkeley, CA [email protected]

talks!

Questions?Submit your questions using the chat box.


Continue the Discussion…

• Additional questions can be answered by posting in the Web Building Community Forum:– tinyurl.com/ya5otgy


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


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.

https://cc.readytalk.com/r/lwo2vtb5i2uq

https://cc.readytalk.com/r/lwo2vtb5i2uq

https://cc.readytalk.com/r/iu8ax675qxvd

https://cc.readytalk.com/r/iu8ax675qxvd


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

Documents

Talks! An Overview of Website Accessibility January 14, 2010 Audio is only available by calling this number: Conference Call: 866-740-1260; Access Code: