Forms with conditional sections - Accessibility

Question

Business banking space. I have a very long form, broken into multiple sections, across several pages, with Save, etc.

We only support Eng and Fre as languages. But the business could be anywhere, so we can't assume one phone format.

Some pages of the form have yes/no questions that drive whole sub-sections to appear. eg. if you check 'I am in school' box, you will be required to fill out several more fields about your school. (This would occur on the same page, not a separate page).

I am mindful of the need to not mess with context for visually-impaired users.

Is it all right to have the subsection hidden or collapsed until the user checks the box, and then it expands? How will a screen reader deal with that?

Answer 1

Yes, that's an ok pattern. You mentioned you didn't want to mess with context for visually-impaired users. That is true. However, you can change content and be ok.

With a checkbox that causes other stuff to appear, it's good to notify screen reader users that new information is now available. When a screen reader initially tabs through the interface to see what elements are there, the hidden stuff will obviously be skipped over. If they then tab to the checkbox and select it, they need to know something new is now on the page.

You can do this with a visually hidden aria-live region that you can populate with text. Something like:

<div class="visually-hidden" aria-live="polite"></div>

When the checkbox is selected, you'd update the <div> to

<div class="visually-hidden" aria-live="polite">Additional information is required for students</div>

Answer 2

@slugolicious's answer is great. Additional context is needed for the visually-hidden class. This class should not apply display: none to content. Instead it should reference CSS as shown here: https://stackoverflow.com/a/62109988/2120185