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=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
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!