0

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?

Rafid Muhymin Wafi
  • 328
  • 3
  • 12

1 Answers1

3

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.

Robin Zigmond
  • 17,805
  • 2
  • 23
  • 34
  • I think the importance of the difference to devs is whether it makes sense to add role="none" (or presentation) to divs or just leave the div without a role. It sounds from the quoted portion of your answer that there might be a performance benefit to using none/presentation, so that the assistive tech knows to just ignore the element entirely. Does this sound accurate? – dibbledeedoo Mar 24 '23 at 15:36
  • I don't think performance as far as assistive tech is concerned is an issue - it's the browser that reads the markup and converts that to an accessibility tree that's exposed to the OS's accessibility API, and the assistive tech just works with that. If performance is significant at all here (which I'm inclined to seriously doubt), it's the performance of the browser that matters, and can't imagine there's any appreciable performance benefit to include `role="none"`. I suspect if anything it might be the other way round, as browsers will optimise for the most common case. – Robin Zigmond Mar 24 '23 at 23:21