search

RockefellerArchiveCenter / styles

Style Library for the Rockefeller Archive Center
https://styles.rockarch.org
MIT License
0 stars 1 forks source link

Help text on forms should be programmatically associated with the input element #170

Closed HaSistrunk closed 9 months ago

HaSistrunk commented 1 year ago

Is your feature request related to a problem? Please describe.

Currently, the help text is a paragraph before the form field. This is not best practice, because screen reader users are much more likely to skip over regular text when filling out a form as they move from input to input.

Describe the solution you'd like

Connect the form field description with the input by assigning an id to the text and an aria-describedby that points to that id on the input.

Additional context

Help text in forms has been correctly coded in DIMES - the My List forms with descriptive text link the text to the input using aria-describedby. Note that descriptive text can also be associated with multiple inputs using the same method.

helrond commented 9 months ago

I'm seeing aria-describedby in use in the select, textAreaInputs and textInputs components. Are there other places where this is missing?

HaSistrunk commented 9 months ago

We use it in the error messages, but not the paragraphs with the input__help-text class. So textAreaInputs needs that added to the story with help text. The <textarea> needs an aria-describedby that points to an id in the paragraph element.