• Save
Twitter and Web Accessibility (EASI Webinar)
Upcoming SlideShare
Loading in...5
×
 

Twitter and Web Accessibility (EASI Webinar)

on

  • 5,865 views

November 12, 2011

November 12, 2011

Statistics

Views

Total Views
5,865
Views on SlideShare
4,637
Embed Views
1,228

Actions

Likes
2
Downloads
3
Comments
0

21 Embeds 1,228

http://webaxe.blogspot.com 1095
http://feeds.feedburner.com 60
http://www.webaxe.org 40
http://www.webaxe.blogspot.com 9
http://webaxe.blogspot.com.au 5
http://apps.synaptive.net 3
http://a0.twimg.com 2
http://www.newsblur.com 1
http://web-access.cmb.med.rug.nl 1
http://webaxe.blogspot.com.es 1
http://webaxe.blogspot.in 1
http://webaxe.blogspot.com.br 1
http://feedproxy.google.com 1
http://webaxe.blogspot.ch 1
http://webaxe.blogspot.co.uk 1
http://127.0.0.1 1
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
http://www.rss-one.com 1
http://hardpodcafe.com 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Repeated slide

Twitter and Web Accessibility (EASI Webinar) Twitter and Web Accessibility (EASI Webinar) Presentation Transcript

  • @EasyChirp, an Accessible Interface for Twitter Presented by Dennis Lembrée EASI Webinar November 12, 2011
  • Agenda
    • What’s Twitter?
    • Issues with Twitter.com
    • Accessible Twitter Clients
    • EasyChirp.com
    • Benefits of Web Accessibility & Web Standards
    • Guidelines for Accessible Tweets
    • Contact Details
    • Questions
  • What’s Twitter?
    • Free social networking and micro-blogging service that enables its users to send and read text-based messages of up to 140 characters.
  • What’s Twitter?
    • The Twitter website is still the most popular Twitter application, but continues to decline in percentage of usage.
    • The Twitter API allows third parties to make Twitter applications (web, desktop, mobile, etc.)
  • Issues with Twitter.com
    • From the start, there are accessibility issues.
    • Can you guess issues on the Twitter home page?
  •  
  • Issues with Twitter.com
    • Poor color contrast.
    • Form Fieldsets with no Legends.
    • Input labels are not Labels.
  • Issues with Twitter.com
    • Dark blue text links could use underline.
    • Can’t tab to “Forgot it?” link.
    • “ Forgot it?” link not descriptive.
  • Issues with Twitter.com
    • Many web accessibility issues including:
      • Not all core functionality is keyboard accessible.
      • Poor use of headings .
      • Nearly all functionality requires JavaScript [and no ARIA ].
  • Keyboard Access
    • Missing focus indicators.
  • ?
  • Use of Headings
    • Poor use of headings
      • What site is this?
      • What’s my account name?
      • Where are the tweets?
      • Where is the menu?
      • Why are “change” and “view all” in headings?
  • JavaScript
    • Nearly all functionality in Twitter.com requires JavaScript [and no ARIA provided].
  •  
  • Other issues with Twitter.com
    • Code doesn't validate.
    • Code could use better semantics.
    • Links unclear.
      • underlines removed
      • :hover pseudo class effects, but no :focus
      • poor color contrast
    • Sidebar navigation is inconsistent.
    • Form mark-up needs help:
      • Form fields are missing labels.
      • Fieldset tags used without legends.
    • Layout width is static, not flexible.
    • Custom colors may not be readable.
  •  
  • Accessible Clients & Applications
    • Desktop
    • Mobile
    • Mobile Web
    • Web (focus of this presentation)
    • Also: LevelStar Icon http://www.levelstar.com/
  • Accessible Clients: Desktop
    • Qwitter
      • Desktop client specifically for screen readers.
      • No longer maintained.
      • http://qwitter-client.net/
    • Syrinx
      • Mac only (OS X 10.5+)
      • http://www.mrrsoftware.com/MRRSoftware/Syrinx.html
    • TwInbox (previously McTwit)
      • Plug-in for MS Outlook (Windows only)
      • http://techhit.com/TwInbox/
  • Accessible Clients: Desktop
    • TTYtter
      • Perl command line client.
      • Updated recently (October 10, 2011)
      • http ://www.floodgap.com/software/ttytter /
    • Point-and-Chat
      • Windows application for those requiring Augmentative/Alternative Communication (AAC). Supports email, chat, and Twitter.
      • http://www.simtalk.com/PnC/
  • Accessible Clients: Desktop
    • Mitter
      • Linux, Windows and OS X (running PyGTK)
      • http://code.google.com/p/mitter/
    • Emacspeak 31.0 — TweetDog
      • Linux “audio desktop” application
      • http://emacspeak.sourceforge.net/releases/release-31.0.html
  • Accessible Clients: Mobile Apps
    • TweetList
      • iPhone
      • http://zooble.com/tweetlist
    • Echofon
      • iPhone (and Mac, and now Firefox and Window beta)
      • http://www.echofon.com/
    • Tweets60
      • Only on Nokia S60
      • Only with Talks reader
      • http://www.tweets60.com/
  • Accessible Clients: Mobile Web
    • Slandr
      • Mobile site, web-based
      • http://m.slandr.net/
    • Dabr
      • Mobile site, web-based
      • http://m.dabr.co.uk/
    • Tweete
      • Mobile site, web-based
      • http://m.tweete.net/
  • Solution?!
    • None of the previous clients solve the web accessibility issues with Twitter.com
  • Accessible Clients: Web
    • Easy Chirp
    • http://www.EasyChirp.com/
      • Provides a fully web-accessible and standards-compliant version of the Twitter web site.
  • Accessible Clients: Web
    • Easy Chirp works with
      • All operating systems
      • All major browsers (No JS or CSS required)
      • Mobile devices (iPhone, Droid, Blackberry, etc.)
      • Screen readers
      • Tablets
      • Text-only (Lynx)
      • Kindle
      • Low-band connections
      • Any browser-based user-agent!
  • Easy Chirp/Accessible Twitter
    • Winner of the AFB 2011 Access Award .
    • Winner of the 2009 Access IT @web2.0 Award .
    • Nominated in Blind Bargains 2009 and 2010 Access Awards (Best Blindness-related Website).
    • Nominated in.net magazine’s 2010 Best of the Web awards.
  •  
  • Keyboard Access
    • ALL links are keyboard accessible.
      • And have clear visual focus.
  • Use of Headings
    • Ideal use of headings
      • What site is this?
      • What’s my account name?
      • Where are the tweets?
      • Where is the menu?
      • In each tweet, the name the author is a heading which greatly improves clarity and navigation for screen readers.
  • JavaScript
    • Easy Chirp is fully functional without JavaScript.
      • Even works on Lynx, Kindle , etc.
  • JavaScript
    • Easy Chirp uses JavaScript to enhance behavior.
      • Progress Enhancement is paramount.
      • Hijax (Jeremy Keith).
      • Unobtrusive, of course.
  • Easy Chirp
    • Code validates.
    • Code is semantic.
    • Links clear.
      • underlines not removed
      • :hover pseudo class and :focus
      • good color contrast
    • All navigation areas are consistent.
    • Form mark-up is accessible:
      • Form fields have labels.
      • Fieldset tags include legends.
    • Layout width is flexible.
    • Custom colors are not implemented.
  •  
  • More Features
    • Search, saved search, user search.
    • Trends page.
    • Popular Links page ( TweetMeme ).
    • URL Shortener (Bitly).
    • Inline reply tweets; conversation.
    • Ajax for delete, favorite, follow/unfollow, etc.
  • More Features
    • Full Lists functionality.
    • Every page displays the user’s information.
    • No hidden links; always displayed.
    • Access keys for main menu items.
    • ARIA
      • Landmarks Roles (nav, banner, search, main, etc.)
      • Live Regions (during enter tweet).
  • Quotes from Users
    • “ 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”
  • Quotes from Users
    • “ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” [and now ARIA]
    • “ really easy with a Braille Display to use”
    • “ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!”
  • Quotes from Users
    • @yanagram Thanks for telling me about @easychirp. It's wonderful!!!! i love it from debbie gabe  (blindfoodie)
    • enjoying the minimalist charm of #easychirp from ZA Addyman  (Zaddyman)
    • At World Usability Day event @ DIAC. Discovered http://t.co/SrmuGCA7 accessible Twitter app! from caronne  (caronne)
    • Good tip from AGIMO - accessible Twitter via easychirp.com #gov2au #accessibility #ux from chieftech  (chieftech)
  • Quotes from Users
    • Just checking out Easy Chirp, an accessibility tool for twitter. VERY COOL!! #aln2011 from Disability Services  (ESCDisability)
    • Easy Chirp : web accessibility for the http://t.co/glnXM4xH website application: http://t.co/e3f6u6m4 #dc_twitter from ONOBEN  (onoben_jp)
    • Here's an accessible way to access Twitter: http://t.co/KCxzINvn Thanks @EasyChirp. #NASPAtech from Eric Stoller  (EricStoller)
    • Trying out http://t.co/Ik27mJET, an accessible twitter site. I like it, it's more like the original twitter site. from swkowk  (swkowk)
  • Future Enhancements
    • A Twitter application, especially an accessible one, is always evolving.
    • Many enhancements and features are planned including:
      • Enhance List functionality with (accessible) Ajax.
      • Inline notice and update of new tweets.
      • Reply-to-all feature.
      • Add optional services for URL shortener and photo uploading.
      • Internationalization/multi-language support.
  • Other Benefits of Web Accessibility & Web Standards
    • More usable .
    • Better functionality with assistive technology such as text browsers & Braille devices.
    • Keyboard accessibility opens gate for many other types of input devices .
    • Providing clear, consistent content and navigation benefits those with cognitive impairments (and is more usable in general).
    • Use with a mobile device is possible.
  • Guidelines for Accessible Tweets
    • Do:
    • Shorten link URLs.
    • Use simple language.
    • For hash tags with more than 1 word, captialize each word (better chance screen readers can interpret it).
    • Place pertinent info before a link.
  • Guidelines for Accessible Tweets
    • Do Not:
    • Don’t overuse abbreviations.
    • Don’t use slang.
    • Don’t overuse hash tags in a tweet; place at end.
    • Don’t use a foreign language without making it obvious (forewarn, enclosing with quotes).
  • Contact Details
    • Dennis Lembree
      • I like motorcycling, Star Wars, espresso, Woody Allen movies, and playing guitar.
    • Web Sites
      • www.EasyChirp.com
      • WebAxe.blogspot.com
      • www.DennisLembree.com
    • Twitter Accounts
      • @EasyChirp
      • @WebAxe
      • @DennisL
  • Questions?