Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility of Twitter


Published on

1. What is Twitter?
2. Accessibility of
3. Accessibility of
4. Accessible Twitter Apps and Tweets

Published in: Design, Technology
  • Login to see the comments

Accessibility of Twitter

  1. 1. Accessibility of Twitter <ul><li>for Mobile, Desktop and Web </li></ul>
  2. 2. Presented By Joseph Karr O’Connor @csunwebmaster Dennis Lembrée @dennisl
  3. 3. Agenda <ul><li>1. What is Twitter? </li></ul><ul><li>2. Accessibility of </li></ul><ul><li>3. Accessibility of </li></ul><ul><li>4. Accessible Twitter Apps and Tweets </li></ul>
  4. 4. Agenda <ul><li>The presenters solicited comments from users of assistive technology on their use of Twitter. The comments are used throughout this presentation. </li></ul>
  5. 5. 1.1 What Is Twitter? “ Shmoos have the ability to change themselves into anything necessary for human existence but not into luxury items.” &quot; Class Counts &quot; (Cambridge, 1997) Erik Olin Wright Twitter is a shmoo Shmoo from Al Capp's Li'l Abner
  6. 6. 1.2 What Is Twitter? <ul><li>“ Twitter is a real-time information network powered by people all around the world that lets you share and discover what’s happening now.” </li></ul>
  7. 7. 1.2 What Is Twitter? <ul><li>You can access Twitter through more than 50,000 third-party Internet and mobile applications. </li></ul>
  8. 8. 600 Tweets a second!
  9. 9. 1.3 What Is Twitter?
  10. 10. 1.3 What Is Twitter?
  11. 11. 1.3 What Is Twitter?
  12. 12. Intermission
  13. 13. 2.1 Accessibility of login page: 2.1a Two “click here” links. 2.1b Text links are not underlined. 2.1c Language select dropdown missing submit button.
  14. 14. 2.1 Accessibility of login page: 2.1d Language select dropdown requires JavaScript. 2.1e Poor color contrast - blue on blue. 2.1f Link named “Forgot?” - forgot what?
  15. 15. 2.2 Accessibility of 2.2a Core functionality is not keyboard accessible. 2.2b Poor use of headings. 2.2c Much core functionality requires JavaScript.
  16. 16. 2.2 Accessibility of 2.2d Keyboard cannot access Favorite, Reply, and Retweet.
  17. 17. 2.3 Accessibility of Poor use of headings: 2.3a What site is this? 2.3b Is my account name or info here? 2.3c Where are the tweets? 2.3d Where is the menu? 2.3e Why is the footer under the heading “Create a new list”?
  18. 18. 2.4 Accessibility of Requires JavaScript. Without it, the user is unable to: 2.4a Favorite a tweet. 2.4b Delete a tweet. 2.4c Access the content under Trending Topics & Followers. 2.4d Perform core actions on Followers and Following pages. 2.4e Exception: Reply to tweet does work without JavaScript.
  19. 19. 2.5 Accessibility of Code doesn’t validate, could use better semantics. 2.5a Links unclear: 1. underlines removed 2. :hover pseudo class effects, but no :focus 3. poor color contrast 2.5b Sidebar navigation is inconsistent.
  20. 20. 2.5 Accessibility of Code doesn’t validate, could use better semantics. 2.5c Form mark-up needs help: 1. Form fields are missing labels. 2. Fieldset tags used without legends. 2.5d Layout width is static, not flexible. 2.5e Custom colors may not be readable.
  21. 21. Geocities is dead, long live Geocities!
  22. 22.
  23. 23. 3.1 Accessibility of <ul><li>Accessible Twitter provides a fully web-accessible and standards-compliant version of the Twitter web site. </li></ul>
  24. 24. 3.1 Accessibility of <ul><li>Winner 2009 Access IT @web2.0 Award . </li></ul><ul><li>Nominated: Blind Bargains: 2009 Access Awards (Best Blindness-related Website). </li></ul>
  25. 25. 3.2 Accessibility of <ul><ul><ul><ul><ul><li>3.2a All keyboard accessible! </li></ul></ul></ul></ul></ul>
  26. 26. 3.3 Accessibility of <ul><ul><ul><ul><ul><li> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Ideal use of headings: </li></ul></ul></ul></ul></ul><ul><li>3.3a What site is this? </li></ul><ul><li>3.3b Is my account name and/or info here? </li></ul><ul><li>3.3c Where are the tweets? </li></ul><ul><li>3.3d Where is the menu? </li></ul><ul><li>3.3e In each tweet, the name of the author is a heading which greatly improves clarity and navigation for screen readers. </li></ul>
  27. 27. 3.4 Accessibility of <ul><li>JavaScript </li></ul><ul><li>3.4a Accessible Twitter is fully functional without JavaScript. </li></ul><ul><li>3.4b Accessible Twitter uses JavaScript to enhance behavior. </li></ul><ul><li>1. Progressive enhancement is paramount. </li></ul><ul><li>2. Using Hijax (Jeremy Keith). </li></ul><ul><li>3. Unobtrusive enhancement, of course. </li></ul>
  28. 28. 3.5 Accessibility of <ul><li> </li></ul><ul><li>3.5a Code doesn't validate. </li></ul><ul><li>3.5b Code could use better semantics. </li></ul><ul><li>3.5c Links unclear. </li></ul><ul><li>1. underlines removed </li></ul><ul><li>2. :hover pseudo class effects, but no :focus </li></ul><ul><li>3. poor color contrast </li></ul>
  29. 29. 3.5 Accessibility of <ul><li> </li></ul><ul><li>3.5d Sidebar navigation is inconsistent. </li></ul><ul><li>3.5e Form mark-up needs help: </li></ul><ul><ul><li>1. Form fields are missing labels. </li></ul></ul><ul><li>2. Fieldset tags used without legends. </li></ul><ul><li>3.5f Layout width is static not flexible. </li></ul><ul><li>3.5g Custom colors may not be readable. </li></ul>
  30. 30. 3.6 Accessibility of <ul><li> </li></ul><ul><li>3.6a Code validates. </li></ul><ul><li>3.6b Code is semantic. </li></ul><ul><li>3.6c Links clear. </li></ul><ul><li>1. underlines not removed </li></ul><ul><li>2. :hover class and :focus </li></ul><ul><li>3. good color contrast </li></ul>
  31. 31. 3.6 Accessibility of <ul><li> </li></ul><ul><li>3.6d Navigation is consistent. </li></ul><ul><li>3.6e Form mark-up is accessible: </li></ul><ul><li>1. Form fields have labels. </li></ul><ul><li>2. Fieldset tags include legends. </li></ul><ul><li>3.6f Layout width is flexible. </li></ul><ul><li>3.6g Custom colors are not implemented. </li></ul>
  32. 32.
  33. 33. 3.7 Accessibility of <ul><li>More Accessible Twitter Features </li></ul><ul><li>3.7a Search, saved search, user search. </li></ul><ul><li>3.7b Trends page. </li></ul><ul><li>3.7c Popular links page ( TweetMeme ). </li></ul>
  34. 34. 3.7 Accessibility of <ul><li>More Accessible Twitter Features </li></ul><ul><li>3.7d Each page displays users' information. </li></ul><ul><li>3.7e No hidden links, always displayed. </li></ul><ul><li>1. Favorite, reply, and re-Tweet links. </li></ul><ul><li>2. Link to permanent page. </li></ul><ul><li>3.7d ARIA landmarks - nav, banner, main, search, etc. </li></ul>
  35. 35. 3.8 Accessibility of <ul><li>Quotes From Users </li></ul><ul><li>3.8a “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>
  36. 36. 3.8 Accessibility of <ul><li>Quotes From Users </li></ul><ul><li>3.8b “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>3.8c “really easy with a Braille Display to use” </li></ul><ul><li>3.8d “From now on my default web interface for Twitter! Keyboard accessible == touch accessible!” </li></ul>
  37. 37. 3.8 Accessibility of <ul><li>Quotes From Users 3.8e “…seems to work nicely in Lynx . Main Twitter won't let me login and mobile site won't show followers.” 3.8f “Liking it more than! Cleaner, easier , fun!” 3.8g “Love this! So clear & Easy # dyslexia ” </li></ul><ul><li>Read these quotes and more at AccessibleTwitter. </li></ul>
  38. 38. 3.9 Accessibility of <ul><li>Future Enhancements - Always Evolving 3.9a Twitter lists (partially implemented). 3.9b Better error handling. 3.9c Upload photos via Twitpic or yFrog. 3.9d Open Authentication instead of basic. </li></ul>
  39. 39. 4.1 Accessible Twitter Apps and Tweets 4.1a Qwitter Desktop client for screen readers http:// / 4.1b TwInbox (previously McTwit) Plug -in for MS Outlook
  40. 40. 4.1 Accessible Twitter Apps and Tweets 4.1c Slandr Mobile site, web-based http:/ / 4.1d Dabr Mobile site, web-bas ed h ttp:// 4.1e Tw eete Mobile site, w eb-based t /
  41. 41. 4.2 Accessible Twitter Apps and Tweets 4.2a The #csun10s Project: The authors Tweeted for participation in this presentation by users of assistive tech. @stormdragon2976 and @aablog wrote about Linux and Mac environments.
  42. 42. 4.2 Accessible Twitter Apps and Tweets 4.2b @sarahebourne wrote a report about using on her Kindle with the bare-minimum browser.
  43. 43. 4.2 Accessible Twitter Apps and Tweets 4.2c @debugon mentioned iPhone use. Many iPhones are in use by users of assistive tech.
  44. 44. 4.3 Accessible Twitter Apps and Tweets Guidelines for Accessible Tweets 4.4a Don’t overuse abbreviations. 4.4b Shorten link URLs. 4.4c Use simple language. 4.4d Don’t use a foreign language without saying so, or by making it obvious (enclosing with quotes, for example).
  45. 45. Contact Information Dennis Lembree I like motorcycling, Star Wars, espresso, Woody Allen movies, and playing guitar. Web Sites Twitter Accounts @AccessibleTwitr @WebAxe @DennisL
  46. 46. Contact Information Joseph Karr O’Connor I like loving, making, learning, and sailing. Web Sites Twitter Accounts @csunwebmaster @blacktelephone
  47. 47. Where Where you can see and download this presentation: