Basics of Website Accessibility - NTEN Webinar - Spring 2012
An Overview Of Website Accessibility
-
Upload
techsoup-global -
Category
Technology
-
view
237 -
download
0
description
Transcript of An Overview Of Website Accessibility
![Page 1: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/1.jpg)
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
![Page 2: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/2.jpg)
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
![Page 3: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/3.jpg)
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
![Page 4: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/4.jpg)
talks!
An Overview of Website AccessibilityPresenter: Jane Vincent, AMLS
Center for Accessible Technology
Sponsored by
![Page 5: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/5.jpg)
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
![Page 6: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/6.jpg)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Why Accessibility?
![Page 7: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/7.jpg)
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)
![Page 8: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/8.jpg)
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
![Page 9: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/9.jpg)
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
![Page 10: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/10.jpg)
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)
![Page 11: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/11.jpg)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
The Problems With Guidelines
![Page 12: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/12.jpg)
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:
![Page 13: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/13.jpg)
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>
![Page 14: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/14.jpg)
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):
![Page 15: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/15.jpg)
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:
![Page 16: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/16.jpg)
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>
![Page 17: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/17.jpg)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
CSS Example: Text Size (1)
![Page 18: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/18.jpg)
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;
![Page 19: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/19.jpg)
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
![Page 20: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/20.jpg)
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
![Page 21: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/21.jpg)
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?
![Page 22: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/22.jpg)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Accessibility and Popular CMSs
• Drupal
• WordPress
• Plone
• Joomla
![Page 23: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/23.jpg)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Accessibility and Sample Social Media
• Flickr
![Page 24: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/24.jpg)
An Overview of Website AccessibilityConference Call: 866-740-1260 Access Code: 6339392
Thanks!
Jane Vincent, AMLS
Usability/Accessibility Manager
Center for Accessible Technology
Berkeley, CA
www.cforat.org
![Page 25: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/25.jpg)
talks!
Questions?
Submit your questions using the chat box.
![Page 26: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/26.jpg)
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
![Page 27: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/27.jpg)
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
![Page 28: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/28.jpg)
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.
![Page 29: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/29.jpg)
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
![Page 30: An Overview Of Website Accessibility](https://reader036.fdocuments.net/reader036/viewer/2022062418/55574fa6d8b42a63448b4d8f/html5/thumbnails/30.jpg)
talks!
Thank you! Please complete the post event survey!
Kami Griffiths, [email protected], 415-633-9392