Twitter and Web Accessibility (EASI Webinar)

6,022 views
5,723 views

Published on

November 12, 2011

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,022
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Repeated slide
  • 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?

    ×