Accessible Twitter

16 Feb 2009

I wanted to bring attention to one of my passions, accessibility, and a project which aligns right to it.

Twitter has become one of the most popular and quickest social networks to integrate your university or business with. You would think the simple 140 character limit messaging service would be available to all but there are a few issues that are hindering a certain user group in this powerful network. This group is not intentionally neglected online but because programmers are more concerned with adding features that require a certain level of ability and managers are more concerned with saving a buck or a few hours of time this group gets overlooked.

The issues with twitter.com are not as crippling as an “all flash” site but these small details show when developers understand accessibility and have an attention to detail. Don’t get me wrong, twitter.com is far more accessible than a great deal of sites out there. Below is a list of a few of those details, you might not agree with all of them but its these details which make the difference.

Some Twitter.com Accessibility Issues

No keyboard access to favorite/reply/delete
Lack of headings
Favoriting requires Javascript
Custom colors may not be readable
Code doesn’t validate
Code could use better semantics
Password field is missing a label;select lang missing label
Fieldsets used without legends
Layout width is static not flexible; doesn’t “stretch” with browser width
JavaScript required for details on latest tweet (time, in reply to)

A great site created by Denis Lembree which is currently in alpha stage aims to fix these issues. Using purely the public twitter API Dennis has created an accessible version of Twitter. The site http://accessibletwitter.com/ aims to fix all of the issues above and continue to support and advocate for twitter to be accessible to all. Below is the current progress of the project.

Items Implemented

All links are keyboard accessible
Simple, consistent layout and navigation
Works with or without JavaScript
Large default text size and high color contrast
Looks great in high or low resolution
Forms are marked up for optimal accessibility
Code is semantic, light, and adheres to Web Standards
+ More every day

Are these issues going to hinder Twitter from going mainstream? No, but our job as web professionals is to be the best at our craft and that means including everyone. Take a look at the recent Yahoo! article WebAIM Survey Shines Light on Screen Reader Usage to get an idea of the usage of these elements by screen reader users. Most web developers/project managers have never seen a user use a screen reader on their site, if you are interested in watching one there is a video available from the November 19th Refresh Detroit meeting, it’s pretty interesting stuff.

A users experience goes beyond their visit to your site, if something is hard to use they will tell their friends, make sure ever users experience on your site is a positive one, they will thank you.

Checkout Accessible Twitter at: http://accessibletwitter.com/

About the author

Nick is the Associate Director of Web Communications at Wayne State University by day. By night he hosts the video blog EDU Checkup where he reviews higher education web sites live. Nick is an active member of the higher education web community and is an officer of Refresh Detroit, a group of web professionals whose goal is to promote web standards, usability, and accessibility.

This post was written by Nick DeNardis - who has written 31 posts on .eduGuru

http://stlcc.edu George

Well said Nick. As you mentioned, Twitter is not the worst but we all should strive to make our sites as user friendly and accessible as possible.
http://insidetimshead.wordpress.com TimN

Thanks for bringing this up. Twitter’s lack of keyboard access — as well as reduced usability on mobile devices — has bugged me for a while. One of our student bloggers is legally blind, and how she navigates the faulty poorly designed hodgepodge we call the Web so well amazes me. I think of her and many people with accessibility as real go-getters who impress the heck out of me … it’s Web designers who don’t think of accessibility who are decidedly less impressive.
Bob Hodapp

Twitter also restrictions names to 20 characters, this means that many people in the rest of the world, especially those with name Christopher won’t be able to even identify themselves on twitter.

Too bad Twitter doesn’t care about accessibility, internationalization and the rest of the world.
http://webaxe.blogspot.com Web Axe

Great article. Accessible Twitter really fixes these accessibility issues…can’t wait to see Beta!
Pingback: Web Standards, Accessibility and Other Stuff » Blog Archive » Twitter and Web Accessibility
http://www.onlinebankratings.com/bankonelocations.htm Josh

