EASI Social Media Series Presented by Dennis Lembrée February 1, 2010 Twitter and Web Accessibility
Agenda <ul><li>What’s Twitter? </li></ul><ul><li>Issues with Twitter.com </li></ul><ul><li>Accessible Twitter Applications...
What’s Twitter? <ul><li>Free social networking and micro-blogging service that enables its users to send and read text-bas...
Issues with Twitter.com <ul><li>From the start, there are accessibility issues.  </li></ul><ul><li>Can you find 3 items on...
 
Issues with Twitter.com <ul><li>Two “click here” links. </li></ul><ul><li>Text links are not underlined. </li></ul><ul><li...
Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>Core functionality is not  ...
Keyboard Access <ul><li>Keyboard cannot access Favorite, Reply, and Delete links. </li></ul>
?
Use of Headings <ul><li>Poor use of headings </li></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my acc...
JavaScript <ul><li>Twitter.com requires JavaScript.  Without it, the user is unable to: </li></ul><ul><ul><li>Favorite a t...
 
Other issues with Twitter.com <ul><li>Code doesn't validate. </li></ul><ul><li>Code could use better semantics. </li></ul>...
 
Accessible Applications <ul><li>Accessible Twitter </li></ul><ul><ul><li>http://www.accessibletwitter.com/ </li></ul></ul>...
AccessibleTwitter.com <ul><li>Accessible Twitter provides a fully web-accessible and standards-compliant version of the Tw...
www.AccessibleTwitter.com
Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul>
Use of Headings <ul><li>Ideal use of headings </li></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my ac...
JavaScript <ul><li>Accessible Twitter is fully functional without JavaScript. </li></ul>
JavaScript <ul><li>Accessible Twitter uses JavaScript to  enhance  behavior. </li></ul><ul><ul><li>Progress Enhancement is...
Other issues with Twitter.com <ul><li>Code doesn't validate. </li></ul><ul><li>Code could use better semantics. </li></ul>...
AccessibleTwitter.com Fixes <ul><li>Code validates. </li></ul><ul><li>Code is semantic. </li></ul><ul><li>Links clear. </l...
 
More Features <ul><li>Search, saved search, user search. </li></ul><ul><li>Trends page. </li></ul><ul><li>Popular Links pa...
More Features <ul><li>No hidden links; always displayed.  </li></ul><ul><ul><li>Favorite, Reply and Re-tweet links. </li><...
Quotes from Users <ul><li>“ Wow! You have really made my day, and I am smiling once again. I am so excited that I found yo...
Quotes from Users <ul><li>“ You can  easily navigate  by several methods; skip links, form fields, headings. Very effectiv...
Quotes from Users <ul><li>“… seems to work nicely in  Lynx . Main Twitter won't let me login and mobile site won't show fo...
Quotes from Users <ul><li>Read these quotes and 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>...
Other Benefits of Web Accessibility & Web Standards <ul><li>More  usable . </li></ul><ul><li>Better functionality with  as...
Guidelines for Accessible Tweets <ul><li>Don’t overuse abbreviations. </li></ul><ul><li>Shorten link URLs. </li></ul><ul><...
Contact Details <ul><li>Dennis Lembree </li></ul><ul><ul><li>I like motorcycling, Star Wars, espresso, Woody Allen movies,...
Questions?
Upcoming SlideShare
Loading in...5
×

EASI Webinar: Twitter And Web Accessibility

2,467

Published on

Webinar given via EASI 2010 Feb 1. http://easi.cc/

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,467
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

