[BITV] 9.3.3.2/2.1 - Modal dialog "Online status" - The input field "What is your status" has a label, but it is not available to visually impaired users due to the use of "hidden-visually." (1)

[AndyScherzinger]

see also #37091

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-9f92015c98-v2-n1

[JuliaKirschenheuter]

Dear @michaelnissenbaum sorry for a stupid question but what is wrong with our hidden-visually class?

[michaelnissenbaum]

Hi @JuliaKirschenheuter. There's nothing wrong with the class. The issue lies elsewhere. It needs to be ensured that the input field has a visual label, and in our case, you are hiding the label element. Please make sure that placeholder attributes are not a substitute for a visual label.

[JuliaKirschenheuter]

Thank you @michaelnissenbaum!
I think design-wise there is no place for visual label. Should i in that case take a placeholder completely away?

[michaelnissenbaum]

@JuliaKirschenheuter , as I've mentioned before, we need a visual label. We can't do without it. Placeholder attributes are not a substitute for visual labels. In this case, you'll need to adjust the design accordingly or use flyout labels.

[JuliaKirschenheuter]

Hi @jancborchardt
what do you mean could we find a solution here with visible label?

[marcoambrosini]

@JuliaKirschenheuter we have this coming soon

[susnux]

we have this coming soon

I think this will help fixing a lot of those issues, where a "plain" label does not match and re misuse a placeholder for it instead :)

[JuliaKirschenheuter]

@michaelnissenbaum would you approve such solution? nextcloud-libraries/nextcloud-vue#4394 (comment)

[michaelnissenbaum]

I will accept the solution, just ensure that the contrasts of labels and graphical user interface elements such as input field borders meet the requirements.