Sounds like a great idea, although I’ve never really heard these complaints about twitter before.
Mike Henderson

I disagree with: “Layout width is static not flexible; doesn’t “stretch” with browser width”

I think Twitter’s fixed width works quite well with Typography/Usability issues. Short multiple line paragraphs are lots easier to read. Could you imagine a browser window displaying Twitter at 1500px wide with a fluid or elastic layout? Each tweet would be in a single line, would be harder to read, and a lot of wasted white space. (I just tried this with Twitterific and over 2/3 of the space was white/wasted space)

I guess I’m confused on how browser width fits into accessibility.
http://atmac.org/ Ricky Buchanan

Mike, I’m a Twitter user with low vision so I need a really large font size to be comfortable reading text. And by “really large” I mean in the 100+ point size range. I still have sufficient vision that it’s far better for me to use text than audio to access most computer things, but I have to enlarge stuff.

I’m sure you can imagine what happens to 128pt text on a layout like Twitter.com’s default – it ends up with the display showing only 1-2 words per line and therefore being many many screens long. If the width could be specified in terms of em/ex values so the width increased when users increased the font size, this would solve the problem I’m having.

As it is I use Firefox with Stylish usually, so I’ve just told it to remove all Twitter.com’s style sheets and use my own generic style sheet to set the text out the way suits me best. It works for me, but that’s pretty advanced stuff in terms of your “average user”. It’s not a solution that an average user could – or should have to – implement.

I have been very enthusiastically testing out AccessibleTwitter every few days to see the improvements occurring. It’s developing really well and is usable for all the basic stuff now which is fantastic!
- Mike Henderson
  
  Thanks Rick,
  
  I completely forgot about text size. Sometimes it just takes another look.
http://atmac.org/ Ricky Buchanan

No harm, no foul – there are so many sides to accessibility and many people forget the less obvious ones because screen reader accessibility is the most discussed and most obvious. Aside from screen readers and low vision users there’s mouse only users, keyboard only users, switch users, speech input users, deaf users, hearing impaired users, deafblind users, dyslexic users, mobility impaired users, and many more. Ahem, can you tell that I blog about accessibility as well as living it?
amy_hess

I am a tech integrator for a school district, and I am working with teachers who are learning accessibility possibilities for a blind first grader. I am hoping that the internet will become more accessible for her over time. Your post helped me to see what kinds of considerations we need to be aware of in all applications that we integrate into our classrooms. Thanks!
http://vsocorp.com/ Logica Uspeha

Wow, Nick!
Thanks for items.
I think that Twitter has done a big work in order to make itself better!
http://www.agramycity.com The Agra Indian

Keyboard shortcuts are prime concern as most of the people in the word are running out of time and mouse click take more time the keyboard shortcuts as users are friendlier with the keyboard.

While writing some text using keyboard if you have to access a link then mouse is more time consuming and just pressing a key combination is little bit more time saving.
http://imagination.isgreat.org avionic

This is one reason why I dont trust newbies from the Social networking market.Facebook and orkut,there that should do
http://www.qbcafe.net QBasic

Really useful. This article will help me a lot. Thank you.
http://jlynch97.typepad.com/blog/ Rodger Arslanian

By far the most concise and up to date information I found on this topic. Sure glad that I navigated to your page by accident. I’ll be subscribing to your feed so that I can get the latest updates. Appreciate all the information here
Pingback: Easy Chirp – Accessible Twitter | MQAS
Pingback: Articles on Accessible Twitter | Web Axe
Pingback: Twitter and EasyChirp | mmcaps12

Subscribers
2745
4971

Posts By Author

Categories and Archives

Latest from twitter

follow on twitter

About .eduGuru

.eduGuru is a blog for the higher education community, focused on web development and web marketing. We strive to provide a forum thoughtful and helpful information and discussion, and readily invite all of our readers to take part with us both here, and at events offline.

Accessible Twitter

Some Twitter.com Accessibility Issues