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.

Twitter and Web Accessibility (EASI Webinar)

6,263 views

Published on

November 12, 2011

Published in: Technology, Design
  • Be the first to comment

Twitter and Web Accessibility (EASI Webinar)

  1. 1. @EasyChirp, an Accessible Interface for Twitter Presented by Dennis Lembrée EASI Webinar November 12, 2011
  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>EasyChirp.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>
  4. 4. What’s Twitter? <ul><li>The Twitter website is still the most popular Twitter application, but continues to decline in percentage of usage. </li></ul><ul><li>The Twitter API allows third parties to make Twitter applications (web, desktop, mobile, etc.) </li></ul>
  5. 5. Issues with Twitter.com <ul><li>From the start, there are accessibility issues. </li></ul><ul><li>Can you guess issues on the Twitter home page? </li></ul>
  6. 7. Issues with Twitter.com <ul><li>Poor color contrast. </li></ul><ul><li>Form Fieldsets with no Legends. </li></ul><ul><li>Input labels are not Labels. </li></ul>
  7. 8. Issues with Twitter.com <ul><li>Dark blue text links could use underline. </li></ul><ul><li>Can’t tab to “Forgot it?” link. </li></ul><ul><li>“ Forgot it?” link not descriptive. </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>Nearly all functionality requires JavaScript [and no ARIA ]. </li></ul></ul>
  9. 10. Keyboard Access <ul><li>Missing focus indicators. </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>What’s my account name? </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>Why are “change” and “view all” in headings? </li></ul></ul>
  12. 13. JavaScript <ul><li>Nearly all functionality in Twitter.com requires JavaScript [and no ARIA provided]. </li></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><ul><li>Also: LevelStar Icon http://www.levelstar.com/ </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>No longer maintained. </li></ul></ul><ul><ul><li>http://qwitter-client.net/ </li></ul></ul><ul><li>Syrinx </li></ul><ul><ul><li>Mac only (OS X 10.5+) </li></ul></ul><ul><ul><li>http://www.mrrsoftware.com/MRRSoftware/Syrinx.html </li></ul></ul><ul><li>TwInbox (previously McTwit) </li></ul><ul><ul><li>Plug-in for MS Outlook (Windows only) </li></ul></ul><ul><ul><li>http://techhit.com/TwInbox/ </li></ul></ul>
  16. 19. Accessible Clients: Desktop <ul><li>TTYtter </li></ul><ul><ul><li>Perl command line client. </li></ul></ul><ul><ul><li>Updated recently (October 10, 2011) </li></ul></ul><ul><ul><li>http ://www.floodgap.com/software/ttytter / </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: Desktop <ul><li>Mitter </li></ul><ul><ul><li>Linux, Windows and OS X (running PyGTK) </li></ul></ul><ul><ul><li>http://code.google.com/p/mitter/ </li></ul></ul><ul><li>Emacspeak 31.0 — TweetDog </li></ul><ul><ul><li>Linux “audio desktop” application </li></ul></ul><ul><ul><li>http://emacspeak.sourceforge.net/releases/release-31.0.html </li></ul></ul>
  18. 21. Accessible Clients: Mobile Apps <ul><li>TweetList </li></ul><ul><ul><li>iPhone </li></ul></ul><ul><ul><li>http://zooble.com/tweetlist </li></ul></ul><ul><li>Echofon </li></ul><ul><ul><li>iPhone (and Mac, and now Firefox and Window beta) </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>
  19. 22. 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>
  20. 23. Solution?! <ul><li>None of the previous clients solve the web accessibility issues with Twitter.com </li></ul>
  21. 24. Accessible Clients: Web <ul><li>Easy Chirp </li></ul><ul><li>http://www.EasyChirp.com/ </li></ul><ul><ul><li>Provides a fully web-accessible and standards-compliant version of the Twitter web site. </li></ul></ul>
  22. 25. Accessible Clients: Web <ul><li>Easy Chirp 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>Low-band connections </li></ul></ul><ul><ul><li>Any browser-based user-agent! </li></ul></ul>
  23. 26. Easy Chirp/Accessible Twitter <ul><li>Winner of the AFB 2011 Access Award . </li></ul><ul><li>Winner of the 2009 Access IT @web2.0 Award . </li></ul><ul><li>Nominated in Blind Bargains 2009 and 2010 Access Awards (Best Blindness-related Website). </li></ul><ul><li>Nominated in.net magazine’s 2010 Best of the Web awards. </li></ul>
  24. 28. Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul><ul><ul><li>And have clear visual focus. </li></ul></ul>
  25. 29. Use of Headings <ul><li>Ideal use of headings </li></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>What’s my account name? </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>
  26. 30. JavaScript <ul><li>Easy Chirp is fully functional without JavaScript. </li></ul><ul><ul><li>Even works on Lynx, Kindle , etc. </li></ul></ul>
  27. 31. JavaScript <ul><li>Easy Chirp 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>
  28. 32. Easy Chirp <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>
  29. 34. 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>Inline reply tweets; conversation. </li></ul><ul><li>Ajax for delete, favorite, follow/unfollow, etc. </li></ul>
  30. 35. More Features <ul><li>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>Access keys for main menu items. </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>
  31. 36. 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>
  32. 37. 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>
  33. 38. Quotes from Users <ul><li>@yanagram Thanks for telling me about @easychirp. It's wonderful!!!! i love it from debbie gabe  (blindfoodie) </li></ul><ul><li>enjoying the minimalist charm of #easychirp from ZA Addyman  (Zaddyman) </li></ul><ul><li>At World Usability Day event @ DIAC. Discovered http://t.co/SrmuGCA7 accessible Twitter app! from caronne  (caronne) </li></ul><ul><li>Good tip from AGIMO - accessible Twitter via easychirp.com #gov2au #accessibility #ux from chieftech  (chieftech) </li></ul>
  34. 39. Quotes from Users <ul><li>Just checking out Easy Chirp, an accessibility tool for twitter. VERY COOL!! #aln2011 from Disability Services  (ESCDisability) </li></ul><ul><li>Easy Chirp : web accessibility for the http://t.co/glnXM4xH website application: http://t.co/e3f6u6m4 #dc_twitter from ONOBEN  (onoben_jp) </li></ul><ul><li>Here's an accessible way to access Twitter: http://t.co/KCxzINvn Thanks @EasyChirp. #NASPAtech from Eric Stoller  (EricStoller) </li></ul><ul><li>Trying out http://t.co/Ik27mJET, an accessible twitter site. I like it, it's more like the original twitter site. from swkowk  (swkowk) </li></ul>
  35. 40. 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>
  36. 41. 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>
  37. 42. Guidelines for Accessible Tweets <ul><li>Do: </li></ul><ul><li>Shorten link URLs. </li></ul><ul><li>Use simple language. </li></ul><ul><li>For hash tags with more than 1 word, captialize each word (better chance screen readers can interpret it). </li></ul><ul><li>Place pertinent info before a link. </li></ul>
  38. 43. Guidelines for Accessible Tweets <ul><li>Do Not: </li></ul><ul><li>Don’t overuse abbreviations. </li></ul><ul><li>Don’t use slang. </li></ul><ul><li>Don’t overuse hash tags in a tweet; place at end. </li></ul><ul><li>Don’t use a foreign language without making it obvious (forewarn, enclosing with quotes). </li></ul>
  39. 44. 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.EasyChirp.com </li></ul></ul><ul><ul><li>WebAxe.blogspot.com </li></ul></ul><ul><ul><li>www.DennisLembree.com </li></ul></ul><ul><li>Twitter Accounts </li></ul><ul><ul><li>@EasyChirp </li></ul></ul><ul><ul><li>@WebAxe </li></ul></ul><ul><ul><li>@DennisL </li></ul></ul>
  40. 45. Questions?

×