Interactions on the Web are getting more engaging and dynamic these days. In this modern web era, UI designers are coming up with rich interactions for users where information is available to them without requiring the page getting reloaded. Gone are the days where users clicked on a link or button and web page had to be reloaded to show the updated content. Now users click on a link  or button and additional content is available for users then and there!

WAI ARIA comes to the rescue!

WAI ARIA provides  a wide range of roles, states and properties which can be utilized to make the rich web interactions available for persons with disabilities. Assistive technology is used by persons with disabilities and to make the information related to dynamic and rich interactions understandable, it is required to convey the information semantically.

Semantics is used to convey information related to a user interface element’s role, states and properties that a user can understand. For example, if a <div> element is used to structure a button then it needs a role of “button” for a user to understand that it is a button that can be clicked. Next it needs a label (property) to understand what is the purpose of the button. If clicking on the button expands or collapses the content then it needs a state to convey this information.

In this post, we will be talking about one of the ARIA state aria-expanded!

aria-expanded is a WAI-ARIA state which is used to show the expandable and collapsible content. It is used to indicate that the element for which it is specified or another element that it controls is expandable or collapsible. As per the ARIA specification, aria-expanded has the following values:

• true: indicates that the element is expanded
• False: indicates that the element is collapsed
• undefined (default): indicates that the element is neither expanded or collapsed

Some of the roles for which aria-expanded state can be specified include button, Link, combobox etc.

Tip: All the leading browsers and screen reader combinations include support for aria-expanded!

Good code example of aria-expanded

On the BarrierBreak website, we have a navigation menu available in responsive mode. The menu is structured using a button and users can expand the menu to view the list of our services. Below code demonstrates how aria-expanded can be used to convey the menu button’s state for screen reader users:

<button id=”opennav” class=”navbar-toggler pull-xs-right mobile-menu col-style-1 active” type=”button” data-toggle=”collapse” data-target=”#mainNavbarCollapse” aria-expanded=”true” aria-label=”Site Navigation Menu”>

<i class=”vertical-align” aria-hidden=”true”></i>

</button>

Bad Code example of aria-expanded

If a page contains a link which opens in a new window, aria-expanded is specified for the link, which is not required. As aria-expanded defines the state of an element and in the case of links opening a new window the state of the link is not required to be conveyed to users. Below is a code example depicting incorrect use of aria-expanded:

<a href=”https://www.barrierbreak.com/accessibility-barrierbreak/” target=”_blank” aria-expanded=”false”>About Us</a>

Adding aria-expanded to the code is not rocket science! Yes, that’s correct but it needs to be implemented correctly. Check it by inspecting the code and most importantly get it tested by persons with disabilities using assistive technology to ensure that is done right!

Want to know more about our accessibility testing or our accessibility subject matter expert services? get in touch with us at sales@barrierbreak.com or Book an appointment with our account management team and we will be happy to help you!

The post aria-expanded: the Good and the Bad appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.