Accessibility issues with floating labels/validation

[HaoK]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

We are using the floating label look (https://getbootstrap.com/docs/5.1/forms/floating-labels/) for our forms and we've run into an accessibility issue where in High Contrast mode, users expected that the fields and text inside should be in proper orientation since this may cause confusion for our keyboard users

Reduced test cases

Validation example in the docs demonstrates the issue (https://getbootstrap.com/docs/5.1/forms/floating-labels/)

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.1.0

[Mohamed4salatin]

No description provided.

[mdo]

we've run into an accessibility issue where in High Contrast mode, users expected that the fields and text inside should be in proper orientation since this may cause confusion for our keyboard users

I don't follow, what do expect to happen?

[merriemcgaw]

@mdo I believe the issue is that the boundaries of the label fall outside the boundaries of the text box.

[scottaohara]

Here's a demonstration of what is happening when someone has turned on windows high contrast mode:

colors that are defined as transparent become visible in high contrast mode, hence the above screenshot where the label's transparent borders, and the transparent placeholder text appear and create a poor user experience.

These styles should be adjusted either by refining the styling to remove these bad side effects for windows high contrast mode, but ideally the functionality of the positioning / dependency on the placeholder text should be re-considered. That way, authors wouldn't have to be informed of / have to worry about any styling updates they make having to work in both standard and high contrast modes, as well as the fact that requiring the use of placeholder text means that screen readers will announce, likely unnecessary, extra content for each of these form fields.

cc @patrickhlauke as an fyi

[patrickhlauke]

still trying to understand what the original problem reported by @HaoK is - not sure if @scottaohara's point is something else/unrelated or not.

as an aside, note that for security, some browsers (like Chrome) don't report/apply the :placeholder-shown pseudo until after a user has interacted with a control (presumably to avoid inferring information silently from a user, e.g. "has visited the page before", using some hidden form field) (edit: re-found the bug https://bugs.chromium.org/p/chromium/issues/detail?id=1141874)

[scottaohara]

My comment was to add clarity of what the issue is actually about.

[patrickhlauke]

so "users expected that the fields and text inside should be in proper orientation since this may cause confusion for our keyboard users" is meant to mean "in WHCM the floated label covers up the placeholder/text, then?

(might have been more immediately apparent if the screenshot had been of the same thing, or maybe i just haven't had enough coffee yet today)

[HaoK]

Yeah @scottaohara summarizes some of the issues well, sorry for the unclear description

[patrickhlauke]

x-ref #35941