WAI ARIA global attributes

Overview

WAI ARIA global attributes(states and properties)  are the attributes that can be defined for any host language element whether role is applied or not. Let me explain this with simple example. Aria-label(property) is the global attribute as per the specification. Since aria-label is global attribute, author can define this attribute for any host language element(such as <div>, <span>, <a>, <button>, and so on..). Apart from that, global attributes are also applicable for any base roles (such as role=”link”, role=”button” and so on..). To put it in the technical terms, global attributes inherits into any host language elements as well as any ARIA roles. The following are the list of the global states and properties’ that are applicable for any base markup and any role. This list is based on the aria 1.1 specification and this list may subject to change depending on the future versions of aria

  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-current (state)
  • aria-describedby
  • aria-details
  • aria-disabled (state)
  • aria-dropeffect
  • aria-errormessage
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-keyshortcuts
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant
  • aria-roledescription

Complementary info on the aria global attributes versus presentational role

As discussed in the none role/presentational role blog post, presentational role negates the element semantics. However, there is an exception to this. The exception is that When presentational role(role=”presentation”) is defined on the element that has implicit native semantics as well as the global attributes then assistive technologies ignore the presentational role and exposes the element’s role/semantics. Let us look into this with sample code snippets.

Sample code snippet

<!—1. [Role=”presentation”] is ignored due to the global aria-haspopup property and as a result, assistive technologies expose the heading semantics. –>

<h1 role=”presentation” aria-haspopup=”true”> Sample Content </h1>

<!– 2. [Role=”presentation”] negates the both the implicit ‘heading’ and the non-global level as there are no global attributes. –>

<h1 role=”presentation” aria-level=”2″> Sample Content </h1>

References

3 Replies to “WAI ARIA global attributes”

  1. Sample Content
    Isn’t this example wrong? The role=heading is not provided & providing role=presentation without the role=heading with aria-level doesn’t work… Am not sure how role=presentation is making any differentiation here on the example.
    Sample Content
    Even this example seems wrong… Why do we provide haspopup for a heading tag?

  2. Hello Jeremy,
    Thank you for your feedback.
    Please see my comments in the inline below

    your question: Sample Content
    Isn’t this example wrong? The role=heading is not provided & providing role=presentation without the role=heading with aria-level doesn’t work… Am not sure how role=presentation is making any differentiation here on the example.
    Suman: Great question. As per the specification, we can use the non global attributes(ex: aria-level) if it have corresponding HTML implicit semantics too. here, the tag

    has the implicit semantics of heading and we can absolutely use aria-level without using of role=”heading”. hope it is clear

    your question: Sample Content
    Even this example seems wrong… Why do we provide haspopup for a heading tag?
    Suman: As mentioned in this blog post, aria-haspopup is global attribute which means we can use for any kind of base markup. only the condition is the element that has aria-haspopup must be focusible. There might be situations in the rich applications where element may act as both heading and submenus. in fact, i have seen these kind of implementations in my experience.
    Please let me know if you may have any other queries.
    Thank you.

  3. I just commented on your query and please see my comments on the blog post in the comments section. you would have not got notification for some reason.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.