react-codemirror2 icon indicating copy to clipboard operation
react-codemirror2 copied to clipboard

Accessibility improvement for <textarea> form control element

Open sara-akhtar opened this issue 2 years ago • 4 comments

There's an issue that's impacting multiple components in our application. The <textarea> element has no associated label which doesn't allow the browser to announce the control to a user that may need it.

Recommendations on fixes:

  • If the control is a labelable element, add a for attribute to a visible label with the id of this control (e.g.
  • Or, if the control is a labelable element, put the control inside a visible
  • Or, add an aria-labelledby attribute to the control. It must point to visible text on the page that is meaningful as a label;
  • Or, if the design cannot have a visible label, provide a label using the aria-label attribute (e.g. aria-label="Activities");
  • Or, if the design cannot have a visible label, use the title attribute to provide a label.

Screenshot 2023-03-09 at 2 00 44 PM

Screenshot 2023-03-09 at 2 04 24 PM

sara-akhtar avatar Mar 09 '23 21:03 sara-akhtar

@scniro any updates on this bug?

sara-akhtar avatar Apr 11 '23 23:04 sara-akhtar

By default, there is no label, but you can set it in the options as screenReaderLabel - will set it as aria-label.

alestrunda avatar Jan 24 '24 08:01 alestrunda