Validate the Accessibility of Master Detail Views in an Oracle JET App

Introduction

In the Test an Oracle JET App for Keyboard-Only Accessibility tutorial, we addressed several accessibility issues within the Organization tab. There are several issues that remain that we will address in this tutorial

Objectives

In this tutorial, you will learn how to identify and fix accessibility issues in the Organization tab of the ACCLearningPath app.

Prerequisites

A development environment set up to create Oracle JET apps with the JavaScript runtime, Node.js, and the Oracle JET release 13.0 (or later) command-line interface installed
Access to the Oracle JET Developer Cookbook
Access to the Web Content Accessibility Guidelines 2.1
Access to the Oracle JET Keyboard and Gesture Guide
Completion of the previous tutorial in this learning path, Customize the Connected Lifecycle Event

Task 1: Review the Page Structure

The first step in reviewing the app is to check the page structure. Run the app and ensure that the Organization tab has the necessary HTML headings.

If the app is not already running in your browser, use the terminal to start the app from the ACCLearningPath directory.
```
$ ojet serve
```
Click on the Organization tab in the Introduction page’s tab bar.

Notice in the screenshot that the Organization page has two panels. The left panel holds the tree view; the right panel gives instructions for its use.

Description of the illustration organization_page.png

According to the following WCAG success criteria, you want to determine whether each section of the page has an HTML heading to identify it.
- WCAG Success Criterion 1.3.1 Info and Relationships and WCAG Success Criterion 2.4.10 Section Headings indicate that the tab itself and each panel should have an HTML heading that defines their purpose.
Navigate to the ACCLearningPath/src/js/views folder and open the organization.html file in an editor.
Locate the top-level <div> tag and insert an <h3> heading tag after it.
```
<div class="oj-hybrid-padding">
   <h3>Organization</h3>
```
Locate the <div> tag that forms the left panel with the tree view and insert an <h4> heading tag after it.
```
<div class="oj-flex-item">
   <h4>Organization Tree View</h4>
```
Locate the <div> tag that forms the right panel of the Organization page and insert an <h4> heading tag after it.
```
<div class="oj-flex-item oj-sm-6">
   <h4>Employee Details</h4>
```
Save and close the file. Your file should look similar to organization-page1-html.txt.

The browser will refresh the page, picking up the changes to the Organization page.
Verify that the page structure is correct.

Description of the illustration org_page_headings.png

Task 2: Perform a Keyboard-Only Test

Press <Ctrl+L> to set focus on the address bar.
Press <Tab>. Focus moves move to the skip nav link.
Press <Tab>. Focus moves to john.hancock@oracle.com in the user menu at the top-right of the page.
Press <Tab>. Focus moves to Introduction in the navigation menu immediately below the user menu at the top-right of the page.
Press <Tab>. Focus moves to Overview in the tab bar.
Press <Tab>. Focus moves to the Accounting item in the tree view in the left panel.
Press <down arrow> twice in the tree view to set focus on an employee.
Press <Enter> to select the employee and bring up the Employee Details form in the right panel of the page.
Press <Tab>. Focus moves to the Employee Id field.
Press <Tab>. Focus moves to the Employee Name field.
Press <Tab>. Focus moves to the Job Title combobox.
Press <Tab>. Focus moves to the Hire date field.
Press <Tab>. Focus moves to the Salary spinbox.
Press <Tab>. Focus moves to the Manager Id field.
Press <Tab>. Focus moves to the Jobs radio buttons.
Press <Tab>. Focus moves to the About Oracle link in the footer of the page.

If the focus rectangle is visible throughout this test and if focus moves in the expected order, then the Organization page meets the focus indicator criterion.

The final stage of testing the Organization page for accessibility is to perform a screen-reader validation to ensure that the screen reader speaks all that is required.

According to WCAG Success Criterion 4.1.2 Name, Role, Value and Success Criterion 2.4.4 Link Purpose (In Context), the primary items you need to validate include:

The name, role, state, and value for all controls is spoken.
The text of all links is spoken and adequately describes the purpose of the link.

