1.
@EasyChirp, an Accessible Interface for Twitter Presented by Dennis Lembrée EASI Webinar November 12, 2011

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.
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.
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.
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>

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>

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>

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>

10.
Keyboard Access <ul><li>Missing focus indicators. </li></ul>

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>

13.
JavaScript <ul><li>Nearly all functionality in Twitter.com requires JavaScript [and no ARIA provided]. </li></ul>

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>

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>

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>

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>

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>

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>

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>

23.
Solution?! <ul><li>None of the previous clients solve the web accessibility issues with Twitter.com </li></ul>

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>

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>

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>

28.
Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul><ul><ul><li>And have clear visual focus. </li></ul></ul>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

45.
Questions?