Screen reader issue with floating labels

[HalHaynes]

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

The floating labels are lovely but there's an accessibility issue for screen readers (at least for NVDA on Chrome in Windows). Because the label is required to come after the input field, the screen reader reads it after it reads the field's contents. The label should be read first. I see the explanation in the documentation that "Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~)" but unfortunately it creates this problem. (By the way, "e.g." = "exempli gratia" = "for [the sake of] example" is incorrect, this should read "i.e." = "id est" = "that is".)

Reduced test cases

This can readily be verified by running a screen reader over the examples at the documentation, https://getbootstrap.com/docs/5.0/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?

v5.3.3

[julien-deramond]

Thanks for reporting this issue @HalHaynes, we'll look into the accessibility concern you've raised.
You're absolutely right about the e.g. versus i.e. usage. That correction is being addressed in #41364 and will be included in the next release.

[RichardD2]

Seems like the :has() pseudo-class would be a good alternative for recent (December 2023 or later) browsers. Older brosers would probably need a JS-fallback.

For example, instead of:

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label

you could have:

.form-floating:has(> .form-control:focus) > label,
.form-floating:has(> .form-control:not(:placeholder-shown)) > label,
.form-floating:has(> .form-control-plaintext) > label,
.form-floating:has(> .form-select) > label

Then you could place the <label> before the <input>, and it would still work as expected.

[julien-deramond]

While I haven’t checked the use of :has in this precise context yet, this is likely one of the use cases where :has could be useful. It's currently not supported due to our existing .browserslistrc configuration. However, we're planning to revisit that for v6, so :has will probably be usable then.