An Overview Of Website Accessibility

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 Technology

Sponsored 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, AMLS

Usability/Accessibility Manager

Center for Accessible Technology

Berkeley, CA

[email protected]

www.cforat.org

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.


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