I want to know why the aria is not expanded when clicking.

code:

<div  tabindex="0" role="button" aria-label="Vaccine Brand More Information" aria-expanded="false" aria-controls="filter_dialog"\>

CodePudding user response：

That attribute won't change its value by itself. You need to add some steps to your script that change the attribute to "true" when you click the element to expand, and back to "false" when you click again to close it.

CodePudding user response：

ARIA is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities.

Aria expanded

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

So you're the one supposed to change that value based on whether the content is expanded.

Aria owns

There are two declarations that can be applied to objects that control the visibility of another object: aria-controls, or aria-owns combined with aria-expanded.

If an element visually, functionally, or contextually appears to "own" (be an ancestor of) an element, but isn't actually an ancestor of the element in the DOM, include the aria-owns to create that relationship.

So you also need to add aria-owns which includes the id of the children if you're going to use aria-expanded.

<div 
   
  tabindex="0" 
  role="button" 
  aria-label="Vaccine Brand More Information" 
  aria-expanded="false" 
  aria-controls="filter_dialog"
  aria-owns="children"
\>
<div id="children"> 
  ...
</div>