There’s an addon for that.

Now that you understand the TL;DR basics (and more if you’ve followed the links) about landmark roles, it’s now time to tell you that there’s an addon for that.

My Mother’s Day gift was time (seriously, best gift ever), and I had the entire day to myself to work on personal code. I used part of that day to build an Ember addon that will help with landmark roles: ember-a11y-landmarks.

How it works

This template code:

Renders into this:*

You’ll notice a few things:

1. It’s meant to be used as a containing block.
2. the appropriate ARIA role is determined and added automatically.
3. Remember when you learned that certain landmark roles don’t have to have roles attached if they are direct children of the body element? Yeah, that doesn’t really work in Emberland, because there’s always that div element around everything. BUT, this made the addon a bit easier to write.
4. “But what about a form element that’s got the role of search?” I’m so glad you asked!

Form vs Search

Since the form element can have either role=form or role=search depending on use, you’ll need to define both in this case.

So this template code:

Renders into this:*

Guardrails

This addon might not be everyone’s favorite. It doesn’t allow the usual indulgence that a lot of JS Engineers are typically used to having, due to HTML’s implicit tolerance. Accessibility, however, really depends semantic HTML! This addon helps you achieve that for your elements that should have landmark roles, and the console log error messages will help you do the correct thing. So maybe it will BECOME your favorite.

1. You must define a tagName OR a landmarkRole.
2. You shouldn’t define a tagName AND a landmarkRole, unless you’re using tagName=form and landmarkRole=search.
3. If you try to use non-valid values, it will throw an error (and tell you what the valid values are)
4. If no tagName is defined, a div is used as per (Ember) usual.

Valid tagName values

• aside
• footer
• form
• header
• main
• nav
• div (default)

Valid landmarkRole values

• application
• banner
• complementary
• contentinfo
• document
• main
• navigation
• region
• search

You’ll notice that “form” is not a valid landmarkRole here, and that’s because the tagName=form should be set instead. Again, a friendly Ember.assert will help you here, too.

Considerations for use

Building this addon was more about me learning all of the little details that go into building an addon. I’ve thusfar worked on other addons but have never built one from start to publish on my own. As such, I’m not unrealistic about the simplicity of it.

There is also still an issue where I haven’t decided how to handle the role=application/role=document issue. I have to think more about that and probably will ask for some advice from the community about it, because there really should be specific checks in place that help that use case be successful.

But if you wanted to try it out, then feel free to `ember install ember-a11y-landmarks` and give it a go.

You can also tell me all the ways my code is wrong here, or contribute a PR here (thank you to @endangeredmassa and @ksin for being great early contributors!).

 

---

*Your search sample code probably looks better. I know.