Using WAI ARIA Landmark Roles – updated The Pac

WAI-ARIA Landmark Roles
The WAI ARIA specification defines a set of specialised “landmark” roles. These roles provide a method to programmatically identify commonly found sections of web page content in a consistent way. they can be used now in whatever flavour of (X)HTML you prefer. This allows assistive technologies to provide users with features which they can use to identify and navigate to sections of page content.
Information about WAI – ARIA landmarks from WAI-ARIA Best Practices (Editors’ Draft 6 August 2010)
Landmarks are a vast improvement over the rudimentary “skip to main content” technique employed prior to WAI-ARIA. If possible it is best to use these as landmarks.
…
The presence of common,Tiffany, semantic, navigation landmarks allows each site to support the same standard and allows your assistive technology to provide a consistent navigation experience – an important feature for screen readers and alternate input solutions. For users with cognitive and learning disabilities the landmark information could be used to expand and collapse these regions of your page to aid in simplifying the user experience by allowing the user to manage the amount of information processed at any one time.
There are also mainstream benefits of providing navigation landmarks. Your browser may assign key sequences to move focus to these sections as they can be set on every site. Navigation to these landmarks is device independent. A personal digital assistant (PDA) could assign a device key to get to them in your document.
How to use landmark roles
It is a painless process to add landmark roles to existing (and new) pages. Simply add a role attribute to a container element, using the most appropriate role value for the content of the container, for example:
<div class="content" role="main">
An example page with ARIA landmark roles
A list and descriptions of landmark roles is available in Table 1 Adding Landmark Roles to WordPress
I added them to the TPG blog (uses WordPress) in about 20 minutes, it involved the editing of the following WordPress files: sidebar.php (added complementary, navigation (x2) and search landmarks), header.php (added banner landmark), single.php (added main landmark), footer.php (added contentinfo landmark) & index.php (added main landmark). The results can be visualised using The Juicy Studio Accessibility Toolbar document landmarks feature:
Support for Landmark Roles
Landmark roles are currently supported In JAWS version 10 screen reader, NVDA 2010.1 and VoiceOver on iPhone IOS4.
Note: the Current version of Window Eyes screen reader has bugs related to the use of ARIA.
Landmark Support behaviour in JAWS version 10 and above
For JAWS version 10 and above,Tiffany Key Ring, landmark keyboard navigation in virtual mode is:
next landmark ; (semi-colon)
previous landmark SHIFT + ; (semi-colon)
list landmarks CTRL + INS + ; (semi-colon)
When cycling through landmarks using the semi-colon key, the landmark role name +”landmark” is announced. A user can then cursor (down arrow key) to the content. If a landmark is a container for other landmarks it is not included within the cycle order, but is included within the list order. By default the list does not display nested landmarks,Tiffany And Co, but when a nested landmark container item receives focus, it is announced to the user that the list item is closed, informing the user that the item has sub items. A user can then use the right arrow key to open the sub list.
ARIA Landmark Role Tests
Detailed information about current assistive technology support can be found in the accompanying document ARIA Landmark Role Tests (18th October 2010: requires updating to include latest AT support).
What about the new Sectioning Elements in HTML5
The new sectioning elements in HTML5 have some overlap with ARIA landmark roles, but in a majority of of cases there is no equivalent for the ARIA landmark roles in HTML5. It is suggested that where there is a similarity the ARIA roles can be used to provide semantic identification that has a practical use now, for example if you want to use the HTML5 nav element,Tiffany Wedding, add role="navigation" to it, so supporting Assistive Technology (AT) can convey the semantic information to users. When HTML5 elements such as nav are supported by AT,Useful Websites New England College, you can then remove the role as it will no longer be required.
<nav role="navigation">
For an example of the use of HTML5 elements and ARIA landmark roles have a look at code of Bruce Lawson’s site.
Comparison of ARIA landmark roles and HTML5 structural elements ARIA Landmark Role
HTML5 Sectioning Element role="application" Represents a region of the page representing a unique software unit executing a set of tasks for its users. It is an area where assistive technologies should also return browse navigation keys back over to the web application in this region.
note: If the entire web page has a role of application then it should not be treated as a navigational landmark by an assistive technology.
No HTML5 element equivalent.
Recommend using on a semantically neutral element such as a div.
role="banner" 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,Tiffany Blue, the main heading for the page, and site-specific search tool. Typically this appears at the top of the page spanning the full width.
Note: Within any document or application, the author SHOULD mark no more than one element with the banner role.
No HTML5 element equivalent.
Recommended to be used on one header element per page if the header element is used as described for role=”banner”. role="complementary" A supporting section of the document that remains meaningful even 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 content should be relevant to the main content; if it is completely separable, a more general role should be used instead.
<aside> The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. role="contentinfo" Metadata that applies to the parent document.For example, footnotes,Tiffany Jewelry, copyrights,Tiffany Rings Uk, and links to privacy statements would belong here.Note: Within any document or application,Pandora Bracelets Prices, the author SHOULD mark no more than one element with the contentinfo role.
No HTML5 element equivalent. Recommended to be used on one footer element per page if the footer element is used as described for role=”contentinfo”. role="form" 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.
The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. role="main" The main content of a document. This marks the content that is directly related to or expands upon the central topic of the document. Within any document or application, the author SHOULD mark no more than one element with the main role.
Note: Within any document or application, the author SHOULD mark no more than one element with the main role.
No HTML5 element equivalent.
Recommend using on a semantically neutral element such as a div. role="navigation" A collection of navigational elements (usually links) for navigating the document or related documents.
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. role="search" 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.
No HTML5 element equivalent.
Recommend using on a semantically neutral element such as a div or on a form element, if the form contains only search related controls and instructions.
Role and element descriptions from:
WAI-ARIA 1.0 draft specification W3C HTML5 draft Specification