Successfully reported this slideshow.
Your SlideShare is downloading. ×

Twitter and Web Accessibility (EASI Webinar)

Loading in …3

Check these out next

1 of 45 Ad

More Related Content

Similar to Twitter and Web Accessibility (EASI Webinar) (20)


Recently uploaded (20)


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 </li></ul><ul><li>Accessible Twitter Clients </li></ul><ul><li> </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 <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 <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 <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 <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 requires JavaScript [and no ARIA provided]. </li></ul>
  13. 15. Other issues with <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 </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> </li></ul></ul><ul><li>Syrinx </li></ul><ul><ul><li>Mac only (OS X 10.5+) </li></ul></ul><ul><ul><li> </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> </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 :// / </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> </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> </li></ul></ul><ul><li>Emacspeak 31.0 — TweetDog </li></ul><ul><ul><li>Linux “audio desktop” application </li></ul></ul><ul><ul><li> </li></ul></ul>
  18. 21. Accessible Clients: Mobile Apps <ul><li>TweetList </li></ul><ul><ul><li>iPhone </li></ul></ul><ul><ul><li> </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> </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> </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> </li></ul></ul><ul><li>Dabr </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Tweete </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li> </li></ul></ul>
  20. 23. Solution?! <ul><li>None of the previous clients solve the web accessibility issues with </li></ul>
  21. 24. Accessible Clients: Web <ul><li>Easy Chirp </li></ul><ul><li> </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 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 accessible Twitter app! from caronne  (caronne) </li></ul><ul><li>Good tip from AGIMO - accessible Twitter via #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 website application: #dc_twitter from ONOBEN  (onoben_jp) </li></ul><ul><li>Here's an accessible way to access Twitter: Thanks @EasyChirp. #NASPAtech from Eric Stoller  (EricStoller) </li></ul><ul><li>Trying out, 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> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </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?

Editor's Notes

  • Repeated slide