JAWS screen reader does not read the Placeholder text of the <textarea> created using <TextFiled>

[v-ajrai]

JAWS screen reader does not read the Placeholder text of the <textarea> created using

Environment Information

Tool: JAWS
Browser: Chrome Version 87.0.4280.88 (Official Build) (64-bit)

Describe the issue:

JAWS screen reader does not read the Placeholder text of the <textarea> created using

Please provide a reproduction of the issue in a codepen:

https://codepen.io/v-ajrai/pen/MWjRMdO

Actual behavior:

JAWS screen reader does not read the Placeholder text of the <textarea> created using

Expected behavior:

JAWS screen reader should read the Placeholder text of the <textarea> created using

[ecraig12345]

We're rendering the placeholder with <textarea>'s native placeholder attribute, so if JAWS isn't reading that, it's either the intended behavior, or an issue with JAWS itself.

In general, placeholder text is not expected to work as hint text for screen reader users, and actually may not work so well even for sighted users. This article and this one have good explanations of some of the problems.

One alternative is to use TextField's description prop to display a line of small descriptive text below the field (which should also be read to screen reader users).

If you don't want to modify the design, you can provide additional info for only screen reader users via aria props:

• If you're using the placeholder as an alternative to a standard label (which as those articles mention, isn't great), you can provide an ariaLabel with the same text.
• If you have a visual label and want to provide more information, you can either:
  • provide an ariaLabel with the standard label text plus descriptive text
  • provide aria-describedby with the ID of an element positioned off-screen containing descriptive text

[msft-fluent-ui-bot]

Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes.