How To: Divide a Page into Regions using ARIA Landmark Roles
- 2 minutes to read
This topic describes how WAI-ARIA landmark roles are implemented in DevExpress accessibility demos. Landmarks provide programmatic access to logical sections of a page (e.g., main content, navigation, search), so that assistive technology users (with screen readers) can navigate between different logical sections (based on Section 508 1194.22(o), WCAG 2.0 2.4.1 requirements). See the following help topic for a list of demos with accessibility support: Accessibility Best Practices.
The image bellow illustrates how the NVDA (NonVisual Desktop Access) screen reader’s Elements List window displays page landmark regions.
See the following articles for information on related accessibility regulations:
- Using ARIA landmarks to identify regions of a page
- Section 508 1194.22(o): A method shall be provided that permits users to skip repetitive navigation links.
Implementation details
To implement this technique, add the role attribute to the required HTML element and specify the role’s type as the attribute value (e.g., “search”). This will mark the web page element as the search region for screen readers.
<div id="search" role="search"> ... </div>
<div id="navigation" role="navigation"> ... </div>
<div id="main" role="main"> ... </div>
<table id="myTable" role="presentation">
...
<tr>
<td role="application">...</td>
<td role="application">...</td>
</tr>
</table>
Use the following keys and key combinations to navigate between page regions with a screen reader.
Press R (for JAWS (Job Access With Speech) users). In JAWS versions prior to 15, use “;” (a semicolon) for this purpose.
Press D (for NVDA users). NVDA users can also press NVDA+F7 to see the web page structure based on landmark regions within the current window. After that, they can select any region and click the “Move to” button.