Website Accesability

Design help General
1

My client has engaged a 3rd party company to conduct a web accessibility audit on a site I created for them a while back. I’ve been able to address all the issues they’ve flagged except for one.

I have a DIV that is acting as a button that triggers an animation/interaction that reveals more content. The audit company is telling me that for accessibility reasons the DIV “button” needs to communicate to screen readers that the button has been pressed and the content has been “expanded”

Specifically, this is what they are suggesting that I do:

Add an aria-controls attribute to the element that controls the expandable content and set the value of that attribute to equal the id of the tag that wraps the expanded content. Also add an aria-expanded="true" attribute to that same control element when content is expanded, and aria-expanded="false" otherwise.

Unfortunately, this is beyond my expertise. Is this difficult to do? Is anyone familiar with this type of situation or has run into similar issues in regards to accessibility audits?

Any help would be greatly appreciated!

2

found a solution here:
https://webflow.com/accessibility/checklist/task/ensure-accordions-are-keyboard-navigable

3

Great that you found solution yourself.

Just to explain it here, you just have to add Custom Attributes from the element’s Settings Panel.

  • Select your element
  • Go to Settings Panel or press D
  • Under Custom Attributes > click + icon
  • On the popup add Name and Value for your custom attribute and click Save

Above document explains about integrating accordion but also explains the use of custom attributes. It is best to check that as well, it’s practical.

By the way @bryantay, your issue seems to be solved so it would be great if you can close this; so it wouldn’t appear as unsolved.

4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.