Thursday, September 23, 2010

Using Accessible Twitter With JAWS Screen Reader

Accessible Twitter is a third-party Twitter client that is designed to be easier to use and more accessible for disabled users. I have previously blogged about using the JAWS screen reader with the standard and mobile Twitter web sites. In this post, I describe how Accessible Twitter works with JAWS 11 and Internet Explorer 8. I list some possible areas for improvement and then I give my recommendation on which Twitter site to use.
Note: If you require a refresher on navigating web pages with Internet Explorer and JAWS, see the Navigating Twitter.com Pages With JAWS section of my blog post, Tips For Using Twitter.com With JAWS Screen Reader.

General Accessibility Features

Accessible Twitter contains many features that make it JAWS-friendly. Headings are used liberally. Form fields have descriptive labels. Lists are used to group navigation links. Other structural  elements exist to communicate page structure and facilitate direct navigation e.g. landmark roles identify commonly found sections of web page content, blockquote tags surround tweet text. If you have Javascript enabled, certain actions are more efficient e.g. display of confirmation/results messages, determining characters remaining when composing a message. Content choices make the site more user-friendly e.g. the tweeter's full name rather than their username is given in image and username alt text.

Setup and Sign In

You need a Twitter account before you can use Accessible Twitter. Then you need to allow Accessible Twitter to have access to it so that it can retrieve and update data for display on the Accessible Twitter web site. To do this, go to the Accessible Twitter home page and activate the "Sign in with Twitter" link. You'll be directed to a twitter.com page that says, "The application Accessible Twitter by Web Overhauls/Dennis Lembree would like to sign you in using your Twitter account." The page contains edit boxes for your Twitter Username and Password. After typing these, tab to the Sign Up button and activate it.
The next step in the setup process is to confirm that you allow Accessible Twitter access to your Twitter account. Activate the Allow button (or the Deny button if you've changed your mind).
If you chose Allow, you will be redirected back to the Accessible Twitter home page. The setup process has signed you out, so you'll need to sign in to Accessible Twitter with the "Sign in with Twitter" link. If you are prompted for your username and password, enter them; otherwise, you'll find yourself on the Timeline page.

Site Pages

The main site pages on Accessible Twitter have links that appear in a row near the top of the page. They are contained in a 10 item list called "navTweet" below a visually hidden level 3 heading called "Tweet Menu." The first 9 links have access keys (keyboard shortcuts) assigned to them using the digits 1 through 9. So the access key for the first link (Timeline) is Alt 1; Alt 9 is assigned to Trends. Below is the name of each of these links and a brief description of what the page contains.
  1. Timeline: the most recent 20 tweets from you and those you follow; use the Older link at the bottom of the page to display more
  2. My Tweets:  your most recent 20 tweets
  3. Mentions: tweets in which @<your username> appears
  4. Favorites: tweets that you have marked as favorite
  5. DM: direct messages that you have received (Inbox, the default view) or sent (activate Sent link to view)
  6. Public: the most recent 20 tweets in the public timeline
  7. Search: contains an edit box to Search Tweets, an edit box to Search Users, and a list of your saved searches (as links to search results pages)
  8. Lists: ability to create a list, view/edit/delete your lists, view/unsubscribe subscribed lists
  9. Trends: a list of the top 10 most tweeted about topics on Twitter; activate a topic/trend link to display the 20 most recent tweets about it
  10. Links: the 15 most popular links that appear in tweets

My Profile

The My Profile link gives you access to your profile. This link doesn't appear in the navTweet list; you'll find it in the list above it, called "navMain" (which is located below a hidden level 3 heading called "App Menu"). The My Profile page contains links to: Edit Profile, Retweets By Me, Retweets of Me. The profile data are the only settings that you are able to edit on Accessible Twitter; these fields include: Name, Location, Bio and Web Site.

Tweet List/Timeline

A tweet contains the following content items:
  • image ("avatar") of user, which is a link to the user's profile page; the alt text contains the user's name
  • a thumbnail of an image ("small image") referenced in the tweet (right justified)
  • tweet text, which may contain no or several links
  • from <username>, with <username> a link to the user's profile page; the alt text contains the user's name, number of followers and number following (but that is not read by JAWS, by default)
  • several links including: user timeline, direct message, tweet message, favorite, Reply, Quote Tweet (old-school retweet), Re-Tweet; if this tweet belongs to you, some links won't be present and others will e.g. trash can for deleting the tweet
  • date the tweet was sent, which is a link to the "permanent" page for the tweet i.e. a page that contains only this tweet (and also the tweeter's profile)
  • application used to send the tweet.
Because a tweet contains so many links, you might want to choose a different element to directly navigate to each. On the Timeline page, the tweeter's name is contained in a hidden heading level 3 tag just above the tweet content items so navigating tweets by heading level 3 is one option. The tweet text is surrounded by a blockquote so you can navigate to it by pressing the Q navigation quick key and then press the down arrow key to start reading.

Composing a Tweet/Message

Several pages (Timeline, My Tweets, Mentions) contain the edit box into which you compose your tweet. Its title, "What's happening?", is a heading level 2. Note that it is a multi-line text area, so you may need to use your previous and next line JAWS reading commands to review your message. The text area is followed by the Submit button which you activate to send the tweet.
Below that you'll find a refresh page link and your most recent tweet including its time, permanent link and application used to send it.
Then you'll find the Open Shorten URL link. If you activate it, you'll open an area beneath the link that contains an edit box for you to type the web address you want to shorten, followed by a Submit button and a Clear link. Upon submitting the link, a confirmation dialog box will appear hopefully telling you that the web address was successfully shortened. Activate the OK button. Navigate back to the "What's happening?" edit box where you'll find the shortened URL appended to the end of your message.
Another helpful feature is knowing how many characters are remaining for your message. This number appears above the "What's happening?" edit box. To access it from here, press the up arrow key.
Composing a direct message on the DM page is similar except for the additional 18 character "username who is following you" edit box that appears above the "message" text area. The Twitter.com site uses a combo box containing your "followers" usernames here which is a big help to a visually impaired user who otherwise may have to use the JAWS Spell Word command (Insert Num Pad 5 twice quickly) to learn how it is spelled in order to type it in. However, the username is prefilled if you select the direct message link associated with one of the user's tweets or from the Followers page.
The send a "tweet message" feature takes you to the Timeline page, and pastes "@<username>" into the "What's happening?" edit box.

Replies and Re-Tweets

Replying to a tweet  causes a page to display that contains an edit box prefilled with "@<username of Tweeter>". Type your reply and activate the Submit button. The Shorten URL feature is also available here. If you need to remind yourself what the tweet said, it appears below the Open Shorten URL link; use the blockquote navigation quick key (Q) to navigate directly there. A reply causes the tweet to have a "Responding" link appear at the end of it by which you can view the tweet to which this tweet is responding.
Each tweet has both a "Quote Tweet (old-school retweet)" link and a "Re-Tweet" link. Selecting either of these causes a page to display that contains an edit box prefilled with the text of the tweet, preceded by "RT <username of Tweeter>". The difference is that with the Re-Tweet, you aren't allowed to modify the text (and for some reason this makes it impossible to access via the E navigation quick key so use the Form Fields List instead). You should check the characters remaining count and if it is negative, use the "Quote Tweet" feature. Activate the Submit button to send either type of re-tweet.

Possible Areas For Improvement

Only user testing will tell if the following significantly affect the usability of the site.
Overall, page elements have been labeled very well but some improvements could be made. The heading for the "Go To User" feature is called Menu which is too generic. The alt text for a Twitter user's image is "avatar for <username>"; image is a more common term and because the username is already displayed in the tweet, it would be better to put the user's full name into the alt text so that it is present in the JAWS Links List. Also, if the name appears first (e.g. Linda Tauscher's image), the JAWS user can more quickly navigate to a tweet from this user by pressing the first letter of their name when in the Links List.Headings on the site are plentiful and do a reasonably good job of conveying the page's structure. Because JAWS allows navigation by heading level (e.g. press "3" to move to the next level 3 heading), it would be helpful if heading levels were consistently applied across all pages. This is true for the tweeter's name heading on all pages except for the Direct Message page; here the name is a heading level 4 whereas it is a heading level 3 elsewhere. Also, having the user's full name in the heading is very helpful; however, the Search results page displays the username instead.
If Javascript is disabled, the confirmation message isn't displayed for a delete action; it would be best if the interface operated consistently when Javascript is both enabled and disabled.
The site does a good job of limiting actions to those that are permitted. For example, a user can only delete their own tweet, so the delete link is only found on the sender's tweets. But the direct message link appears for all users on the Timeline page, whether they are a follower or not. Sending a direct message to a non-follower doesn't work (an error message is displayed) but the presence of the link makes it appear as if it could.

Twitter Site Recommendation

Of the three web sites that I have reviewed with JAWS and IE 8, Accessible Twitter is the site that I recommend for JAWS users. It is much more accessible than the standard or mobile Twitter sites which means that it is efficient to navigate the site and page content, and actions/features are easy to discover and possible to perform in an efficient manner. It is also more usable in general; for example, the pages are task-specific and are thus less cluttered. Finally, Accessible Twitter offers additional features that make using Twitter more efficient e.g. Shorten URL. Other than some possible areas for improvement that I've identified, the only real downside to Accessible Twitter is that you cannot use it to modify most of your Twitter settings. Still, this is a task you're likely to do during the sign up process and then infrequently after that.
Mobile Twitter has a simple design but was clearly designed for mobile devices with a visual display; thus it lacks the structural markup that JAWS relies upon to aid in navigation and semantic comprehension (including descriptive alt text for important images!). Also, while JAWS can function well with Javascript, Mobile Twitter lacks Javascript whereas the Javascript on Accessible Twitter really enhances the user experience; it makes composing a tweet within the 140 character count easy, it displays confirmation dialog boxes to confirm irreversible actions and makes the display of results messages more efficient. As with Accessible Twitter, the mobile version does not allow you to edit your settings.
The standard Twitter web site gives you access to all features (except Shorten URL) but some of them aren't accessible or easily accessible. It isn't possible to mark a tweet as a favorite and replying to a tweet or retweeting are best to do on the tweet's "permanent" page which is less convenient. The form fields for signing in appear in a pop up dialog box that can be challenging to access via the keyboard. Some page elements aren't well labeled.
Many thanks to Dennis Lembree of Web Axe for taking such great care in creating Accessible Twitter, a web site that not only makes using Twitter a joy for JAWS users but serves as a model of best practices for accessible web development.

No comments:

Post a Comment