EXERCISE: If you are participating in the live webinar, please open this page outside of the training room and follow along with the instructor. If you are participating via the recorded archive you do not need to do this, since the archived recordings are already running in your browser, not the online training room.
JAWS and MAGic users will experience:
Widget = A small element on a Web page or in a Web-based application, such as a text box, button, slider control, or other item that can be changed by the user.
ARIA was designed to insert information useful to assistive technologies into existing HTML code. Adding ARIA support to a Web page does not change the presentation or behavior of the Web page to sighted users. The browser plays a big role in interpreting ARIA markup. It is the browser (Internet Explorer, Firefox, etc.) that passes the ARIA information to the screen reader. Then the screen reader tries to present the information in a meaningful way to screen reader users. As a result, there are several things that can determine the type of experience you may get from Web pages marked up with ARIA:
It is a good idea to compare results with different browsers when testing ARIA. You should consider installing Mozilla® Firefox® if you have not already done so. You can find a Mozilla Firefox download link here. It is free and can be installed (and even run simultaneously) on the same computer with Internet Explorer.
JAWS presents Web pages using the JAWS Virtual Cursor. This allows users to read and navigate a Web page as though it were a text document. Users press the ARROW keys to read line by line, word by word, character by character, and so on. JAWS also provides Navigation Quick Keys, which are alphanumeric keys that move the Virtual Cursor to features of the page such as links, headings, and form controls. In addition, users can press the TAB key to move between focusable elements on the page.
Using the ARROW keys or navigation quick keys to change the position of the Virtual Cursor does not change the actual focus point in the application. This means that even if JAWS reads the text of a given link on a Web page for example, that link doesn't necessarily have the keyboard focus.
NOTE: The keyboard focus is typically represented visually as a highlighted area surrounding a control.
Conversely, pressing the TAB or SHIFT+TAB key to navigate moves the focus point and the Virtual Cursor follows the focus.
Because JAWS uses the ARROW keys and alphanumeric keys for Virtual Cursor navigation, these keyboard commands are not passed through to interactive controls (form fields) on the page. This approach has the added benefit of protecting users from inadvertently changing form field values or activating controls on the page while simply reviewing the content.
Forms Mode is when JAWS turns over processing of the above keys to form controls so that users can interact with them. For example, when using the Virtual Cursor, pressing the letter H moves the Virtual Cursor to the next heading on the Web page; in Forms Mode, pressing the letter H types the character "H".
Before JAWS 10, JAWS users had to enter and exit Forms Mode manually. Users navigated to a given control using the Virtual Cursor, and would then press the ENTER key to go into Forms Mode. Pressing NUMPAD PLUS (PC Cursor) causes JAWS to exit Forms Mode.
When Forms Mode is manually activated on a given form control, focus is set to that control.
Auto Forms Mode is a feature that tells JAWS to be smart about when to enter and exit Forms Mode. This is a setting which is on by default. This approach provides a seamless experience for JAWS users when both reading and interacting with a Web page. The behavior of auto Forms Mode depends on the type of form control in question and the keyboard command used to navigate to it.
A page author may mark up a Web page using the ARIA role of application. This role indicates that the page author takes responsibility for handling of the ARROW and ESC keys while the cursor is inside the application region. The goal is to have JAWS act as though it is inside a standard desktop application. This means that as the user tabs from control to control JAWS will remain in Forms Mode and pass on all ARROW keys and the ESC key to the Web page.
When inside an application region, JAWS treats any interactive element as a form control. This means that links, checkboxes, radio buttons and so on are all treated like form controls requiring Forms Mode. This is in contrast to the manual and auto Forms Mode behaviors described earlier in this document. However, as with Forms Mode in other circumstances, users are still able to exit Forms Mode on application controls by pressing NUMPAD PLUS and can re-enter Forms Mode either by tabbing to a new control or by pressing ENTER on a control.
The user can identify controls inside an application region because they are all announced as application controls by JAWS as the user moves through the web page using TAB or ARROW keys. For example, when a user encounters an edit control in an application region, JAWS will announce it as edit application control.
JAWS behavior between a combo box created with standard HTML, for example, should be no different from JAWS behavior with a properly constructed JavaScript-based combo box and ARIA markup. In a few cases, ARIA markup allows for control types which were not available before in HTML.
Some of the other ARIA roles include, but are not limited to:
JAWS announces the type and text of document regions, and provides navigation to the next and previous document region on the page using the SEMICOLON and SHIFT+SEMICOLON. In addition, pressing INSERT+CONTROL+SEMICOLON brings up a list of document regions. Note that JAWS treats a number of elements as regions. This includes all the ARIA landmark regions along with several other region types listed below. A few examples include, but are not limited to:
ARIA regions are used to divide web pages into sections. You can use the JAWS navigation quick key SEMICOLON to jump between landmarks. INSERT+CTRL+SEMICOLON provides a list of regions for the current page. When a page loads, regions are announced in addition to links and headings.
A good example of the use of ARIA landmarks can be found on the What's New in MAGic 12 Screen Magnification Software page of the Freedom Scientific Web site.
Live regions are used on pages that update frequently, such as stock tickers, advertisements, news pages, and chat logs. JAWS automatically detects when the content changes and speaks all content of the region or only that which changed, depending on the type of live region.
An example of live regions can be seen on the Surf's Up Aria Live Regions page and on the Surf's Up Aria Live Regions Atomic page.
The importance of each change can also be set by the developer to "polite," "assertive," or "off."
One of the first things you find across the top of all of the new pages on the Freedom Scientific Web site is a menu bar created with ARIA. ARIA is growing in popularity within the assistive technology industry as a way to provide accessible interactive controls within Web pages, to improve navigation, and to provide increased usability. In addition to being easily accessible to mouse users, these ARIA menus also offer much better support for keyboard users. Keyboard users can efficiently use the ARROW Keys to navigate through the menus. Try using the following techniques if you are using JAWS:
Note: You can also use the TAB key to move to the menus. Once focus is on the Home menu, forms mode comes on automatically for JAWS (or MAGic). Then you can use the ARROW Keys to move left, right, up, and down within the menus.
Let us take a look at another site where ARIA menus and regions are used, the Microsoft Accessibility Web site. Practice with the following items:
Take a look at some accessible ARIA slider control examples with in-line images from the CodeTalks site. When the user reads with the virtual cursor JAWS read through the text as expected, but you cannot activate the slider bar until you go into forms mode. When you hear a number and the word "slider" you can press ENTER to go into forms mode. When you press TAB to move to the slider bars, the ARIA information forces JAWS to go into Forms Mode automatically, i.e. drop out of the virtual reading mode for navigating the control.
Here is an example of an ARIA date picker control from CodeTalks.
Here is an example of an ARIA tree view from CodeTalks.
Here is an example of an ARIA spreadsheet document from CodeTalks.
Set of ARIA Test Cases: CodeTalks Samples.
For more information about ARIA, visit the following Web sites: