Accessible Twitter

By Nick DeNardis - Mon, Feb 16, 2009-->

-->

General, Social Networks, Web development

Accessible Twitter

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)

accessible twitter logo Accessible Twitter

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/


Tweet
Share StumbleUpon It! Del.icio.us reddit

Like this post? Be sure you've subscribed to the .eduGuru RSS feed or email to get all the latest news and articles.


accessible, twitter

Read Related Posts on .eduGuru:

  1. Are Teens on Twitter? And a Bunch of Other Related Data
  2. Web Development Tools. What’s in your web toolbelt?
  3. Web Development: Progressive Enhancement - Part 1

This post was written by:

Nick DeNardis

Nick DeNardis - who has written 26 posts on .eduGuru

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.

Nick DeNardis Nick's Facebook Nick's LinkedIn Bio Nick's Twitter Account Nick's Flickr Photos Nick's YouTube Profile Nick's Digg Profile Nick's Delicious Bookmarks Nick's StumbleUpon Nick's SlideShare Presentations Nick's Last.FM Music


16 Responses to “Accessible Twitter”

  1. Avatar image
    George Says:

    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.

    Reply

  2. Avatar image
    TimN Says:

    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.

    Reply

  3. Avatar image
    Bob Hodapp Says:

    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.

    Reply

  4. Avatar image
    Web Axe Says:

    Great article. Accessible Twitter really fixes these accessibility issues…can’t wait to see Beta! ;-)

    Reply

  5. Avatar image
    Josh Says:

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

    Reply

  6. Avatar image
    Mike Henderson Says:

    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.

    Reply

  7. Avatar image
    Ricky Buchanan Says:

    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!

    Reply

    • Avatar image
      Mike Henderson Says:

      Thanks Rick,

      I completely forgot about text size. Sometimes it just takes another look.

      Reply

  8. Avatar image
    Ricky Buchanan Says:

    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? :)

    Reply

  9. Avatar image
    amy_hess Says:

    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!

    Reply

  10. Avatar image
    Logica Uspeha Says:

    Wow, Nick!
    Thanks for items.
    I think that Twitter has done a big work in order to make itself better!

    Reply

  11. Avatar image
    The Agra Indian Says:

    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.

    Reply

  12. Avatar image
    avionic Says:

    This is one reason why I dont trust newbies from the Social networking market.Facebook and orkut,there that should do :)

    Reply

  13. Avatar image
    QBasic Says:

    Really useful. This article will help me a lot. Thank you.

    Reply

  14. Avatar image
    Rodger Arslanian Says:

    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

    Reply

Trackbacks/Pingbacks

  1. Web Standards, Accessibility and Other Stuff » Blog Archive » Twitter and Web Accessibility says:

    [...] issue with the site is that Twitter is not web accessible. I’ve recently been resolving this problem by writing a new web application Accessible [...]

Leave a Reply

Spam protection by WP Captcha-Free