A region declared as a web application, as opposed to a web document.

The application role is a landmark role. When the web page contains any non-browsing elements such as flash, video etc, role="application" is marked to the region where the non-browsing content is available.  This application role informs the users of assistive technologies to convert from browse mode to a more appropriate mode that can best interact with the application content.

When the user navigates an element assigned the role of application, assistive technologies that typically intercept standard keyboard events should switch to an application browsing mode, and pass keyboard events through to the web application. The intent is to hint to certain assistive technologies to switch from normal browsing mode into a mode more appropriate for interacting with a web application; some user agents have a browse navigation mode where keys, such as up and down arrows, are used to browse the document, and this native behavior prevents the use of these keys by a web application.

Authors should set the role of application on the element that encompasses the entire application. If the application role applies to the entire web page, authors should set the role of application on the root node for content, such as the body element in HTML or svg element in SVG.

For example, an email application has a document and an application in it. The author would want to use typical application navigation mode to cycle through the list of emails, and much of this navigation would be defined by the application author. However, when reading an email message the content will appear in a region with a document role in order to use browsing navigation.

For all instances of non-decorative static text or image content inside an application, authors should either associate the text with a form widget or group (via aria-label, aria-labelledby, or aria-describedby) or separate the text into an element with role of document or article.

Authors should provide a title or label for applications. Authors should use label text that is suitable for use as a navigation preview or table-of-contents entry for the page section. Content authors should provide the label through one of the following methods:

• If the application includes the entire contents of the web page, use the host language feature for title or label, such as the title element in both HTML and SVG. This has the effect of labeling the entire application.
• Otherwise, provide a visible label referenced by the application using aria-labelledby.

User agents should treat elements with the role of application as navigational landmarks.

Authors may use the application role on the primary content element of the host language (such as the body element in HTML) to define an entire page as an application. However, if the primary content element is defined as having a role of application, user agents must not use the element as a navigational landmark. If assistive technologies use an interaction mode that intercepts standard keyboard events, when encountering the application role, those assistive technologies should switch to an interaction mode that passes keyboard events through to the web application.

Note: Where appropriate, assistive technologies that typically intercept other standard device input events, such as touch screen input, could switch to an application browsing mode that passes some or all of those events through to the web application.

Syntax

<div role=”application”> Any content / functionality of the application area.</div>