EASI Webinar on Accessibility and Twitter

I attended this webinar on Monday, and captured notes to “liveblog”. I was asked if it is liveblogging when you don’t post it until a couple days later. In my book, I am going to count it as liveblogging if I had computer or life problems that prevented me from posting it sooner! So here it is. Lucky for all of you, while I was fighting my computer and getting sick, Dennis posted the slides, so you get the slides and my notes, both!

Twitter and Web Accessibility
Dennis Lembrée

issues with twitter
accessible twitter application
guidelines for accessible tweets

What’s Twitter:
“Free social networking and microblogging service that enables its users to send and read text-based messages of up to 140 characters.”


Find 3 items on the Twitter sign in page that could use improvement

1. click here (several
2. no submit button, Javascript
3. text links not underlined
4. poor color contrast
5. “forgot” what?

– not keyboard accessible
– poor use of headings
– core functionality requires JavaScript

Keyboard access
– cannot access favorite, reply or delete links
– mouseover activated, not tab or keybaord accessible

– missing headings when browsing in headline outline view
– what page is this?
– whose account is it?
– where are the tweets?
– where is the menu?
– why is the footer under the heading “create a new list”?

Reply to tweet works without JS
Does not:
– fave
– delete
– trending
– followers
– following
– lists
– follow/unfollow/block/spam >> so inaccessible he can’t even figure out what it is for

Other issues

– code doesn’t validate
– code needs better semantics
– links unclear (underlines, hover state pseudo class effects but no focus, poor color contrast)
– sidebar navigation is inconsistent
– form markup needs help (form fields missing lables, fieldset tags used without legends)
– layout width is static not flexible
– custom colors may not be readable (need to allow enduser to reset colors, the myspace effect)

Colour Contrast Analyser (Paciello’s???)
summary of failures
luminosity contrast ratio – failures > 85
Can also use another color analyser, but I missed the name

Accessible Twitter: http://www.acessibletwitter.com/
Slandr: http://m.slandr.net (mobile)
Quitter: http://qwitter-client.net/
Twinbox (previously McTwit): http://techhit.com/Twinbox (Outlook plugin)

** Accessible Twitter **

standards compliant
winner of 2009 Access IT @web2.0 Award
ARIA markup too new – doesn’t validate
Blind Bargains access awards
keyboard accessible

– site IDd
– acct name IDd
– message box IDd (latest tweet / shorten URL)
– Tweets IDd
– TweetRoll: indiv tweet author IDd (clarity & navigation 4 screen readers)
– Footer has own heading

– No Javascript required, only used to enhance functions
– Hijax (Jeremy Keith)
– unobtrusive (no inline, external silos are best)
– can add CSS/CSS3 to enhance and make pretty

– search, saved search, user search
– trends page
– popular links (TweetMeme)
– all pages display logged in user info
– no hidden links (link to tweet’s PURL, fave, reply, RT)
– ARIA landmark roles (nav, banner, search, main, etc)
– skip links
– form fields

Illustrations of needs
major web service can be made accessible by one man, not a team
– easy with braille display
– keyboard accessible = touch accessible
– works in Lynx
– more mobile accessible, shows followers
– clear & easy w/ dyslexia

Future enhancements
– Twitter lists
– caching trends / popular links
– better error handling (Twitter API has some issues)
– functionality to upload pics from Twitpic / yFrog
– OpenAuth (instead of Basic)

BENEFITS of accessibility
– more usable
– better functionality w/ assistive tech – text browsers, braille devices, screen readers
– keyboard accessiblity opens door for various input devices
– clear consistent content and navigation benefits those iwth cognitive impairments
– better mobile device accessibility, more possible

– don’t overuse abbreviations
– shorten link URLs
– use simple language
– don’t use foreign language without making it obvious (enclose with quotes)

I (pfa) don’t agree with the foreign language recommendation. I recommended also looking at:
Tweak the Tweet: pfanderson.posterous.com/cool-toys-pics-of-the-day-tweak-the-tweet-cri

On Twitter:

Web Pages:
WebAxe: webaxe.blogspot.com
Web Overhauls: weboverhauls.com
Dennis Lembree: dennislembree.com


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s