Accessibility of input fields

[mma1504]

Hi there, wondering if this form format is accessible because it's technically two inputs with a single label, but also because I think typically we're not supposed try and form sentence structures with labels and inputs.

Is that correct? Would the more accessible construction be something like:

Label:
Badge input behavior
Input:
Increase
Decrease
Set amount

Label
Amount
Input
0, 1, etc.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Yes, you're correct. According to the Paste design system guidelines, each form field should have its own label. This is important for accessibility as it helps screen readers and other assistive technologies understand the purpose of each field.

In your suggested construction, you've separated the two inputs with their own labels which is a more accessible approach. Here's how it aligns with the guidelines:

• You've included a visible label on all form fields.
• Each label uses the htmlFor prop that equals the id of the associated input.
• You've avoided forming sentence structures with labels and inputs.

So, your construction would look something like this:

<Label htmlFor="badgeInputBehavior">Badge input behavior</Label>
<Input id="badgeInputBehavior" type="text" placeholder="Increase, Decrease, Set amount" />

<Label htmlFor="amount">Amount</Label>
<Input id="amount" type="number" placeholder="0, 1, etc." />

Remember to avoid using placeholder text as the main form of instruction, as it disappears when the user starts typing and is not broadly supported by assistive technologies. Instead, consider using Help Text to provide additional context and instructions.

---

Here are some similar discussions:

• Accessibility considerations for multiple inputs (updated: 2022-02-07T19:27:18Z, similarity score: 0.88)
• Are labels required for all inputs? - Answer (updated: 2020-10-06T14:53:43Z, similarity score: 0.86)
• Modal form with Two inputs with one label - Answer (updated: 2022-10-10T22:18:21Z, similarity score: 0.86)