Nesting ARIA roles

A couple of people have asked me recently if it’s possible to nest ARIA roles. The answer: yes.

Not all of them, of course. Think of HTML elements; you can nest <div>s inside <nav>s and <nav>s within <header>s, but you can’t put an <a> inside an <input> or put an <input> inside another <input> – they just wouldn’t make sense.

In ARIA, it’s perfectly fine to have role=article inside role=main (which is completely analogous to an HTML5 <article> inside a <div id=”main”>.

It’s also fine (as far as I know) to have roles like main inside a <table role=”presentation”>. Although the table is presentational only (it’s an old-fashioned layout table), it doesn’t mean that all the contents are presentational – one cell could contain the entire main content of a site and therefore quite legitimately have a role="main".

The rule of thumb I use is: if your nesting feels right, it probably is right.

Note also that the HTML5 validator also validates ARIA. Even if your content isn’t HTML5, it’s still worth running it through the validator.

Note, I’m not an ARIA expert. Please, if I’ve made a mistake, let me know!

7 Responses to “ Nesting ARIA roles ”

Comment by Alan Bristow

Thanks for this Bruce, sounds like it is AOK to nest NAVIGATION in BANNER, excellent.

Also good to know the validator tests ARIA. I was sceptical if it would check nesting (I was probably wrong for being so) but even if it doesn’t now, it will one day I’m sure.

Comment by Jared

The ARIA spec provides little guidance about such things. It documents some appropriate usages and patterns, but doesn’t really document incorrect usage
– and thus the validators do not flag such things. This results in the usage of ARIA on elements that make no sense – such as input role=”main” or the redundant button type=”button”, etc. These are generally perfectly valid. It’s assumed that authors will use ARIA correctly.

Comment by steve faulkner

@Jared
As ARIA can be applied to multiple langauges it does not define rules for a particular langauge, they are supposed to bedefined in the host langauge.
The HTML5 spec provides the conformance criteria for what roles can be uaed on what elements 3.2.7 WAI-ARIA.
So inputs cannot have role=main. input type=”button” can have role=button as it is required for non global aria-* attributes for (example aria-pressed=true)

When updated, validators will hopefully flag redundant role usage in cases where it is not required. This issue is still under discussion

@bruce
The W3C validator ARIA rules and validator.nu ARIA rules are woefully out of date and do not reflect the conformance criteria as set out in HTML5, so their use to check ARIA conformance in HTML5 is not advised.

Comment by steve faulkner

“so there is no method of validating ARIA at the moment? Bit of an impediment to its uptake, I’d imagine!”

I don’t think so, and remember the rules of use in HTML5 have only been stable for a few months.

Comment by Jared

The only validation that’s really possible right now is ensuring that the role and ARIA attributes are valid. There are a few additional requirements that could be validated, such as only one role=”contentinfo” per page, but beyond that, the ARIA spec just does not define additional usage requirements, validation rules, or even error handling.

Comment by Steve Faulkner

@Jared

WAI-ARIA roles, states, and properties are available in a number of machine-readable formats to support validation of content using WAI-ARIA attributes. 10.1. Schemata