EASI Webinar: Twitter And Web Accessibility

  1. 1. EASI Social Media Series Presented by Dennis Lembrée February 1, 2010 Twitter and Web Accessibility
  2. 2. Agenda <ul><li>What’s Twitter? </li></ul><ul><li>Issues with Twitter.com </li></ul><ul><li>Accessible Twitter Applications </li></ul><ul><li>AccessibleTwitter.com </li></ul><ul><li>Other Benefits of Web Accessibility & Web Standards </li></ul><ul><li>Guidelines for Accessible Tweets </li></ul><ul><li>Contact Details </li></ul><ul><li>Questions </li></ul>
  3. 3. What’s Twitter? <ul><li>Free social networking and micro-blogging service that enables its users to send and read text-based messages of up to 140 characters. Learn more on Wikipedia . </li></ul>
  4. 4. Issues with Twitter.com <ul><li>From the start, there are accessibility issues. </li></ul><ul><li>Can you find 3 items on the main Twitter “Sign in” page that could use improvement? </li></ul>
  5. 6. Issues with Twitter.com <ul><li>Two “click here” links. </li></ul><ul><li>Text links are not underlined. </li></ul><ul><li>Language select dropdown missing submit button (and requires JavaScript.) </li></ul>
  6. 7. Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>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>
  7. 8. Keyboard Access <ul><li>Keyboard cannot access Favorite, Reply, and Delete links. </li></ul>
  8. 9. ?
  9. 10. Use of Headings <ul><li>Poor use of headings </li></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my account name and/or info here? </li></ul></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Where is the menu? </li></ul></ul><ul><ul><li>W hy is the footer under the heading “Create a new list”? </li></ul></ul>
  10. 11. 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><ul><ul><li>Reply to tweet does work without JavaScript. </li></ul></ul>
  11. 13. Other issues with Twitter.com <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>Sidebar navigation is inconsistent. </li></ul><ul><li>Form mark-up 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><ul><li>Custom colors may not be readable. </li></ul>
  12. 15. Accessible Applications <ul><li>Accessible Twitter </li></ul><ul><ul><li>http://www.accessibletwitter.com/ </li></ul></ul><ul><li>Slandr </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li>http://m.slandr.net/ </li></ul></ul><ul><li>Qwitter </li></ul><ul><ul><li>Desktop client for screen readers </li></ul></ul><ul><ul><li>http://qwitter-client.net/ </li></ul></ul><ul><li>TwInbox (previously McTwit) </li></ul><ul><ul><li>Plug-in for MS Outlook </li></ul></ul><ul><ul><li>http://techhit.com/TwInbox/ </li></ul></ul>
  13. 16. AccessibleTwitter.com <ul><li>Accessible Twitter provides a fully web-accessible and standards-compliant version of the Twitter web site. </li></ul><ul><li>Winner of the 2009 Access IT @web2.0 Award . </li></ul><ul><li>Nominated in the Blind Bargains: 2009 Access Awards (Best Blindness-related Website). </li></ul>
  14. 17. www.AccessibleTwitter.com
  15. 18. Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul>
  16. 19. Use of Headings <ul><li>Ideal use of headings </li></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my account name and/or info here? </li></ul></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Where is the menu? </li></ul></ul><ul><ul><li>In each tweet, the name the author is a heading which greatly improves clarity and navigation for screen readers. </li></ul></ul>
  17. 20. JavaScript <ul><li>Accessible Twitter is fully functional without JavaScript. </li></ul>
  18. 21. JavaScript <ul><li>Accessible Twitter uses JavaScript to enhance behavior. </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, of course. </li></ul></ul>
  19. 22. Other issues with Twitter.com <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>Sidebar navigation is inconsistent. </li></ul><ul><li>Form mark-up 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><ul><li>Custom colors may not be readable. </li></ul>
  20. 23. AccessibleTwitter.com Fixes <ul><li>Code validates. </li></ul><ul><li>Code is semantic. </li></ul><ul><li>Links clear. </li></ul><ul><ul><li>underlines not removed </li></ul></ul><ul><ul><li>:hover pseudo class and :focus </li></ul></ul><ul><ul><li>good color contrast </li></ul></ul><ul><li>Navigation is consistent. </li></ul><ul><li>Form mark-up is accessible: </li></ul><ul><ul><li>Form fields have labels. </li></ul></ul><ul><ul><li>Fieldset tags include legends. </li></ul></ul><ul><li>Layout width is flexible. </li></ul><ul><li>Custom colors are not implemented. </li></ul>
  21. 25. More Features <ul><li>Search, saved search, user search. </li></ul><ul><li>Trends page. </li></ul><ul><li>Popular Links page ( TweetMeme ). </li></ul><ul><li>Every pages displays the user’s information. </li></ul>
  22. 26. More Features <ul><li>No hidden links; always displayed. </li></ul><ul><ul><li>Favorite, Reply and Re-tweet links. </li></ul></ul><ul><ul><li>Link to tweet’s “permanent page”. </li></ul></ul><ul><li>ARIA Landmarks Roles (nav, banner, search, main, etc.) </li></ul>
  23. 27. Quotes from Users <ul><li>“ Wow! You have really made my day, and I am smiling once again. I am so excited that I found your Accessible Twitter. Now I feel that I can be in the cutting edge of everything that is happening in the Twitter Universe” </li></ul>
  24. 28. Quotes from Users <ul><li>“ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” [and now ARIA] </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>
  25. 29. 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>
  26. 30. Quotes from Users <ul><li>Read these quotes and more: http://accessibletwitter.com/articles.php </li></ul>
  27. 31. Future Enhancements <ul><li>Always evolving. </li></ul><ul><li>Many enhancements and features are planned including: </li></ul><ul><ul><li>Twitter Lists (partially implemented). </li></ul></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>Functionality to upload photos via Twitpic and/or yFrog. </li></ul></ul><ul><ul><li>Open Authentication (instead of Basic). </li></ul></ul>
  28. 32. Other Benefits of Web Accessibility & Web Standards <ul><li>More usable . </li></ul><ul><li>Better functionality with assistive technology such as text browsers & Braille devices. </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>
  29. 33. Guidelines for Accessible Tweets <ul><li>Don’t overuse abbreviations. </li></ul><ul><li>Shorten link URLs. </li></ul><ul><li>Use simple language. </li></ul><ul><li>Don’t use a foreign language without saying so, or by making it obvious (enclosing with quotes, for example). </li></ul>
  30. 34. Contact Details <ul><li>Dennis Lembree </li></ul><ul><ul><li>I like motorcycling, Star Wars, espresso, Woody Allen movies, and playing guitar. </li></ul></ul><ul><li>Web Sites </li></ul><ul><ul><li>www.DennisLembree.com </li></ul></ul><ul><ul><li>www.WebOverhauls.com </li></ul></ul><ul><ul><li>WebAxe.blogspot.com </li></ul></ul><ul><li>Twitter Accounts </li></ul><ul><ul><li>@Accessible Twitr </li></ul></ul><ul><ul><li>@WebAxe </li></ul></ul><ul><ul><li>@DennisL </li></ul></ul>
  31. 35. Questions?

×