Use role='application'
Table of Contents
Never use role="application"
on a widely containing element such as <body>
if your page consists mostly of traditional widgets or page elements such as links that the user does not have to interact with in focus mode.
Using role="application"
unnecessarily can cause huge headaches for any assistive technology user trying to use your site/application. Only put it on the <body>
element if your page consists solely of a widget or set of widgets that all need the focus mode[1] to be turned on.
Do
- Use sparingly.
- If your page has no resemblance to a classic document in roughly over 90% of its content.
- Use clear labels within your application.
Don't
- If a set of controls or user interface only contains these widgets that are all part of standard HTML[2]
- If your widget is dynamic such as a tree view, slider or table.
Unless you take a great deal of care in ensuring that you’ve recreated a lot of native–ish custom navigation, it’s almost always better to let the browser/assistive technology handle things. We only recommend using role='application'
on a per–widget basis, and even then: very, very carefully.
Allows the user to interact with forms and ARIA–enabled HTML elements. ↩︎
Standard HTML refers to: text, password, search, tel and other newer input type derivates,
textarea
,checkbox
,button
, radio button (usually inside afieldset
/legend
element wrapper),select
&option
(s), links, paragraphs, headings, and other things that are classic/native to documents on the web. ↩︎
Further reading
- If you use the WAI-ARIA role 'application', please do so wisely! Marco Zehe 2012
- Using ARIA W3C 2017
- ARIA Widgets and Focus/Forms Mode Support in JAWS and NVDA (Internet Archive) Accessible Culture