How to Test Your Website’s Accessibility With JAWS

When it comes to web apps and websites, the user experience is one of the key elements that helps in user acquisition and user retention. Though immense attention should be given to the design and development of new product features, a continuous watch should be kept on the overall user experience. An inaccessible website would give your customers — who use screen readers — an unpleasant and tiresome experience. 

How do you mitigate or completely solve this problem? By testing for accessibility issues. In this article, I outline ways to test the accessibility status of your website using the world’s foremost screen reader, JAWS (Job Access With Speech).

Using JAWS

The first thing to do is start up JAWS. Then, proceed to open up your browser. JAWS is a tool that utilizes keyboard shortcuts, so it’s important to know what those shortcut keys are and what they do.

Shortcuts in JAWS 

First off, there’s the JAWS modifier key (a key that is used in combination with many other keys for enhanced capabilities) Insert. I recommend changing the default modifier key to Caps Lock (for proximity and familiarity’s sake). Please do the following:

• Press Insert + F2, then select "Settings Center" and press OK. With the Settings center open, navigate to Keyboard > General. Under JAWS Key for Desktop Layout, select "Caps Lock"
• To toggle Caps Lock functionality while JAWS is running, press Caps Lock twice

For ease of understanding, we’ll refer to the modifier key as JAWS.

Essential Shortcuts for Reading Web Content

• JAWS + ↓: Say All
• JAWS + ↑: Current line
• JAWS + ←/→: Previous/next word
• Page Up/Page Down: Increase/Decrease voice rate while using Say All
• Ctrl: Stop reading
• ↑: Previous line
• ↓: Next line
• ←/→: Previous/Next character
• F5 / Shift + F5 - Page refresh / Hard page refresh (If you get lost, this is how you can start over.)

Single-Key Navigation Shortcuts

To navigate through links, headings, buttons, etc., you can use the following keys, provided the website is correctly structured and well organized.

• Tab: To navigate forward and backward (or upward and downward) through links and form elements on a page
• H: Headings
• 1-6: Headings level 1-6
• F: Forms
• T: Tables
• B: Buttons
• R: Landmarks
• L: Lists
• I: Items in a list

To navigate through elements in reverse order, use the Shift + single-key shortcut. To display a list of a type of element (e.g., Ctrl + JAWS + T for a list of tables), use the Ctrl + JAWS + single-key shortcut.

Other Navigation Shortcuts

• JAWS + F6: List of Headings
• JAWS + F5: List of Form Elements
• JAWS + F1: Help with current element
• JAWS + F7: List of Links
• Ctrl + Home: Top of the page
• Ctrl + End: Bottom of the Page (Shift + Tab when you are at the top of the page will go to the last link or form element on a page)
• Alt + D or F6: Browser address bar

Navigating Forms

JAWS reads the form control's label when it gains keyboard focus, followed by the type of form control. JAWS presents items contained in a fieldset with a legend as a group and reads the legend when you first navigate to any of the items in a group that has a legend.

To interact with form controls use the following browser keyboard controls:

• Tab and Shift + Tab: Navigate through form controls
• Space: To select and deselect checkboxes
• ↑/↓: Selects from a group of radio buttons
• ↑/↓ or the first letter of an option: Selects an option in a combo box
• Enter: Submits a form

More on Forms

Due to the fact that screen readers use many keys on the keyboard for navigation, interacting with a widget or filling out a form presents a challenge. For instance, if you press the "L" key, how does a screen reader know whether you want to go to the next list or enter the letter L in a textbox?

JAWS solves this problem by letting you toggle between two modes. In the "Virtual Cursor" mode, you can read and navigate the web page by pressing the "I" key.  Whereas, in "Forms Mode," most keystrokes are passed to the browser — that is, the "I" key places the letter I in a text box.

If you are using the Tab key to navigate, JAWS will toggle between these modes based on the type of content that has keyboard focus. The change to Forms Mode is announced by a high-pitched beep. When you click on a text box or other widget that requires keyboard interaction, this occurs. Changing back to Virtual Cursor is indicated by a lower-pitched beep.

Conclusion

I recommend that you review this page and practice navigating it using JAWS. Once you get a hang of it, you can proceed to analyze your website for visual element accessibility using JAWS.