In the terminal window, exit the running app by pressing <Ctrl+C>, and, if prompted, enter y.
Start your screen reader and then restart your web app.
```
$ ojet serve
```
Your app will open in your browser automatically; the screen reader will start reading once the page is fully loaded.
Select the Organization tab from the tab bar, then use the keyboard only for the remaining steps.
Press <Ctrl+L> to set the focus on the address bar.
Press <Tab>. JAWS says, “Skip to main content. Same page link.”
Press <Tab>. JAWS reads, “Banner region. Toolbar. john.hancock@oracle.com button menu. Press space to activate the menu, then navigate with arrow keys.”
Press <Tab>. JAWS says, “Navigation region tab. Introduction tab selected. 1 of 2.”
Press <Tab>. JAWS says, “Main region tab. Organization tab selected. 2 of 4.”
Press <Tab>. Focus moves to Accounting, the first item in the tree view, and JAWS says, “Receive data for node: research. Accounting. Research: Jones, Scott, Ford, Adams. Sales. Operations preview. Accounting closed. 1 of 4. To move through or expand items, use the arrow keys.”

Notice that the screen reader did not speak a descriptive label for the tree view. There are two necessary fixes involved in providing an adequate label for the tree view.
To fix the tree view label, navigate to the ACCLearningPath/src/js/views folder and open the organization.html file in an editor.

Locate the <oj-tree-view> tag.

<oj-tree-view id="treeview"
   data="[[dataProvider]]"
   selection-mode="single"
   . . . 

Add the following aria-label attribute to the <oj-tree-view> tag. The h4 HTML heading serves as a visual label for the tree view.
```
<oj-tree-view id="treeview"
   data="[[dataProvider]]"
   selection-mode="single"
   aria-label="Organization Tree View - select an employee to display details."
   . . . 
```
The tree view now adheres to both WCAG Success Criterion 2.5.3 Label in Name and WCAG Success Criterion 1.3.1 Info and Relationships. To meet these criteria, both the visual label and the instructional text must be included in the spoken label of a control.
Return to the browser window and repeat steps 1 through 7 above so that focus is on Accounting in the tree view. JAWS says, “Organization Tree View - select an employee to display details. Tree View. Accounting closed. 1 of 4. To move through or expand items, use the arrow keys.”
Press <right arrow>. The screen reader says, “Retrieving data for node: accounting. Accounting open. 1 of 4. Accounting open. Receive data for node: accounting”
Press <right arrow>. The screen reader says, “Level 1. Onegin. 1 of 3. To move through or expand items, use the arrow keys.”
Press <down arrow>. The screen reader says, “Clark.”
Press <Enter> to select Clark. The screen reader says, “Clark. 2 of 3.”
Press <Tab>. The screen reader says, “Employee Id read-only edit 7,782.”
Press <Tab>. The screen reader says, “Employee Name edit Clark. Type in text.”
Press <Tab>. The screen reader says, “Job Title edit combo. Manager. To set the value, use the arrow keys or type the value.”
Press <Tab>. The screen reader says, “Hire Date edit combo,” followed by the date present in the element, “06/08/1981”. It then continues reading the information visible in the calendar as well as gives instructions for navigating and accessing the data.
Press <Tab>. The screen reader says, “Salary edit spinbox. 2,450. Enter a number greater than or equal to 0. To set the value, use the arrow keys or type the value.”
Press <Tab>. The screen reader says, “Manager Id, read-only edit. 7839”
Press <Tab>. The screen reader says, “Accounting radio button checked. 1 of 4.”

Notice that the screen reader did not announce the label for the set of radio buttons.

To fix the radio button set label, locate the <oj-radioset> tag in the organization.html file.

<oj-radioset id="dept-id"
   options="[[depsDataProvider]]"
   value="[[empDetails().deptno]]">
</oj-radioset>

Add a label-hint="Departments" attribute to the <oj-radioset> tag to provide a visible and spoken label for the set of radio buttons.

<oj-radioset id="dept-id"
   label-hint="Departments"
   options="[[depsDataProvider]]"
   value="[[empDetails().deptno]]">
</oj-radioset>

Save and close the file. Your file should look similar to organization-page2-html.txt.
The browser refreshes the running app to pick up the changes to the Organization page.
Rerun the screen-reader validation to ensure that the new labels are spoken.
Stop your screen reader.
In the terminal window, exit the app by pressing <Ctrl+C>, and, if prompted, enter y.

This completes the second set of accessibility fixes. The next tutorial within this learning path is Verify the Accessibility of Oracle JET Components Table and Message Components.

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.

Title and Copyright Information

Validate the accessibility of master detail views in an Oracle JET app

F34163-02

October 2022