Twitter and Web Accessibility Presented by Dennis Lembrée INDATA Statewide Assistive Technology Conference Indianapolis, I...
Agenda <ul><li>What’s Twitter? </li></ul><ul><li>Issues with Twitter.com </li></ul><ul><li>Accessible Twitter Clients </li...
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>Language select dropdown requires JavaScript. </li></ul><ul><li>Poor  color contrast (blue...
Issues with Twitter.com <ul><li>I’m not even going to mention the headings. At least not on this page... </li></ul>
Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>Not all core functionality ...
Keyboard Access <ul><li>In Timeline, the 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 Clients &  Applications <ul><li>Desktop </li></ul><ul><li>Mobile </li></ul><ul><li>Mobile Web </li></ul><ul><li...
Accessible Clients: Desktop <ul><li>Qwitter </li></ul><ul><ul><li>Desktop client specifically for screen readers </li></ul...
Accessible Clients: Desktop <ul><li>Syrinx </li></ul><ul><ul><li>Mac only </li></ul></ul><ul><ul><li>http://www.mrrsoftwar...
Accessible Clients: Mobile Apps <ul><li>Echofon </li></ul><ul><ul><li>iPhone (and Mac) </li></ul></ul><ul><ul><li>http://w...
Accessible Clients: Mobile Web <ul><li>Slandr </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li>http...
Accessible Clients: Web <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...
 
Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul><ul><ul><li>And  have clear visual focus. </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><ul><ul><li>Even works on Lynx,  K...
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>Now full Lists functionality. </li></ul><ul><li>Every page displays the user’s information. </li></u...
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>A Twitter application, especially an accessible one, is always evolving. </li></ul><ul><li>Man...
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>Don’t overuse hash tags in a tweet...
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
×

"Twitter and Web Accessibility" INDATA Conference 2010

2,324 views

Published on

Presented by Dennis Lembrée
INDATA Statewide Assistive Technology Conference
Indianapolis, Indiana
July 29, 2010

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Text-only HTML version here:
    http://weboverhauls.com/web_axe_podcast/twitter_and_web_accessibility_indata_july2010.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,324
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

"Twitter and Web Accessibility" INDATA Conference 2010

  1. 1. Twitter and Web Accessibility Presented by Dennis Lembrée INDATA Statewide Assistive Technology Conference Indianapolis, Indiana July 29, 2010
  2. 2. Agenda <ul><li>What’s Twitter? </li></ul><ul><li>Issues with Twitter.com </li></ul><ul><li>Accessible Twitter Clients </li></ul><ul><li>AccessibleTwitter.com </li></ul><ul><li>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. </li></ul><ul><li>http://en.wikipedia.org/wiki/Twitter </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. </li></ul>
  6. 7. Issues with Twitter.com <ul><li>Language select dropdown requires JavaScript. </li></ul><ul><li>Poor color contrast (blue on blue). </li></ul><ul><li>“ Forgot” what? </li></ul>
  7. 8. Issues with Twitter.com <ul><li>I’m not even going to mention the headings. At least not on this page... </li></ul>
  8. 9. Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>Not all core functionality is 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>
  9. 10. Keyboard Access <ul><li>In Timeline, the keyboard cannot access Favorite, Reply, and Delete links. </li></ul>
  10. 11. ?
  11. 12. 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>
  12. 13. 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>Exception: Reply to tweet does work without JavaScript. </li></ul></ul>
  13. 15. 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>
  14. 17. Accessible Clients & Applications <ul><li>Desktop </li></ul><ul><li>Mobile </li></ul><ul><li>Mobile Web </li></ul><ul><li>Web (focus of this presentation) </li></ul>
  15. 18. Accessible Clients: Desktop <ul><li>Qwitter </li></ul><ul><ul><li>Desktop client specifically for screen readers </li></ul></ul><ul><ul><li>http://qwitter-client.net/ </li></ul></ul><ul><li>Jawter </li></ul><ul><ul><li>Specifically for JAWS screen reader application </li></ul></ul><ul><ul><li>http://randylaptop.com/software/jawter-2/2/ </li></ul></ul><ul><li>TwInbox (previously McTwit) </li></ul><ul><ul><li>Plug-in for MS Outlook </li></ul></ul><ul><ul><li>Costly, proprietary </li></ul></ul><ul><ul><li>http://techhit.com/TwInbox/ </li></ul></ul>
  16. 19. Accessible Clients: Desktop <ul><li>Syrinx </li></ul><ul><ul><li>Mac only </li></ul></ul><ul><ul><li>http://www.mrrsoftware.com/MRRSoftware/Syrinx.html </li></ul></ul><ul><li>Emacspeak 31.0 — TweetDog </li></ul><ul><ul><li>Linux only “audio desktop” application </li></ul></ul><ul><ul><li>http://emacspeak.sourceforge.net/releases/release-31.0.html </li></ul></ul><ul><li>Point-and-Chat </li></ul><ul><ul><li>Windows application for those requiring Augmentative/Alternative Communication (AAC). Supports email, chat, and Twitter. </li></ul></ul><ul><ul><li>http://www.simtalk.com/PnC/ </li></ul></ul>
  17. 20. Accessible Clients: Mobile Apps <ul><li>Echofon </li></ul><ul><ul><li>iPhone (and Mac) </li></ul></ul><ul><ul><li>http://www.echofon.com/ </li></ul></ul><ul><li>Tweets60 </li></ul><ul><ul><li>Only on Nokia S60 </li></ul></ul><ul><ul><li>Only with Talks reader </li></ul></ul><ul><ul><li>http://www.tweets60.com/ </li></ul></ul><ul><li>Twikini </li></ul><ul><ul><li>Windows Mobile </li></ul></ul><ul><ul><li>http://www.trinketsoftware.com/Twikini/ </li></ul></ul>
  18. 21. Accessible Clients: Mobile Web <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>Dabr </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li>http://m.dabr.co.uk/ </li></ul></ul><ul><li>Tweete </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li>http://m.tweete.net/ </li></ul></ul>
  19. 22. Accessible Clients: Web <ul><li>Accessible Twitter </li></ul><ul><ul><li>http://www.accessibletwitter.com/ </li></ul></ul><ul><li>Works with </li></ul><ul><ul><li>All operating systems </li></ul></ul><ul><ul><li>All major browsers (No JS or CSS required) </li></ul></ul><ul><ul><li>Mobile devices (iPhone, Droid, Blackberry, etc.) </li></ul></ul><ul><ul><li>Screen readers </li></ul></ul><ul><ul><li>Tablets </li></ul></ul><ul><ul><li>Text-only (Lynx) </li></ul></ul><ul><ul><li>Kindle </li></ul></ul><ul><ul><li>Any browser-based user-agent! </li></ul></ul>
  20. 23. 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>
  21. 25. Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul><ul><ul><li>And have clear visual focus. </li></ul></ul>
  22. 26. 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>
  23. 27. JavaScript <ul><li>Accessible Twitter is fully functional without JavaScript. </li></ul><ul><ul><li>Even works on Lynx, Kindle , etc. </li></ul></ul>
  24. 28. 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>
  25. 29. 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>
  26. 30. 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>All navigation areas are 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>
  27. 32. 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>URL Shortener (Bitly). </li></ul><ul><li>Add image (Twitpic). </li></ul><ul><li>Inline reply tweets; conversation. </li></ul><ul><li>Ajax for delete, favorite, follow/unfollow, etc. </li></ul>
  28. 33. More Features <ul><li>Now full Lists functionality. </li></ul><ul><li>Every page displays the user’s information. </li></ul><ul><li>No hidden links; always displayed. </li></ul><ul><li>ARIA </li></ul><ul><ul><li>Landmarks Roles (nav, banner, search, main, etc.) </li></ul></ul><ul><ul><li>Live Regions (during enter tweet). </li></ul></ul>
  29. 34. 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>
  30. 35. 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>
  31. 36. 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>
  32. 37. Quotes from Users <ul><li>Read these quotes and more: http://accessibletwitter.com/articles.php </li></ul>
  33. 38. Future Enhancements <ul><li>A Twitter application, especially an accessible one, is always evolving. </li></ul><ul><li>Many enhancements and features are planned including: </li></ul><ul><ul><li>Enhance List functionality with (accessible) Ajax. </li></ul></ul><ul><ul><li>Inline notice and update of new tweets. </li></ul></ul><ul><ul><li>Reply-to-all feature. </li></ul></ul><ul><ul><li>Add optional services for URL shortener and photo uploading. </li></ul></ul><ul><ul><li>Internationalization/multi-language support. </li></ul></ul>
  34. 39. 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>
  35. 40. Guidelines for Accessible Tweets <ul><li>Don’t overuse abbreviations. </li></ul><ul><li>Don’t overuse hash tags in a tweet; place at end. </li></ul><ul><li>Shorten link URLs. </li></ul><ul><li>Use simple language. </li></ul><ul><li>Place pertinent info before a link. </li></ul><ul><li>Don’t use a foreign language without making it obvious (forewarn, enclosing with quotes). </li></ul>
  36. 41. 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>
  37. 42. Questions?

×