This is a post in this series (A11y: An Accessibility Guide For Ember Developers). Here’s a link the first post, Getting Started, and the second post, Understanding Structure: Landmarks. At least reading the first post will be important to understanding the target audience, and some of the shorthand terminology I’ve implemented for the purpose of this series.
When I first read the specification about landmark roles, they seemed rather obvious to me. Especially the application landmark role. “Oh that’s easy, I build apps, I’ll use that.” I couldn’t have been more wrong, though. When to use, or not use, the application role seems to be a thing that can really trip developers up- especially JS framework developers. Especially if The Reasons Why™ apply. A lot of us have some variation of “Application Developer” in our job title, and that’s exactly what we do. We just happen to make them available via browser.
As far as assistive technology is concerned, however, “application” does not mean what you think it means. Okay maybe you are smarter than I am, and it will totally make sense to you from the start, but it was an excuse to use a Princess Bride quote and ALWAYS DO THAT.
I make no apologies for that digression.
Anyway. The TL;DR is this: don’t use role=”application” because it doesn’t apply to you. Probably.
Wanna know why? Let’s look.
So, Basically…*
Use role=”application” when you want to control ALL of the keyboard navigation. I really mean “all” here. You’re telling the browser, “hey I got this.” The screen reader will STOP intercepting keystrokes. This is typically bad.
It is a pretty silly thing to do, because you now have to implement all of the things that the browser AND assistive technologies (AT) typically give you for free. This, again, is why we use native HTML5 elements! Interactive elements….yes! you remembered! They have built-in tabindex.
Focus. Browse. Focus. Browse.
NVDA** has a focus mode and a browse mode. Let’s go through that.
- web pages are in browse mode by default. When the user enters something like an input field (interactive element!), NVDA automatically switches to focus mode.
- focus mode allows the user to quickly navigate to all of the interactive elements on the page using the arrow keys, instead of their default behavior (scrolling up and down the page).
- Keyboard shortcut: [NVDA + SPACE] toggles between modes.
- Pro-tip: For easier development, go to NVDA > Preferences > Browser Mode and un-check the box that says “audio indication of focus and browse modes”. Here’s a screenshot:
You’ll then see “focus mode” and “browse mode” in the speech viewer, like this:
But I really gotta use it!
In the incredibly rare case that you DO need to use role=”application”, here are the rules:
- Do not use it on the body element (I’m pretty sure Ember won’t let you do that anyway, but maybe that’s just something I haven’t tried to do yet)
- Use it directly on the component’s container.
- If there are nested components that would benefit from the native browser or AT browsing functionality, put role=”document” on that inner component.
- Yes. You can nest landmark roles. You could really have a ridiculous Russian doll situation. But please don’t.
No, you really probably don’t.
I think of it this way: recognizing that my application is really probably 99.99% considered a document for accessibility reasons, is a fantastic way to keep me humble.
Here’s some further reading for the unconvinced:
- The WAI-ARIA specification: Application (role)
- Using ARIA: 2.11: Using ARIA role=application
- Article: If you use the WAI-ARIA role “application”, please do so wisely! by Marco
* saying “so, basically” is one of my pet peeves and guarantees that I will start to be cranky if you use that around me a lot, because in my experience the people who use that phrase are total self-absorbed jerks who love to hear themselves talk but have never finished a damn thought properly or cohesively in their lives but somehow they are the better developer than I am. Not that I am traumatized or anything, as I prove by my ironic use of the phrase. So ha! Or something.
** remember to scan your AT of choice to see how it does something similar.
Up next: There’s an addon for that.