#open web camp Dennis Lembree WebOverhauls.com September 26, 2009 Stanford University; Palo Alto, CA This presentation is ...
Agenda <ul><li>Summary </li></ul><ul><li>Issues with Twitter.com </li></ul><ul><ul><li>Keyboard access </li></ul></ul><ul>...
Summary <ul><li>AccessibleTwitter.com provides a web-accessible and standards-compliant version of the Twitter web site, a...
www.AccessibleTwitter.com
Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>Some core functionality is ...
Keyboard Accessible <ul><li>Keyboard cannot access Favorite, Reply, and Delete links. </li></ul><ul><li>ALL links are keyb...
?
Use of Headings <ul><li>Poor use of headings </li></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Can yo...
Use of Headings <ul><li>Ideal use of headings </li></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Can y...
JavaScript <ul><li>Twitter.com requires JavaScript.  Without it, the user is unable to: </li></ul><ul><ul><li>Favorite a t...
 
JavaScript <ul><li>Accessible Twitter is fully functional without JavaScript. </li></ul><ul><ul><li>Progress Enhancement i...
Other issues with Twitter.com that Accessible Twitter addresses <ul><li>Code doesn't validate. </li></ul><ul><li>Code coul...
 
Other issues with Twitter.com that Accessible Twitter addresses <ul><li>Sidebar navigation is inconsistent.  </li></ul><ul...
Other Benefits of Web Accessibility & Web Standards <ul><li>More  usable . </li></ul><ul><li>Works in  text-only  user-age...
Quotes from Users <ul><li>“ You can easily navigate by several methods; skip links, form fields, headings. Very effective ...
Quotes from Users <ul><li>“… seems to work nicely in Lynx. Main Twitter won't let me login and mobile site won't show foll...
Quotes from Users <ul><li>Read more: http:// accessibletwitter.com/articles.php </li></ul>
Future Enhancements <ul><li>Always evolving. </li></ul><ul><li>Many enhancements and features are planned including: </li>...
Attend the Session <ul><li>“ Twitter & Web Accessibility” presented by Dennis Lembree. </li></ul><ul><li>12th Annual  Acce...
Web Accessibility Podcast & Blog <ul><li>The author of Accessible Twitter is also the founder of Web Axe, a podcast and bl...
Contact Details <ul><li>Dennis Lembree </li></ul><ul><ul><li>Owner/Author </li></ul></ul><ul><ul><li>www.DennisLembree.com...
Upcoming SlideShare
Loading in...5
×

Accessible Twitter at Open Web Camp

2,241

Published on

Presentation given by Dennis Lembree at Open Web Camp event at Stanford University on Sept 26, 2009.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,241
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Accessible Twitter at Open Web Camp"

  1. 1. #open web camp Dennis Lembree WebOverhauls.com September 26, 2009 Stanford University; Palo Alto, CA This presentation is on: http://SlideShare.net/WebAxe/
  2. 2. Agenda <ul><li>Summary </li></ul><ul><li>Issues with Twitter.com </li></ul><ul><ul><li>Keyboard access </li></ul></ul><ul><ul><li>Heading usage </li></ul></ul><ul><ul><li>JavaScript requirements </li></ul></ul><ul><ul><li>Other Issues </li></ul></ul><ul><li>Other Benefits of Web Accessibility & Web Standards </li></ul><ul><li>Quotes from Users </li></ul><ul><li>Future Enhancements </li></ul><ul><li>Attend the Session </li></ul><ul><li>Podcast & Blog </li></ul><ul><li>Contact Details </li></ul>
  3. 3. Summary <ul><li>AccessibleTwitter.com provides a web-accessible and standards-compliant version of the Twitter web site, a very popular micro-blogging web service. </li></ul><ul><li>Winner of the 2009 Access IT @web2.0 Award </li></ul>
  4. 4. www.AccessibleTwitter.com
  5. 5. Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>Some core functionality is not keyboard accessible. </li></ul></ul><ul><ul><li>Poor use of headings . </li></ul></ul><ul><ul><li>Much core functionality requires JavaScript . </li></ul></ul><ul><ul><li>Many more… </li></ul></ul>
  6. 6. Keyboard Accessible <ul><li>Keyboard cannot access Favorite, Reply, and Delete links. </li></ul><ul><li>ALL links are keyboard accessible. </li></ul>
  7. 7. ?
  8. 8. Use of Headings <ul><li>Poor use of headings </li></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Can you find the menu? </li></ul></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my account info here? </li></ul></ul><ul><ul><li>Also: </li></ul></ul><ul><ul><ul><li>Why is the footer under Following? </li></ul></ul></ul><ul><ul><ul><li>“ Saved Searches” is a primary heading but doesn’t display on the page. </li></ul></ul></ul>
  9. 9. Use of Headings <ul><li>Ideal use of headings </li></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Can you find the menu? </li></ul></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my account info here? </li></ul></ul><ul><ul><li>*Names of Tweet authors are headings which greatly improves clarity and navigation for screen readers. </li></ul></ul>
  10. 10. JavaScript <ul><li>Twitter.com requires JavaScript. Without it, the user is unable to: </li></ul><ul><ul><li>Favorite a tweet. </li></ul></ul><ul><ul><li>Delete a tweet. </li></ul></ul><ul><ul><li>Access the content under Trending Topics & Followers. </li></ul></ul><ul><ul><li>Perform core actions on Followers and Following pages. </li></ul></ul>
  11. 12. JavaScript <ul><li>Accessible Twitter is fully functional without JavaScript. </li></ul><ul><ul><li>Progress Enhancement is paramount. </li></ul></ul><ul><ul><li>Hijax (Jeremy Keith). </li></ul></ul><ul><ul><li>Unobtrusive JS, of course. </li></ul></ul>
  12. 13. Other issues with Twitter.com that Accessible Twitter addresses <ul><li>Code doesn't validate. </li></ul><ul><li>Code could use better semantics. </li></ul><ul><li>Links unclear. </li></ul><ul><ul><li>underlines removed </li></ul></ul><ul><ul><li>:hover pseudo class effects, but no :focus </li></ul></ul><ul><ul><li>poor color contrast </li></ul></ul><ul><li>Custom colors may not be readable </li></ul><ul><ul><li>MySpace syndrome?! </li></ul></ul>
  13. 15. Other issues with Twitter.com that Accessible Twitter addresses <ul><li>Sidebar navigation is inconsistent. </li></ul><ul><li>Form markup needs help: </li></ul><ul><ul><li>Form fields are missing labels. </li></ul></ul><ul><ul><li>Fieldset tags used without legends. </li></ul></ul><ul><li>Layout width is static not flexible. </li></ul>
  14. 16. Other Benefits of Web Accessibility & Web Standards <ul><li>More usable . </li></ul><ul><li>Works in text-only user-agents such as Lynx. </li></ul><ul><li>Keyboard accessibility opens gate for many other types of input devices . </li></ul><ul><li>Providing clear, consistent content and navigation benefits those with cognitive impairments (and is more usable in general). </li></ul><ul><li>Use with a mobile device is possible. </li></ul>
  15. 17. Quotes from Users <ul><li>“ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” </li></ul><ul><li>“ really easy with a Braille Display to use” </li></ul><ul><li>“ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!” </li></ul>
  16. 18. Quotes from Users <ul><li>“… seems to work nicely in Lynx. Main Twitter won't let me login and mobile site won't show followers.” </li></ul><ul><li>“ Liking it more than twitter.com! Cleaner, easier, fun!” </li></ul><ul><li>“ Love this! So clear & Easy #dyslexia” </li></ul>
  17. 19. Quotes from Users <ul><li>Read more: http:// accessibletwitter.com/articles.php </li></ul>
  18. 20. Future Enhancements <ul><li>Always evolving. </li></ul><ul><li>Many enhancements and features are planned including: </li></ul><ul><ul><li>Caching on Trends and Popular Links pages. </li></ul></ul><ul><ul><li>Better error handling. </li></ul></ul><ul><ul><li>Implement ARIA live regions. </li></ul></ul><ul><ul><li>Functionality to upload photos via Twitpic and/or yFrog. </li></ul></ul><ul><ul><li>Open Authentication. </li></ul></ul>
  19. 21. Attend the Session <ul><li>“ Twitter & Web Accessibility” presented by Dennis Lembree. </li></ul><ul><li>12th Annual Accessing Higher Ground near Denver, Colorado. </li></ul><ul><li>“ Accessible Media, Web and Technology Conference” </li></ul><ul><li>10-14 Nov 2009 (Tue-Sat). </li></ul><ul><li>Session is scheduled at 9:15am Thu, Nov 12. </li></ul>
  20. 22. Web Accessibility Podcast & Blog <ul><li>The author of Accessible Twitter is also the founder of Web Axe, a podcast and blog focused on web accessibility. </li></ul><ul><li>http://webaxe.blogspot.com </li></ul><ul><li>Since Sept 2005 </li></ul><ul><li>Approximately 3,000 RSS subscribers </li></ul>
  21. 23. Contact Details <ul><li>Dennis Lembree </li></ul><ul><ul><li>Owner/Author </li></ul></ul><ul><ul><li>www.DennisLembree.com </li></ul></ul><ul><ul><li>www.WebOverhauls.com </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>On Twitter </li></ul><ul><ul><li>@Accessible Twitr </li></ul></ul><ul><ul><li>@WebAxe </li></ul></ul><ul><ul><li>@DennisL </li></ul></ul>

×