Overview

Description

This Oracle JET web application has been written to illustrate how to add accessibility features into an existing web application.

The Introduction Page

The Introduction page contains a tab bar with four tabs, from which you can access the Overview, Organization, Employees, and Departments pages. Each page illustrates different Oracle JET components and how they can be made accessible.

  • The Overview page contains colored buttons that must be made accessible to both color-blind and screen-reader users. There is also a panel that illustrates the use of text-spacing attributes.
  • The Organization page contains an Oracle JET tree view and an associated data form.
  • The Employees page holds an Oracle JET table, an edit form in a dialog, and a message box.
  • The Departments page holds an Oracle JET filmstrip, data grid, and bar chart.

The Resources Page

The Resources page provides a list of links to additional resources for Oracle JET, web accessibility, and various international accessibility laws.

Intentionally, the Resources page was created with various keyboard accessibility issues for demonstration purposes.


Click here to open the Web Content Accessibility Guidelines v2.1, which will be referenced frequently throughout the learning path.

Use of Color

This panel illustrates the challenges faced when only color is used to identify an item on the page.

How would a completely blind screen-reader user or someone who is color blind complete the tasks below?



Tasks
  • Press the green button below.

  • Press the red button.

Green Red Purple

Text Spacing

Success Criterion 1.4.12 - Text Spacing

Normal text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Expanded Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.