Skip to content

Instantly share code, notes, and snippets.

@davatron5000
Last active December 11, 2015 20:48
Show Gist options
  • Save davatron5000/4657537 to your computer and use it in GitHub Desktop.
Save davatron5000/4657537 to your computer and use it in GitHub Desktop.

How-to: Use role="application"

Summary: Use role="application" very sparingly, if at all.

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 mode1 to be turned on.

Do Use

  1. Use if your page has no resemblance to a classic document in roughly over 90% of its content
  2. Use clear labels within your application

Don’t Use

  1. If a user interface and controls are solely elements that are part of standard HTML2.
  2. If your widget is dynamic such as a tree view, slider, 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 leave the browser/AT to its own devices. We really only recommend it on a per–in–page–widget basis, and even then: very very carefully.


References:

  1. http://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely
  2. https://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html#application
  3. http://www.accessibleculture.org/articles/2012/09/aria-widgets-and-focus-forms-mode-support

Footnotes

  1. Allows the user to interact with forms and ARIA-enabled HTML elements.

  2. Standard HTML refers to: text, password, search, tel and other newer input type derivates, textarea, checkbox, button, radio button (usually inside a fieldset/legend element wrapper), select + option(s), links, paragraphs, headings, and other things that are classic/native to documents on the web.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment