I have noticed that the aria-label and aria-describedby attributes are being used on <div> elements that act as buttons for opening and closing the accordions. As you might be aware, according to the W3C standards, the aria-label and aria-describedby attributes are meant to be used with interactive elements or elements that have a semantic meaning, such as form elements or links, rather than generic container elements like <div>. Changing the markup to something likewould do the trick.

Resources: w3c.github.io/aria/#generic


Also, please note that I'm using <h2> in my example, but you use <h3>. I haven't found a way to change that, but we need a solution to avoid skipping a heading level, which is also a violation of the Accessibility standards. I'm thinking of something like, but maybe you already have that feature and I haven't seen it.

Thanks. Keep up the good work.

Aria attributes are not prohibited, but using aria-label and aria-labelledby is. You can confirm in the table here w3c.github.io/aria/#generic

I get what you mention as a possible problem, but shouldn't the devs fix that on their templates? They could always use the :not or :has pseudo-classes to style all the buttons that are not part of regularLabs. The small trade-off that you mention means not having a 100% accessible site because of what other template developers did. Besides, you can always add reset CSS rules to your own Tabs & Accordions plugin to avoid styling issues.

Thank you for the title-tag="..." trick. I did not see that in the documentation.