Aria-practices: Should Accordion Header expanding read Accordion Panel by default?

[RichieRunner]

The WAI ARIA best practices for Accordions does not prescribe the best practice on how Accordion Panel content should be read when the Accordion Header is expanded. From what I can see there are 2 approaches to this:

1. Panel content is automatically read when Header is expanded

2. Panel content is not automatically read when Header is expanded. Need an additional keyboard down keystroke to for screen reader to read the content inside panel

Screen Reader: NVDA

Which is the preferred approach?

[mcking65]

Please do not use aria-live to automatically read accordion panel content.

A good rule of thumb for ARIA is do not try to take control of the screen reader experience. Let screen reader developers and users control the screen reading experience by utilizing all the semantic information you have encoded with HTML and ARIA. If web developers started using aria-live to announce any new content that appears as a result of user action, the web would become unusable for screen reader users. So, we have to be especially cautious with use of aria-live to ensure that the situations that call for it are handled well by screen readers.

[mcking65]

@zcorpan, please keep questions like this in mind for the work on the live region guidance. We really do need some guidance around what types of content changes are appropriate for live regions.

[mcking65]

@RichieRunner, if this answers your question, please let us know.

[RichieRunner]

@RichieRunner, if this answers your question, please let us know.

I wasn't asking about aria-live. aria-live isn't used in the examples that i posted above.

[JAWS-test]

In one example, the focus remains on the button. In the other example, the focus is set to the displayed content via JS, so that the screenreader automatically outputs this content.

I would say:

• If only a short text (1-2 sentences) is displayed, as in the example, the automatic output is helpful.
• If a longer text or a form or a text with structure is displayed, the automatic output is not helpful.

Therefore there is no general rule

[mcking65]

The accordion pattern does not include guidance to move focus on expansion. This is true in the disclosure pattern as well.

By design, users can expand the content, and then, if desired, immediately collapse it. This aspect of the design, of course, is more for the benefit of sighted users. However, note that moving focus to trigger announcement of content is not especially helpful to a screen reader user who wishes to collapse the panel after hearing the content of the first element. The user still has to back track.

[RichieRunner]

The accordion pattern does not include guidance to move focus on expansion. This is true in the disclosure pattern as well.

By design, users can expand the content, and then, if desired, immediately collapse it. This aspect of the design, of course, is more for the benefit of sighted users. However, note that moving focus to trigger announcement of content is not especially helpful to a screen reader user who wishes to collapse the panel after hearing the content of the first element. The user still has to back track.

The first example keeps focus on the button on collapse, so that the collapsed content is not picked up by the screen reader.

Thank you everyone for your input. As there does not seem to be a prescribed preference, I think I will opt out for the 1st example, as I think it saves keyboard users one keystroke.