Twitter.com relaunched with a new look and feel on July 15th. Aiming to be more responsive on desktop, the website simulates a progressive web app. As with any major change on the web, there will be supporters and those who wish that the social media platform would #BringBackLegacyTwitter. One aspect of the user experience missing from reviews is that of accessibility for people with disabilities. The behavior of the new Twitter.com on modern Windows browsers has led to a regression in accessibility for screen reader users.
As a screen reader user for 20 years, a communications specialist with Knowbility, and a journalism professor at Cal State Long Beach, there’s a thing or two I’ve learned about web accessibility. Below are some thoughts on the ways the new desktop layout on Twitter.com hinders the user experience for people with disabilities.
The Most Critical Issue with the new Twitter
In their blog post Building the New Twitter.com, Charlie Croom and Gregory Baker of the Twitter engineering team explain that on the new website browsers will only download content and run specific code as the information is needed. “So a mobile user won’t download the sidebar you see on the home page, and may not download the settings pages until they go to update their display name,” they write.
Use of responsive web design does not negatively affect the performance of screen readers. The problem with the new Twitter website is that information throughout the page is constantly updating based on which part of the webpage is visible to the browser.
A Simple Definition of Screen Readers
Before continuing, an explanation of the way that screen readers work is in order. Screen readers use browser accessibility APIs to interpret the HTML and dynamic content of modern webpages and web apps. This information is then stored in a virtual text buffer. Using keyboard or touch screen commands, the user accesses the web content by listening to synthetic speech, reading from a braille display, or by consuming both speech and braille output. As long as controls are correctly labeled—links have useful link text, buttons have meaningful names, images have descriptive alt attributes—someone using a screen reader can have a comparable experience on the web.
The author, Anthony Vasquez, uses screen reader technology to browse the internet.
The Problem with Dynamic Content on Twitter
In the case of Twitter.com, focus within this buffer is constantly moving. Normal behavior would allow for reviewing of text by using the arrow keys to move by line up and down a Twitter feed. This works for a while, but if I move up several times to review a tweet more recent than the one currently being focused, the information may not be available. This makes for inconsistent access to information.
Why Screen Find is No Longer a Viable Option
One quick way to get to information with a screen reader is to use the screen find feature found in most screen readers. As an aside, screen find is built into most browsers so that everyone regardless of ability can search webpages large and small. Given the large amount of information present in an active Twitter feed, screen find was particularly useful. Twitter places a time stamp next to each post indicating how old the tweet is, “15 minutes ago, 1 hour ago, Aug 1,” for example. This exact label is not displayed on the screen. A hidden label has been added for screen reader users. The on-screen equivalents would be “15m, 1h, Aug1” respectively.
So, performing a screen find for the word “ago” was an efficient way to move among recent tweets up to 24 hours in the past. In legacy Twitter, the further one surfed into the past, the more tweets would be loaded. At the same time, the top-most tweet was preserved on the page. Moving between a minutes-old tweet and one from a few days or weeks ago was a breeze.
Now, this technique is unreliable. Because only certain parts of a page are revealed to the browser at any given time, using the arrow keys to move by line or issuing a screen find for key words is out of the question.
Enter IE 11
What to do? The accessibility barriers mentioned in this article apply to my experience with the screen readers JAWS and NVDA on the latest versions of Chrome and Firefox. The experience on Edge is also far from ideal. Yet, on IE 11, these issues are not present. I can move among tweets just fine. Bringing up older tweets, albeit somewhat slower than what I was used to, still happened. On the other hand, multimedia content such as embedded videos cannot be played.
Closing Thoughts
One should not be forced to use outdated technology in order to do one’s job or enjoy the web at leisure. The way that the new Twitter has been forced on everyone without the option to opt out, makes IE 11 the only viable way to continue using Twitter at anywhere close to the speed of the legacy experience. This is especially frustrating because, as stated in the Twitter engineering post, “Our goal was to create one codebase - one website - capable of delivering the best experience possible to each person.”
Twitter has failed in that regard. This reminds us to keep users of all abilities in mind when building or re-building products.
Thanks to Becky Gibson, accessibility strategist with Knowbility, for help with this post.
If you have questions, comments, or want to add your perspective, please let us know via email or on Twitter @knowbility. And, if you need help with all the other tasks related to accessible design, development, and leadership support, we’re here for you.
