Perform Screen-Reader Validation on an Oracle JET App

Introduction

When using a screen reader with a web app, we use the term validation instead of the word test. There is a definitive answer with a test; validation implies more than one right answer. The outcome of the validation changes slightly as the browser and screen-reader versions change.

The Web Content Accessibility Guidelines (WCAG) 2.1 contains a set of more than sixty success criteria for creating an accessible web app. In this tutorial, we will focus on a subset of these criteria that deal exclusively with using a screen reader to navigate an app.

Ideally, a screen-reader review of an app is done without the use of a mouse and with the screen turned off or covered.

Learn to rely on the spoken output from the screen reader rather than on what is visually happening on the screen. What is seen and heard can be drastically different. Be aware that listening to screen readers can pose a challenge to those who are unfamiliar with them.

Objectives

In this tutorial, you will learn how to validate a web app with a screen reader and become familiar with screen-reader voices.

Prerequisites

Task 1: Download and Install a Screen Reader

The two most widely used screen readers that run on Windows are Job Access With Speech (JAWS) by Vispero and NonVisual Desktop Access (NVDA) by NVAccess.

Note: The author of this learning path prefers the JAWS screen-reader output. Although the content of this tutorial specifies JAWS, feel free to use either JAWS or NVDA.

Use JAWS

With a lifespan of more than twenty years, JAWS is one of the first screen readers to enter the assistive-technology market. A wide range of voices from which to choose allows for a more customized listening experience. The JAWS functionality supports ARIA (Accessible Rich Internet App) messages and complex web structures, and in the author’s opinion, it is often more robust than other screen readers. JAWS offers a 40-minute demonstration period free of charge, which is sufficient for this tutorial.

Download the latest JAWS release and install it. Always remember to start JAWS before you start your browser to perform validation.

Use NVDA

NVDA is available at no charge. It is open source and powered by Python. Users often prefer the voices available with NVDA, and head-to-head reviews of JAWS and NVDA reveal that NVDA more accurately reads web pages. JAWS may guess-read a label, whereas NVDA reads strictly from markup. Two prime features of NVDA are its small resource requirements and its portability. Install it on a flash drive to run the software on other devices.

Download the latest NVDA release and install it.

Task 2: Prepare for Screen Reader Validation

There are several WCAG 2.1 success criteria that address screen-reader validation.

All graphics must have text labels. If alt text is provided for a graphic, the screen reader should announce the alt text.

This criterion was introduced in the previous Visual Inspection tutorial because headings form a part of the page structure. In the context of utilizing screen readers, Success Criterion 1.3.1 refers to associating labels with controls and associating row or column headings with data cells.

As you validate a page, ask yourself, When moving cell by cell in a table, does the screen reader announce the column and row headers along with the cell coordinates and contents?

The screen reader should announce the name, role, state, and value of controls as those controls gain focus. Name is the label of the control. Role is the type of control. State defines whether the control is checked, selected, expanded, or collapsed. Value is the actual content of the control.

Verify that the screen reader announces the link text as it receives focus. Ensure that the text is sufficient to identify the purpose of the link.

The text of a visible label of a component must be included in the label information provided to assistive technology. If the component uses an aria-label attribute, the text of the aria label must include the text of the visible label even if the visible label is a graphic.

The screen reader should announce any status messages that are displayed on the page. The messages notify the user of a change to the page or that a process has completed.

JAWS and NVDA may present material differently, but each screen reader must communicate certain information about the elements on the page:

Task 3: Use JAWS to Validate the Employees Tab

Whether you are using JAWS or NVDA, the process of screen-reader validation is similar. The objective of the validation is to ensure that elements of the page are accurately read. The process may seem tedious, but both screen readers have special keystrokes to allow users to more quickly navigate a web app by heading, link, or form control.

When using either screen reader, use a full-sized keyboard because the screen readers utilize the number pad on the right side of the keyboard for special controls.

