WAI-ARIA Landmarks
Background
ARIA landmark roles assist users of assistive technologies (AT) when navigating web pages by describing the type or purpose of content.
Whilst CSS is good at separating layout from presentation, the use of <div> tags doe's little to describe the purpose of areas of content.
Instead of having to tab through or listen to each section of a page, such as a banner, content and footer, to find out what it is about, ARIA landmarks allow users to navigate directly to the section they want.
At present on the University of Melbourne web site, the links 'Skip to navigation' and 'Skip to content' are used to allow users to jump to specific areas of the page.
Whilst these links are useful to users of AT, they also cause some problems because not everybody includes them in their pages.
In addition the terminology used by UoM to skip links is not necessarily consistent with what is used on other web sites.
ARIA landmarks offer a web site independent means of allowing assistive technologies to recognize content areas.
The landmark roles are as follows:
| ARIA Role | HTML 5 equivalent |
|---|---|
| role="application" | none |
| role="banner" | <header> |
| role="complementary" | <aside> |
| role="contentinfo" | <footer> |
| role="form" | <form> |
| role="main" | <main> |
| role="navigation" | <nav> |
| role="search" | none |
Banner
W3C definition
A region that contains mostly site-oriented content, rather than page-specific content.
Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
User agents SHOULD treat elements with the role of banner as navigational landmarks.
Within any document or application, the author SHOULD mark no more than one element with the banner role.
Pancello Group definition
A region that contains the prime heading or internal title of a page. Most of the content of a banner is site-oriented, rather than being page-specific. Site-oriented content typically includes things such as the logo of the site sponsor, the main heading for the page, and site-specific search tool. Typically this appears at the top of the page spanning the full width.
UoM usage
In the new UoM templates the banner is situated at the top of the page.
Located inside the banner are:
- The University of Melbourne logo
- Breadcrumb navigation
- Translate button
- Search box
- Organisational Unit identification, e.g. The Faculty of Science. Graduate School of Science.
Search
W3C definition
A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.
A search region may be a mix of host language form controls, scripted controls, and hyperlinks.
User agents SHOULD treat elements with the role of search as navigational landmarks.
Pancello Group definition
The search tool of a web document. This is typically a form used to submit search requests about the site or to a more general Internet search service.
UoM usage
On the UoM website the main search is located at the top of the page as part of the banner.
The new templates have two elements that make up the search, a search button and a search form.
The search form is activated when a user clicks on an image with 'Search' on it.
The button is described using the ARIA role of button.
Navigation
W3C definition
A collection of navigational elements (usually links) for navigating the document or related documents.
User agents SHOULD treat elements with the role of navigation as navigational landmarks.
UoM usage
The new UoM templates have global navigation situated in the banner.
The templates also have the page specific navigation situated to the right of screen.
Both have been assigned an ARIA role of 'navigation'.
Main
W3C definition
The main content of a document.
This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies.
User agents SHOULD treat elements with the role of main as navigational landmarks.
Within any document or application, the author SHOULD mark no more than one element with the main role.
UoM usage
In the new UoM templates have the main content situated in the centre of the screen.
The main content has been assigned an ARIA role of 'main'.
Form
W3C definition
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.
A form may be a mix of host language form controls, scripted controls, and hyperlinks. Authors are reminded to use native host language semantics to create form controls, whenever possible. For search facilities, authors SHOULD use the search role and not the generic form role. Authors SHOULD provide a visible label for the form referenced with aria-labelledby. If an author uses a script to submit a form based on a user action that would otherwise not trigger an onsubmit event (for example, a form submission triggered by the user changing a form element's value), the author SHOULD provide the user with advance notification of the behavior. Authors are reminded to use native host language semantics to create form controls, whenever possible.
User agents SHOULD treat elements with the role of form as navigational landmarks.
Pancello Group definition
A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
UoM usage
UoM usage
Where possible, native HTML elements should be used to make forms accessible. Visible labels should be created and linked to all form fields.
ARIA roles can be useful in linking text to forms
Complementary
W3C definition
A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
There are various types of content that would appropriately have this role. For example, in the case of a portal, this may include but not be limited to show times, current weather, related articles, or stocks to watch. The complementary role indicates that contained content is relevant to the main content. If the complementary content is completely separable main content, it may be appropriate to use a more general role.
User agents SHOULD treat elements with the role of complementary as navigational landmarks.
UoM usage
The area to the right of screen, below the menu, has been assigned a role of 'complementary' because it contains related by independent information.
Contentinfo
W3C definition
A large perceivable region that contains information about the parent document.
Examples of information included in this region of the page are copyrights and links to privacy statements.
User agents SHOULD treat elements with the role of contentinfo as navigational landmarks.
Within any document or application, the author SHOULD mark no more than one element with the contentinfo role.
Pancello Group definition
Metadata that applies to the parent document.For example, footnotes, copyrights, and links to privacy statements would belong here.
UoM usage
On the UoM website, document information is normally positioned within the footer of the web page.
Additional WAI-ARIA Roles
There are 61 WAI-ARIA roles that can be used in rich internet applications.
Link Role
W3C definition
An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related button.
If this is a native link in the host language (such as an HTML anchor with an href value), activating the link causes the user agent to navigate to that resource. If this is a simulated link, the web application author is responsible for managing navigation.
Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
Button Role
W3C definition
An input that allows for user-triggered actions when clicked or pressed.