Accessibility of Twitter

4,172 views

Published on

Agenda:
1. What is Twitter?
2. Accessibility of Twitter.com
3. Accessibility of AccessibleTwitter.com
4. Accessible Twitter Apps and Tweets

Published in: Design, Technology
1 Comment
3 Likes
Statistics
Notes
  • packers and movers in india@ https://quicksoluction.com packers and movers in delhi@ http://quicksoluction.com/packers-and-movers-in-delhi.html packers and movers in mumbai@ http://quicksoluction.com/packers-and-movers-in-mumbai.html packers and movers in pune@ http://quicksoluction.com/packers-and-movers-in-pune.html packers and movers in gurgaon@ http://quicksoluction.com/packers-and-movers-in-gurgaon.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,172
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • Background: NASA Blue Marble - highly detailed image of earth against black.
  • image: photo of Dennis Lembree. image: photo of Joseph Karr O’Connor.
  • image: TWITTER IS MY ASSISTIVE TECHNOLOGY #csun10 from patrick timony Feb 2 5, 6:19 am via Web
  • 1.1.1 image: A shmoo is shaped like a plump bowling pin with legs. It has smooth skin, eyebrows and sparse whiskers - but no arms, nose or ears. Its feet are short and round but dexterous. http://www. michigandaily.com/content/what-shmoo-can-teach-us-about-class-conflict
  • 1.2.1 images: 4 pictures each containing 12 Twitter avatar pictures
  • 1.2.2 image: #csun10s @dennisl and @cs unwebmaster I use Qwitter client with a screen reader. Share news on Twitter, also use to query responses/resources from aablog via API Feb 2 6, 4:50 am
  • 1.2.3 image: US Navy fire hose training drill. Water gushing very hard from nozzle, 5 sailors holding hose tightly, one observing, all getting drenched from spray being blown back at them on wind.
  • 1.3.1 image: Photos: His Holiness Returns to Dharamsala http://bit.ly/bo3aQ6 from DalaiLama Feb 27, 12:26 am via astral projection 1. 3.2 image: "Scien ce and Mother Nature are in a marriage where Science is always surprised to come home and find Mother Nature blowing the neighbor." from shitmydadsays Feb 28, 1:24 pm | perm | via web
  • 1.3.3 image: #CSUN10s I use #levelstar Icon twitter for most reading and some writing, i.e. basic twitter. from slger123 via LevelStar Icon Feb 26, 9:05 am 1.3.4 image: LevelStar device showing number keypad, cursor keys, and speaker at top with no screen.
  • 1.3.5 image: #CSUN10s I use @accessibleTwitter for occasional desktop browser posts but mostly trends, add/remove, shorten links, search functions from slger123 via L evelStar Icon Feb 26, 9:08 am 1.3.6 image: #CSUN10s Using a ccessibl e Twitter interfaces, I teach social media to senior adult lifelong learners http://bit.ly/cRH9UC fro m slger123 via Lev elStar Icon Feb 26, 11:19 am
  • 2.1.1 Graphic: Twitter.com login screen showing data entry fields, links, and buttons.
  • 2.1.2 Graphic: Twitter.com login screen showing data entry fields, links, and buttons.
  • 2.2.1 Graphic: Twitter.com main screen showing Retweet function unavailable with JavaScript turned off.
  • 2.2.2 image 1: Tweet “Walked into a very expensive restaurant, sat down, was handed a menu. Comic Sans. Got up and left. Life is hard.” 3:48 PM Feb 27th via Tweetie (from: d curtis) - not showing Favorite, Reply or Retweet buttons. 2.2.3 image 2: Tweet “Walked into a very expensive restaurant, sat down, was handed a menu. Comic Sans. Got up and left. Life is hard.” 3:48 PM Feb 27th via Twe etie (from: dcur tis) - showing Favori te, Rep ly and Retweet buttons.
  • 2.3.1 image: screenshot showing poor heading levels in twitter.com.
  • 2.4.1 image: screenshot detail showing Lists dropdown and “gear” dropdown - can’t say what the “gear” is meant to stand for and there is no tooltip.
  • 2.5.1 image: W3C validator showing 80 code errors on twitter.com
  • 2.5.2 image: W3C CSS validator showing 162 errors for twitter.com.
  • 2.5.3 image: graveyard at night, headstone showing partial text covered by ivy, tree branches, eerie.
  • 2.5.4 image: screenshot of main Twitter.com window showing user page for @brittanifanclub with garish colors and very low contrast. 2.5.5 image: inset into top left corner is a screenshot of a report from Colour Contrast Analyser with a summary of failures - luminosity contrast ratio is 85.
  • 3.1.1 image: Accessible Twitter together with JAWS enable me to navigate the Twittersphere. #csun10s from Jennison via AccessibleTwitter Feb 26, 11:33 pm 3.1.2 image: Accessible Twitter Beta logo with Tweet bird perched on the second a.
  • 3.1.3 image: etched crystal trophies showing globe and words Access IT Awards 2009.
  • 3.2.1 image: screenshot showing Tweet Roll screen in Accessible Twitter.
  • 3.3.1 image: list of headings from Tweet Roll screen.
  • 3.6.1 image: screenshot of tweet roll screen in accessibletwitter.com 3.6.2 image: screenshot of Colour Contrast Analyser showing zero failures. 3.6.3 image: check mark denoting that this page passed contrast analysis
  • 3.7.1 image: Checking out AccessibleTwitter. Seems to work well on dialup. http://www.accessibletwitter.com/ from kiwijamo     Mar 3, 5:51 pm | vi a Access ible Twitter
  • 3.7.2 image: Reg blind, use Tweetie2.1 w/ Zoom iPhone. Has helped share knowledge & connect w/ likeminded folk globally to make a difference #csun10s from SandiWassmer     Feb 28, 8:51 am | via Tweetie
  • 3.9.1 image: Twitter enables much faster and broader succinct communication check it more than em/vm still issues peeps not adopting it! #CSUN10s from pyyhkala     Fe b 28, 4:19 pm | via web
  • 4.1.1 image: screenshot of Quitter - A Quiet Little Twitter Client showing hi contrast black background with white monospaced fonts. 4.1.2 image: screenshot of Twitter integrated into MS Outlook showing messages arranged by date.
  • 4.1.3 image: screenshot of Slandr Mobile Twitter web client running on iPhone showing login page.
  • 4.2.1 image: screenshot of Tweet: Using Twitter is easy with Orca, I use Twitux, Twidge, pidgin-mbpurple, and twitterbar. If I need the web, I use accessibletwitter. #csun10s from stormdra gon2976 via t witux Feb 25, 10:16 pm 4.2.2 image: screenshot of Tweet: For anyone interested I use the Syrinx twitter client on OS X with the built-in #VoiceOver screen-reader. #csun10s from ezufelt via Syr inx Feb 27, 8:05 am
  • 4.2.2 image: Accessible Twitter on the Kindle http://post.ly/PeNf from sarahebourne     F eb 25, 9:07 pm | via Posterous
  • 4.2.3 image: #csun10s @dennisl and @csunweb master , I also use Qwitter with my PC and VoiceTweety with my iPhone. Both of them works great to me. from debugon via API Feb 26, 6:5 7 am
  • 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 Twitter.com </li></ul><ul><li>3. Accessibility of AccessibleTwitter.com </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 Twitter.com Twitter.com 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 Twitter.com Twitter.com 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 Twitter.com Twitter.com: 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 Twitter.com Twitter.com: 2.2d Keyboard cannot access Favorite, Reply, and Retweet.
    17. 17. 2.3 Accessibility of Twitter.com Twitter.com: 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 Twitter.com Twitter.com: 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 Twitter.com Twitter.com: 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 Twitter.com Twitter.com: 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 Accessibletwitter.com <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 Accessibletwitter.com <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 Accessibletwitter.com <ul><ul><ul><ul><ul><li>3.2a All keyboard accessible! </li></ul></ul></ul></ul></ul>
    26. 26. 3.3 Accessibility of Accessibletwitter.com <ul><ul><ul><ul><ul><li>Accessibletwitter.com </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 Accessibletwitter.com <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 Accessibletwitter.com <ul><li>Twitter.com </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 Accessibletwitter.com <ul><li>Twitter.com </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 Accessibletwitter.com <ul><li>Accessibletwitter.com </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 Accessibletwitter.com <ul><li>Accessibletwitter.com </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 Accessibletwitter.com <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 Accessibletwitter.com <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 Accessibletwitter.com <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 Accessibletwitter.com <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 Accessibletwitter.com <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 twitter.com! 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 Accessibletwitter.com <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:// qwitter-client.net / 4.1b TwInbox (previously McTwit) Plug -in for MS Outlook http://techhit.com/TwInbox/
    40. 40. 4.1 Accessible Twitter Apps and Tweets 4.1c Slandr Mobile site, web-based http:/ /m.slandr.net/ 4.1d Dabr Mobile site, web-bas ed h ttp://m.dabr.co.uk/ 4.1e Tw eete Mobile site, w eb-based http://m.tweete.ne 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 accessibletwitter.com 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 www.DennisLembree.com www.WebOverhauls.com WebAxe.blogspot.com Twitter Accounts @AccessibleTwitr @WebAxe @DennisL
    46. 46. Contact Information Joseph Karr O’Connor I like loving, making, learning, and sailing. Web Sites www.csun.edu www.blacktelephone.com www.youtube.com/josephkoconnor Twitter Accounts @csunwebmaster @blacktelephone
    47. 47. Where Where you can see and download this presentation: http://www.slideshare.net/csunwebmaster

    ×