Argthtjtr

I have a expandable div element which is expanded when user clicks.
How can i make it accessible through screen readers.
Below is my code

HTML

    <div class="expandable" (click)="expandItem()" attr.aria-expanded="isCollapsed">

    Some content to show on expand

</div>

JS:

expandItem() {

  this.isCollapsed = true

}

variable isCollapsed is set to false initially.

I might be showing my javascript ignorance but I haven't seen (click)="expandItem()" or attr.aria-expanded="isCollapsed" before. I have seen onclick="expandeItem()" and aria-expanded="false". But I'll ignore that aspect for now.

First off, your <div> has no semantic meaning so you'll need several ARIA attributes to fix that. But before you do that, consider the "First Rule of ARIA Use", which is essentially to not use ARIA. Use native semantic HTML elements as your first choice if possible.

I'd need more information on your scenario but consider using a real <button> instead of a <div>. It sounds like you might have a "disclosure widget".

If a real <button> is not used, then your <div> will need:

• 
  tabindex="0" (to allow keyboard focus to move to it)


• a click handler (for mouse users)


• a keyboard handler (for keyboard users to use space and enter to select it)


• a role="button" so a screen reader announces the proper semantics


• (I'm assuming your <div> has a label)

In addition to that, then you need to resolve your aria-expanded issue. In the onclick of the button (or div), just toggle the value of aria-expanded. Since that attribute is a "state" (instead of a "property"), changing its value will be announced automatically by screen readers.