Use your screen reader and the starter app to validate the Employees tab of the Introduction page.

  1. Start JAWS or NVDA.

    It is always best practice to start the screen reader before opening the browser. This practice ensures that all necessary connections are made between the screen reader and the browser.

  2. Run the starter app.

    $ ojet serve

    The browser opens to the Introduction page of the app, and you are ready to begin validation.

    Both screen readers should start reading when the page is fully loaded.

  3. In the running app, use the mouse to click on the Employees tab. After this step, do not use the mouse.

    The Employees Tab

    Description of the illustration employees_page.png

  4. Press <Ctrl+L> to set the focus on the address bar.

  5. Press <Tab>. JAWS says, “Skip to main content. Same page link.”

  6. Press <Tab>. JAWS reads, “Banner region. Toolbar. john.hancock@oracle.com button menu. Press space to activate the menu, then navigate with arrow keys.”

  7. Press <Tab>. JAWS says, “Navigation region tab. Introduction tab selected. 1 of 2.”

  8. Press <Tab>. JAWS says, “Main region tab. Employees tab selected. 3 of 4.”

  9. Press <Tab>. JAWS says, “Table with 6 columns and more than 13 rows…” The screen reader will continue reading the table headers and data.

    Neither screen reader gives comprehensive information about what the table contains.

    Success Criterion 4.1.2 specifies that labels that identify purpose must accompany a table. Add a descriptive label to the table.

  10. Navigate to the ACCLearningPath/src/js/views folder and open the employees.html file.

  11. Locate the <oj-table> tag.

        
<oj-table id="table"
   class="table-size"
   first-selected-row="{{selectedRow}}"
   . . .
</oj-table>

  12. Modify the tag to include an aria-label attribute.

        
<oj-table id="table"
   class="table-size"
   first-selected-row="{{selectedRow}}"
   aria-label="Employees Table"
   . . .
</oj-table>

  13. Save and close the file. Your file should look similar to employees-html.txt

  14. Repeat steps 3 through 9 to verify that the aria-label is now spoken when the table receives focus. This initial <Tab> into the table places the focus on the first column header, and JAWS says, “Table with 6 columns and more than 13 rows. Employees Table. Column header 1. Employee Number.”

  15. Press <down arrow>. Focus moves to the table cell in row 1, column 1. JAWS says, “Row 1. 7839. Unselected. Column 1. Employee Number. 7839”.

    A non-disabled user clicks anywhere in a row to select it. However, a keyboard-only user presses the spacebar to select the row.

  16. Press <right arrow> to move to the second column. JAWS will read, “Column 2. Username King.”

    Arrow key presses move one cell in the direction of the arrow key selected. JAWS should read the new row or column number and header depending on whether movement is vertical or horizontal in the table. For instance, JAWS reads the row number and value of the row’s Employee Number column when navigating the table vertically.

  17. Press <right arrow> again to move to the Title column. JAWS says, “Column 3. Title President.”

  18. Press <down arrow>. JAWS says, “Row 2. 7698. Unselected. Title Manager.”

Task 4: Validate Table Data Editing

  1. In the running app, press <Home> to move to the first column and row of the table. Then press <Space> to select the row, and press <F2> to toggle the row to actionable mode.

    When there is a tabbable element in the table, such as the Edit button in the last column of the row, pressing <F2> moves focus to the first tabbable element. JAWS moves focus to the Edit button and says, “Edit button. To activate, press Enter.”

  2. Press <Enter>. JAWS opens up the Edit Employee form and says, “Edit employee. Employee ID: 7839…” JAWS will continue reading the employee’s information in the form until a key is pressed.

    Employees Page with Edit Employee Dialog

    Description of the illustration emp_page_edit_emp.png

  3. Press <Tab> to move focus to the Employee Name field. JAWS says, “Employee Name edit. King. Type in text.”

  4. Type a new name, and then press <Tab>. JAWS says, “Job Title edit. President. Type in text.”

  5. Press <Tab>. JAWS says, “Hire Date readonly edit. Nov 16, 1981.”

  6. Press <Tab>. JAWS says, “Salary edit spinbox. 5,000. Enter a number greater than or equal to 0. To set the value, use the arrow keys or type the value.”

  7. Press <Tab>. JAWS says, “Save button. To activate, press Enter.”

  8. Press <Enter> to activate the Save button. JAWS will read a similar status messages for your save: “Message category: confirmation. Updates saved. The changes for employee Onegin have been saved. Accessibility Learning Path.” Screen-reader users need to be aware of information involving the page title, the display of the message region, and the save confirmation. Close out the message box.

    Employees Page with Confirmation Message Box

    Description of the illustration emp_page_msg_box.png

Task 5: Use a Screen Reader to Validate Labeled Graphics

Both JAWS and NVDA have a shortcut key to locate labeled graphics. Press <Shift+G> to move focus to the next labeled graphic on the page. The Oracle logo is the only graphic on the Introduction page. Focus moves to the logo, and JAWS says, “Oracle Logo Graphic.”

You have completed the final tutorial in the Identify Accessibility Issues learning path. Proceed to the Make Oracle JET Apps Accessible: Validate and Fix App Accessibility learning path to continue with the second learning path in this accessibility series.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.