Tuesday, September 14, 2010

Tips For Using Twitter.com With JAWS Screen Reader

While the Twitter.com web interface is quite usable with the JAWS Screen Reader, it does have a few keyboard accessibility issues. Below are some tips based upon my experiences.
Note: I am assuming that you have some knowledge of Twitter.com, perhaps gained by listening to some/all of the podcasts that are available. I have summarized these in my blog post, Resources For Getting Started With Twitter Using JAWS Screen Reader.

Navigating Twitter.com Pages With JAWS

Navigation Quick keys are a letter that you press on the keyboard that moves you to the next element of that type on a web page. So when I tell you to move to a Heading, press H; move to a List, press L; move to a list Item, press I; move to an Edit box, press E; move to a Button, press B; move to a Table, press T; move to the a Combo box, press C.
Another navigation strategy is to display a list of page elements of a particular type. You can press any navigation quick key with the Insert and Control keys to display a list of that element. So to display a list of Lists, press Insert Control L; for Tables, press Insert Control T; for Edit boxes, press Insert Control E. The following elements are so frequently used that they have specific function key assignments:
  • display Links List: Insert F7
  • display Headings List: Insert F6
  • display Form Fields List: Insert F5
Using Twitter involves interacting with forms so you need to become proficient at knowing which cursor is active. Recall that the Virtual PC Cursor is usually on when the web page first displays; it allows you to tab between links and use the Navigation Quick keys. The other cursor that you’ll typically use is the PC Cursor; it lets you tab between form controls and interact with them such as typing text into an edit box. Sometimes when you navigate to a form control, JAWS will automatically switch to forms mode whereby the PC Cursor is active. If not, enter forms mode manually by pressing the Enter key; you’ll hear a sound when forms mode turns on and off. You may need to exit forms mode (and thus switch from the PC Cursor to the Virtual PC Cursor) to access static text or links on the page; do this by pressing Escape or NumPad Plus. If you are having difficulty displaying a list of elements (e.g. Links, Buttons), it may be because you're still in forms mode so press Escape to switch back to the Virtual PC Cursor and try displaying that element list again.
Several pages on Twitter.com use a Table to display the main content on the page e.g. settings form fields, user/People search results, followers and following usernames. You can always use the down arrow key to move through the table but it might be more efficient to use one of the following commands:
  • next/previous row: Windows Key + Down/Up Arrow
  • current row: Windows Key+ Num Pad 5
  • next/previous cell: Ctrl + Alt + Right/Left Arrow
  • cell below/above: Ctrl + Alt + Down/Up Arrow
  • current cell: Ctrl + Alt + Num Pad 5

Site-wide Pages

Headings exist on most pages and for many sections on a page, so use the Headings list to browse and access these.
Related links are grouped into lists, so use the Lists List to browse and access. It can be difficult to determine what the list is about by browsing the Lists List because it displays the list item text. Some lists have names or titles that appear above them so if you are confused by what you're hearing, go to the list and use your up arrow key to find the title. Use the list Item command to navigate through the list once you get there.
Form fields can be browsed and accessed via the Form Fields List.
Access keys have been assigned to major pages on the site. You'll hear them announced when you are on a link that has an access key. You'll also hear them when browsing the Lists List and the Links List. In Internet Explorer, access keys consist of the Alt key followed by a letter e.g. Alt H for the Home page. Remember that you must press the Enter key after typing the access key to go to the page.

Twitter Home Page

You go to Twitter.com to either sign in or sign up. The form fields for signing in appear in a pop up dialog box that can be challenging to access via the keyboard. I've found the most foolproof method is to use the Form Fields List to locate the Username edit box. From here, tab to the Password edit box and Sign in button.
To create an account, use the Sign Up link.

Sign Up Page / Create An Account Page

