Server: Checkboxes and radio buttons accessibility

[jancborchardt]

You can test this in:

• Settings → Admin → Basic settings → Background jobs for radio buttons
• Settings → Activity or Admin → Groupware for checkboxes

Checkboxes only have tabbing feedback when they are not checked, and even then only the border color changes from grey to blue, which is not necessarily enough. When they are checked, there is no feedback whatsoever.

Radio buttons don’t have any feedback whatsoever, and are not possible to change at all via keyboard.

Some possible solutions:

• Radio buttons need to be possible to tab to in the first place. :)
• We could do something like border-bottom: 1px dotted var(--color-main-text); on focus for the label text.
• We also need to improve the highlight of the checkbox / radio button itself. How about a slight drop shadow around the element? (This is basically close to what is done via the outline element in Chrome.)

What do you think @nextcloud/designers @nextcloud/accessibility?

[henningoschwald]

I did a quick test using Firefox 64 on Linux and the Orca screenreader. I tried both Nextcloud 15.0.2 and Git master from yesterday (Jan 23nd.)

• The Cron method selection radio button was focussable with the keyboard and the buttons are propperly labeled. The whole radio element has no label, though, this should be fixed.
• The Checkboxes in Settings -> Groupware also worked for me as expected. I was able to reach them via tab and they also were propperly labeled, regardless whether they were checked or unchecked.

Maybe my screenreader is fixing some focussing issues automatically here, but I can not confirm the keyboard navigation issues. The only improvement I see would be adding the radio button labels.<<

[tyrylu]

Same there, Firefox 64 and almost latest NVDA snapshot.

[jancborchardt]

Oh, that’s good to know! Seems I’m more worried than necessary. :D Then it’s mostly the keyboard focus feedback which is missing.

The whole radio element has no label, though, this should be fixed.

@henningoschwald what do you exactly mean by that? The labels of the 3 radio buttons should be AJAX, Webcron and Cron in that order. Inspecting the code, the label shows up correctly assigned as label for="…", and the label is clickable and connected to the radio button.

[tyrylu]

Agreed, and it is read correctly. I am not sure, but that the missing label thing might be related to the fact that there infact is not a label for the entire set of radio buttons which does not concern me much, but it might be added, however i am not sure about the exact markup.

[jancborchardt]

@tyrylu ah of course, you mean a fieldset with legend? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

The h2 ("Background jobs") seems to be too far away, so I would add a fieldset and make the legend hidden-visually. It could say "Pick background job setting". Does that work for you?

[tyrylu]

Yeah, that's the one i was looking for.

[henningoschwald]

@tyrylu ah of course, you mean a fieldset with legend? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

You are both correct, @tyrylu and @jancborchardt, the labeled Fieldset for all elements of a radio button was what I meant. Sorry for not making this clear enough.

[jancborchardt]

No worries, we’re improving step by step and any feedback is valuable. Happy to have you on the team!

I’ll get to adding the fieldset then! :)

[jancborchardt]

Pull request open at https://github.com/nextcloud/server/pull/13818 – please check if that works, and thanks a lot!