What is the ARIA role of a div?

Question

What is the default ARIA role of a div or span in HTML? Or, in other words, what is the ARIA role of non-interactive elements and the elements that don't have a specific ARIA role assigned to them? Is it none/presentation? Or is it not defined? And if it is, do they have any different meaning than none/presentation?

Answer 1

The definitive answer to this and all similar questions can be found in the ARIA in HTML specification. [Note, this is different from the ARIA specification, because ARIA in principle at least can be used in other markup languages, and the ARIA spec itself makes no specific mention of HTML.]

In particular, the table in this section gives the "implicit role" of each HTML element. It makes clear that divs (and spans too for that matter) have the implicit (= assumed/default) role of generic.

Looking that up in the ARIA specification itself, the generic role is one that you can't (or at least shouldn't) use yourself as an HTML role attribute value - but is strongly related to the roles (that you can use) none and presentation. These 2 roles are synonyms of each other, so there is no difference between the two (but presentation is seen more often, at least in part because it's been around for longer). Both remove all semantic meaning from the element - which means screenreaders and other assistive technologies will read out the content of these elements, including any nested content with a semantic role, but that the div element itself has no semantic meaning. As far as assistive technology is concerned that <div> might as well not be there and just be replaced by whatever its children are. (This is different from marking something with aria-hidden="true" which means neither the element itself nor any of its children will be exposed to assistive technologies - with generic roles the content is still there, it just has no semantics attached.)

I'm not 100% clear on what the difference is between the generic role and none/presentation, but the ARIA spec (same section as I linked to above) has this distinction:

However, unlike elements with role presentation, generic elements are exposed in accessibility APIs so that assistive technologies can gather certain properties such as layout and bounds.

The difference probably doesn't matter unless you're programming a browser or an assistive technology, as web authors as already mentioned should not use the generic role.