This page contains several form fields that you need to complete which is tricky with JAWS because to the right of the 4 edit boxes (which appear in a table), a help or validation message is displayed that you'll skip over when tabbing in forms mode. Also, the message is updated as you type into the edit box (e.g. to tell you that the username is OK versus already taken) so you need to wait a few moments for the form field to be validated and ensure that you read it. Do this by using your down arrow key to leave the edit box; if you don't hear the message, back up with the up arrow key. You may need to down and up arrow a few times to ensure that you've read the message. Also, arrowing in this way will give you access to a text description of the field that may appear below it e.g. Your full name will appear on your public profile. When you get to the Terms of Service text area, you'll want to tab out of it unless you want to read the entire document.  Also, be aware that the "send me email updates" check box is enabled by default and while it visually appears after the Create my account button, it precedes the button in the tab order.
When you activate the Create my account button, the CAPTCHA appears in a pop up dialog box that can be challenging to access via the keyboard. You'll want to complete the audio CAPTCHA by activating the "Hear a set of words" link; I've found that the Links List is the easiest method of locating this link. After typing the words you hear into the edit box, locate the Finish button with the Form Fields List.
If you've been successful thus far, your account will have been created and you'll be taken through 3 steps to help you locate Twitter users to follow. (Note that these steps are optional; all of the tools you are introduced to here are available once you sign in to your Twitter.com account.) Step 1 of 3 is entitled "browse interests"; selecting a link on a particular topic will display Twitter users associated with it that you can choose to follow. Look for the "Next step: friends" button when you are ready to move on. Step 2 of 3 is entitled "Find your friends"; you can select an email service (Gmail, Yahoo, AOL, LinkedIn) to have it scanned for any contacts that are on Twitter.  Look for the "Next step: search" button when you are ready to move on. Step 3 of 3 is entitled "Search for anyone"; the page contains an edit box into which you can type a Twitter username, first name, last name, business name, etc. Look for the "Next step: you're done" button to complete this part of the sign up process.

Sending a Tweet, Direct Message or Reply

Depending on what type of message you are sending, there will be a heading that identifies it e.g. What's happening? for a tweet. Just above the edit box on its right-hand side, you'll find a count of how many characters are still available; use your up arrow key when you are in the edit box to hear the count. Then use down arrow to get back into the edit box. Use your JAWS reading commands to read what you've typed thus far e.g. read current line with Insert Num Pad 8. When you are ready to send your message, tab to the button which may be labelled Send or Tweet.

Replying to a Tweet or Retweeting

The easiest way to either reply to or retweet a particular tweet is to locate the tweet and activate its date/time link. This displays the tweet on a separate page that contains Reply and Retweet links.

Sending a Direct Message

The easiest way to send a direct message is from your Direct Messages page. Find the link for it in your Sidebar or use the Alt D access key. You'll find a combo box listing the usernames of your followers above the message edit box. Use down arrow to select the username and then tab to the edit box. This page also contains a list of direct messages. By default, that list will be set to your Inbox i.e. messages you've received. Use the Sent link to display the list of messages you've sent.

Following and Followers Pages

From your Profile page, you can access pages listing your followers and who you are following. But these links are difficult to find because they are preceded by the number e.g. 8 following. A strategy to find these links is to locate the Favorites link in the Links List, then up arrow until you hear the following/followers link name. Users on these pages appear in a 3 column table.

Find People

The results from your search appear in a table. So you can use the next row command to browse through the results. Each search result consists of 2 links that take you to the user's profile: their image and their username; so you can use the Links list to access the results as well. Each user has 3 buttons and the button labels contain the username, so you can use the Form Fields list to find the Follow, Manage Lists or Actions button for a particular username. The Follow button toggles following on or off. Activating the other 2 buttons opens a list; for Actions, the list items include variations on the Mention, Follow, Direct Message and Block commands.

Settings Page

There are several pages of settings that you can modify. The Settings link takes you to the Account settings by default. These pages contain a list of the links for all settings pages e.g. Account, Password, Mobile, Notices, etc. Use the Form Fields List to find the fields; they appear in a table. After making changes, be sure to activate the Save button.  Some fields may have static text below them so be sure you've read it by using your arrow keys.


I was unable to use JAWS and keyboard navigation to mark a tweet as a favorite. When the keyboard focus is on a tweet on the Home page, I can use the Activate Mouse Over JAWS command (Insert Ctrl Enter) to display the additional information that appears when the mouse hovers over a tweet; this includes a Reply link, a Retweet link and the Favorite star image that is clickable. But I cannot tab to the Favorite star to activate it. It is possible to favorite a tweet on the mobile.twitter.com site but that is a topic for a future blog post.

No comments:

Post a Comment