eBay

Region

Upon visiting a web site for the first time, a sighted user will typically scan the page to create a visual model of it's main regions. On subsequent visits to the site, the user will quickly recollect this visual model.

A screen reader user will typically want to do exactly the same to create a mental model, but this task can be easy or difficult depending on the HTML markup of the page.

Like headings, regions can be used as navigational aids because screen reader vendors like JAWS and NVDA provide keyboard shortcuts to move between them. For example, in JAWS 15 you can press the R key to go to the next region or Shift + R to go to the previous one.

Regions are synonymous with HTML5 sections.

Working Examples

We expect to have working examples available in early 2016.

Best Practices

There are two types of region:

Landmark regions identify the main regions of a page that are common to most websites. Site banner/logo, the search box, site navigation, main content area, sidebar, etc. HTML5 and ARIA provide us with a limited list of landmark tags and roles respectively.

Custom regions identify the main areas of a page that are common to your website. Search filters, user profile, notifications, help, etc. HTML5 and ARIA provide us with the section tag and region role respectively, as the building blocks to create any number of custom regions.

Example

The following example shows how we can markup the main regions of a page using a combination of HTML5 and ARIA:

<body>
    <header role=“banner”>
       <img src=“sitelogo.jpg” />
       <nav role="navigation"></nav>
       <div role="search"></div>
    </header>
    <div role=“main”>
        <section role=“region” aria-labelledby="userprofile_heading">
           <h2 id="userprofile_heading">User Profile</h2></section></div>
    <aside role=“complementary”>
        <h2>Advertisement</h2></aside>
    <footer role=“contentinfo”></footer>
</body>

In this example, we have added a custom user profile region inside of our main content. Custom regions must be labelled. The screen reader will identify the region in our example as 'User Profile region' (or words to those affect).

Note that the HTML5 <main> tag is not yet supported by any version of Internet Explorer so we avoid using it for now.

Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

Regions are not interactive elements and therefore have no keyboard interaction.

Screen Reader

Screen readers will identify regions by their label, and all regions (landmarks & custom) are available with screen reader shortcut keys. Note that VoiceOver identifies both types of regions as 'landmarks'.

Pointer

Regions are not interactive elements and therefore have no pointer interaction.

Developer Guide

The content for this section is not yet available, please check back again for updates.

ARIA Reference

The content for this section is not yet available, please check back again for updates.

results matching ""

    No results matching ""