Twitter with JAWS - New Accessibility Features

NOTE: For those of you participating in the live Webinar, the following link will open the documentation in a new browser window Opens in a new browser tab.

Allow Web Application Reserved Keystrokes

Certain interactive Web sites may offer keyboard shortcuts to perform some common tasks. For example, on the Facebook Web site you can press P to post a status, L to like a story, C to comment on a story, or J and K to scroll between News Feed stories. However, these keystrokes also conflict with JAWS Navigation Quick Keys. In JAWS Settings Center there is a check box for "Allow Web Application Reserved Keystrokes." When this check box is selected, any JAWS keystrokes that are also defined as keystrokes by a Web site will perform the site specific task instead of the JAWS command. For this to work correctly, the page must also include a line of code that tells JAWS what keystrokes are defined by the web site. If this information is not available, all JAWS commands will continue to work as expected. This check box is selected by default.


Allow Web Application Reserved Keystrokes


The Allow Web Application Reserved Keystrokes Setting in JAWS Settings Center

  1. The web application will define the reserved keystroke list in one or more block elements (<BODY>, <DIV>, etc.)
    1. The web application will use the data-at-shortcut keys attribute to define the reserved keystroke list.
    2. The web application will define the reserved keystroke list on a per document basis.
      1. If there are several elements that define reserved keystrokes, they will go into the same list related to the current document.
      2. If a keystroke is defined in several elements, the first definition will be used.

Example: <div data-at-shortcut keys = {"j": "Key to navigate to next post", "q": "Key to place focus in chat"}>

From the A11y Team

Keystrokes

Actions

New Tweet N
Like L
Reply R
Retweet T
Direct Message M
Mute User U
Block User B
Open Tweet Details ENTER
Expand Photo O
Search FORWARD SLASH
Send Tweet CTRL+ENTER

Navigation

This Menu QUESTION MARK
Next Tweet J
Previous Tweet K
Page Down SPACEBAR
Load New Tweets PERIOD

Timelines

Home G H
Moments G O
Notifications G N
Mentions G R
Profile G P
Likes G L
Lists G I
Messages G M
Settings G S
Go to User G U

Adding Alt Attributes (Descriptions) to Images

Making images accessible for people on Twitter Add image descriptions to pictures you tweet Opens in a new browser tab

NOTE: This needs to be enabled in the app's accessibility settings or in the Twitter settings for the web.

Enable Image Descriptions from Twitter.com

  1. Press INSERT+Z to temporarily turn off virtual cursor mode.
  2. Press the Twitter keystroke G S to open Twitter settings in your browser.
  3. Press INSERT+F7 to open the JAWS list of links.
  4. Press A until you locate the Accessibility link, and then press SPACEBAR to open the Accessibility section in Twitter.
  5. Press INSERT+Z once more to turn on the JAWS virtual cursor.
  6. Press X to find the check box for "Compose image descriptions."
  7. Press SPACEBAR to check the check box.
  8. Press TAB to move to the Save Changes button.
  9. Press INSERT+F7 to open the list of links, and then press ENTER on the Home link to return to your main Twitter page.

Practice

Follow along with the instructor as he demonstrates some of the features of Twitter while using JAWS.

Resources

Prior page

Next page