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 https://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: https://accessibletwitter.com/
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.
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.
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.
Great article. Accessible Twitter really fixes these accessibility issues…can’t wait to see Beta!
Sounds like a great idea, although I’ve never really heard these complaints about twitter before.
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.
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!
Thanks Rick,
I completely forgot about text size. Sometimes it just takes another look.
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?
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!
Wow, Nick!
Thanks for items.
I think that Twitter has done a big work in order to make itself better!
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.
This is one reason why I dont trust newbies from the Social networking market.Facebook and orkut,there that should do
Really useful. This article will help me a lot. Thank you.
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