Accordion Example usability issue with VoiceOver for MacOS

[krikienoid]

When testing the Accordion Example on VoiceOver for MacOS, the screen reader announces the headings, but does not announce the presence of a button, so there is no indication to the user that the element can be interacted with to reveal more content.

Expected behavior: When the VO cursor is focused over the first accordion item (Personal Information), VO should announce "Personal Information, collapsed, button" if it is closed or "Personal Information, expanded, button" if it is open. In VO, the expected behavior for any element that uses the aria-expanded property is to announce the button as "[button label], [collapsed/expanded], button".

Current behavior: When the VO cursor is focused over the first accordion item, VO announces "heading level 3, Personal Information".

• The accordion item can still be opened/closed by pressing the VO+SPACE command while the cursor is over the heading, however, visually impaired users will likely not know to do this without some kind of indication from the screen reader that this element can be interacted with, it would just appear to be an ordinary heading element to them.
• Users can navigate inside of the heading with VO+SHIFT+DOWN, then the screen reader will properly announce the button, but I think this is not something users are likely to do, so this will be easlily missed.

Possible solution: One possible solution is to make the <button> a sibling of the<h3> rather than a child of the <h3>, that way, VO users can perceive both the heading and the button. CodePen Link. I have not tested this in other screen readers, this is just an idea.

[JAWS-test]

The question with such screen reader errors is always whether the correct example should be adjusted or the screen reader should fix its error.

[mcking65]

When I navigate the accordion with VoiceOver using either Safari or Chrome in macOS 13.4, I hear:

Heading level 3 Personal Information expanded button Heading level 3 Billing Address collapsed button

I get the above output whether navigating with the 'h' key or ctl-opt-right/left.

If tabbing, the heading is not announced; that kind of makes sense.

If you have a newer version of macOS, then there is definitely a regression.