How do I make this toggle / form-label accessible

Question

I have a large form witch contains some text input elements such as the one above. (Please don't mind the language in the form).

When a user clicks / taps anywhere on the item (from the picture at left all the way to the arrow at right), the input field is visible (by a slide animation).

The user can then click / tap on the same area (above the input field) to hide that input field again.

Try it live here.

Questions:

1. Is it that obvious that the label has this open / close function?

2. According to WCAG, when a user clicks or taps the label "Kompetenser", the cursor shall be placed inside the input field. Now the function has been altered. How does this affect accessibility?

3. Is there some other way this open/close function can be implemented and still be accessible? (No code, just the method)

Answer 1

Looking at the live example (within the context) I'd say:

1. Even for a person with limited IT-proficiency (as your target group would be here), I'd say it's obvious that there is a way to interact with the label. Just make sure that you keep the top-most label open by default to further help the user understand this.

2. Obviously not following the WCAG standard will have a negative effect, in this way it would make it less accessible from both an IDx and UX perspective. Does it matter much, no? At that point you are basically nit-picking. But I'd definitely have the text field automatically in focus when the label is opened.

3. Knowing the market in Sweden (I'm Swedish, living in the UK) I'd say that one way of making it more accessible would be to allow the user to change the display-language.

If we are nit-picking I'd say that all labels except the top-most should be kept closed by default. That way the the functionality would be intuitive for the user as well as you would limit the information that the user has to actively process as much as possible.

Utöver det, så ser allt bra ut! Bra jobbat! :)

Answer 2

For your assertion #2, can you provide the WCAG reference that says to move the focus? I'm pretty familiar with WCAG and am not aware of any criterion that says to move the focus but am willing to learn something new if you have a reference.

Typically, the opposite is true. You don't want to move the focus. See criterion 3.2.2 - "Changing the setting of any user interface component [such as clicking on your dropdown] does not automatically cause a change of context" [that is, don't move the focus].

I looked at your example and you're using aria-expanded and aria-controls so from an accessibility perspective, you're in good shape. When I move my screenreader focus to one of the dropdowns, I hear "expanded" or "collapsed", depending on its state, so I already have a clue that I can open and close the section.