An Overview Of Website Accessibility


Published on

The recording link, PowerPoint presentation and audio file can be found in the right column. Please post additional questions to the Web Building Forum.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

An Overview Of Website Accessibility

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