3.3 Developing Accessible Regions

H1 Headings

Include a breadcrumb region on your pages to create a unique H1. You can use the Create Application Wizard to generate breadcrumbs automatically based on the hierarchy of pages defined in the wizard, or you can configure the breadcrumbs in your app manually. By default, the last breadcrumb entry on a page is the H1.

Alternatively, use the Hero region template in Universal Theme. This region template renders the region title as the H1 text on the page by default, which is useful if your current app layout and design does not warrant breadcrumbs.

H2 Headings

After the H1, most region templates in Universal Theme render other content on the page with an H2 around the region title

Description of the illustration GUID-F2A4CBD8-114E-48CF-83B1-EDFAB14B6A8B-default.png

H1: Charts
        H2: region 1
        H2: region 2
        H2: region 3
        H2: region 4

H3 and Other Sub-Region Headings

Universal Theme does not automatically support headings beyond H2, such as when you have sub-regions nested within an H2 region.

By default, Application Express applies H2s to nested sub-regions (regions 4.1 and 4.2 in the above example) in the Standard region template. This creates an accessibility problem because screen reader users may incorrectly believe that these sub-regions are of similar importance to the parent region or that the regions are not ancestral to the parent region.

H1: Charts
        H2: region 1
        H2: region 2
        H2: region 3
        H2: region 4
        H2: region 4.1
        H2: region 4.2

To properly structure these sub-regions, you must duplicate the Standard region template, then use the Code Editor to manually replace the H2 tags with H3s in the template’s definition.

Changing the sub-regions to H3s only affects the structure of the element (not the style), which is what we want for accessibility.

Description of the illustration GUID-DE1F3308-DAFB-404F-8EFB-1D735F57D440-default.png

This results in the following heading structure:

H1: Charts
        H2: region 1
        H2: region 2
        H2: region 3
        H2: region 4
                H3: region 4.1
                H3: region 4.2

Region Titles

You should define meaningful titles for most region types because Universal Theme uses the region title as the heading text for the region.

Descriptive titles are essential for accessibility. By default, titles are visible on screen. However, sometimes you may not want a title for a region, such as when sighted users can quickly discern the region’s content from surrounding page content at a glance. In such cases, you must still provide heading text for screen reader users. To make such a page accessible, select the region, in Property Editor open the Template Options, and set the Header attribute to Hidden but accessible.

Introduced in Oracle Application Express 5.1, interactive grids combine powerful reporting with grid-based editing in a single component. Users can access all interactive grid functionality with just a keyboard, enabling all users to navigate around the grid and edit their data using the keyboard. For a complete list of keyboard support in interactive grids, see Keyboard Shortcuts in Interactive Grid Regions.

Interactive grids do contain some accessibility bugs affecting screen reader users. All bugs are listed in the current VPATs for Oracle Database related products.

For better screen reader support for multi-row editing, Oracle recommends using a tabular form region instead of an interactive grid.

Data Table Accessible Label

You must enable screen reader mode to ensure the underlying data table rendered by interactive reports has an accessible label. Once enabled, Oracle Application Express generates the following SUMMARY text for the rendered data table:

Region = [region title], Report = [current saved report name], View = [current View], Displayed Rows Start = [current start of rows displayed, Displayed Rows End = [current end of rows displayed], Total Rows = [total number of rows]

This text identifies the data table, and therefore provides a great deal of contextual information to users of assistive technology.

Edit Icon Link Text

When creating a Report and Form, Oracle Application Express generates the links between the two pages to allow you to edit specific records. The link text generated for all rows is Edit by default. You should make this text a meaningful label so that screen reader users (who listen to all the links on the current page) can understand the purpose of the link and where it takes them. The link text should be specific to the current row in the report. For example, for a report of customers, the link text could be Edit Customer: SMITH.

You can define the link text of an interactive report region by selecting the Attributes node, then in the Property Editor expand the Link column, set Link Column to Link to Single Row View or Link to Custom Target, and update the alt text in the Link Icon field.

Because there is no visible link text used, the link uses the inline image’s alt text as the text for the link. Note that you can use a substitution string such as #CUSTOMER_NAME# to target the column that best identifies the current row.

Data Table

By default, Oracle Application Express generates SUMMARY text equal to the region title. This identifies the data table to users of assistive technology.

Edit Link Text

When creating a Report and Form, Oracle Application Express generates the links between the two pages to allow you to edit specific records. The link text generated for all rows is Edit by default. You should make this text a meaningful label so that screen reader users (who listen to all the links on the current page) can understand the purpose of the link and where it takes them. The link text should be specific to the current row in the report. For example, for a report of customers, the link text could be Edit Customer: SMITH

You can define the link text of an interactive report region by selecting the Attributes node, then in the Property Editor expand the Link column, set Link Column to Link to Single Row View or Link to Custom Target, and update the alt text in the Link Icon field.

Because there is no visible link text used, the link uses the inline image’s alt text as the text for the link. Note that you can use a substitution string such as #ENAME# to target the column that best identifies the current row.

Tabular forms provide simple multi-row editing capability in your apps.

Data Table

By default, Oracle Application Express generates SUMMARY text equal to the region title. This identifies the data table to users of assistive technology.

Use as Row Header

Specify if a column should be used as the heading for the row. Including the column value can greatly improve accessibility for form fields rendered in the tabular form. When specified, Oracle Application Express uses the Row Header together with the Column Header to render unique labels for the form fields in the report in the following format: <Column Header> : <Row Header>

For example, you define the ENAME column as the Row Header for a report on the EMP table. For a row where ENAME is "'JONES," the label for the Salary field in that row would be Salary : JONES. This approach enables a screen reader user to navigate by the form fields in the report and still understand which form fields relate to which row.

Oracle Application Express 5.1 introduced charts based on the Oracle JET Data Visualization components (JET charts). Releases prior to 5.1 used charts based on AnyChart, where there were many accessibility issues.

For more information about accessibility of Oracle JET Data Visualization components including support for keyboard and touch, see the Oracle JET documentation.

The following sections detail some chart settings that are particularly useful for ensuring chart accessibility.

Chart Title

The chart title displays in the chart region next to the chart. It is also the accessible label for the chart page section. In Page Designer, the chart title is defined in the chart Attributes node.

If there is only one chart displayed within a region, consider hiding the region title to avoid visual duplication. You can hide the region title by changing the Header region appearance setting in the Template Options dialog to Hidden but accessible. This removes the region title from the page but preserves the heading for assistive technologies (if users scan the current headings on the page to orientate themselves, they can perceive this title).

Tooltip

The tooltip displays when the mouse hovers over a specific chart section or the keyboard has focus on this section. In addition, the tooltip is the accessible label for that section of the chart. For example, when screen reader users navigate around the chart sections, this tooltip is announced.