Home > database >  What is the ARIA role of a div?
What is the ARIA role of a div?

Time:12-05

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 or presentation? Or is it not defined? And if it is, do they have any different meaning than none or presentation?

CodePudding user response:

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.

CodePudding user response:

The default ARIA role of a div or span in HTML is "presentation". This means that the element is not interactive and does not have any specific ARIA role assigned to it. The role of "none" is similar to "presentation" in that it indicates that the element is not interactive, but it explicitly states that the element should not be included in the accessibility tree. The meaning of "none" and "presentation" is the same in terms of the element's role in accessibility, but "none" may be used in situations where it is necessary to explicitly exclude the element from the accessibility tree.

  • Related