Accessible Twitter: Advancement through technology

Ever wondered what “Vorsprung durch technik” means? If you remember the Audi adverts in the UK from the 1990s, you’ll know it stands for excellent design and precision engineering. It actually translates as “Advancement through technology”, a concept that neatly sums up Dennis Lembree’s work on Accessible Twitter. Accessible Twitter is a wonderful example of accessibility in motion. It’s based on Twitter’s API, so you log in with your usual username and password. After that, the experience is remarkably different from Twitter’s own rather mediocre website.

So what makes it different?

All the usual features are there, including your tweet roll, messages, mentions and status updates. You can search for #tags and people, view the everyone timeline, and browse through popular links. It’s the way that all those features are presented that makes Accessible Twitter different. All links are keyboard accessible. Links to direct message, reply, retweet, and mark as favourite, are all visible by default. The site is built to follow web standards, and each page feels lean on code and perfectly fit for purpose. Headings, forms and data tables are all marked up properly, and page titles are useful. The real magic comes with JavaScript though. Firstly, because the whole site functions perfectly without it enabled at all. Secondly, because when JavaScript is available, Accessible Twitter offers some excellent progressive enhancements.

Progressive what?

Progressive enhancements are additional touches on a website, often JavaScript based, that give a little extra something to the user experience. Always accessible in their own right, progressive enhancements build on underlying accessible features, and enhance them for even greater usability. Accessible Twitter gives an audio cue when you type in a tweet. As the number of characters you have left dwindles, the website simply tells you how many are left. The site also uses AJAX to make accessing the Twitter API more efficient. When you complete an action such as following or unfollowing someone, a helpful alert message is displayed to let you know. In both cases, if you don’t have JavaScript enabled, the website falls back to an accessible basic format. The number of characters left in your tweet can be found next to the edit box, and confirmation messages can be found in the body of the web page itself. Accessible Twitter also uses new technologies to provide even more accessibility. Built into the framework of each page are a number of ARIA landmarks.

ARIA what?

Accessible Rich Internet Applications (ARIA) landmarks are for people who don’t use a mouse, and for screen reader users. Landmarks are key areas of a page, such as the navigation, search, or main content area. ARIA makes it possible for keyboard only users and screen reader users (providing their screen reader has ARIA support), to jump between each of the different key areas of a page at a single keystroke. For example, people using the Jaws screen reader can use the ; key to jump from one landmark to the next. When a landmark is reached, Jaws announces “Navigation landmark”, “Search landmark” and so forth. Accessible Twitter makes use of these ARIA landmarks to provide yet another way of navigating through each page.

So why didn’t Twitter do all this?

Good question. I wish I knew, although I have my suspicions of course. They either didn’t think, didn’t know, or didn’t care. Actually, Twitter didn’t do a bad job. They just didn’t do a damned good job like Dennis Lembree has done with Accessible Twitter. In other words, the Twitter website is not inspiring. Accessible Twitter on the other hand is a glorious example of advancement through technology.