Textarea

The Textarea component has been designed with accessibility in mind.

It includes the following properties that provide additional information to screen readers:

These attributes help users better understand the component’s purpose and context when using assistive technologies. However, it’s important to follow best practices when using them:

1. Always prefer visible labels - Use the label prop whenever possible as visible labels benefit all users.
2. Use ariaLabel only when a visible label cannot be provided.
3. Use ariaLabelledby to associate the textarea with an existing visible label elsewhere in the DOM.

The ariaLabelledby prop works by referencing the id attribute of one or more other elements:

1. Assign a unique id to the element that serves as the label
2. Pass that id value to the ariaLabelledby prop of the Textarea component
3. For multiple labels, provide space-separated ids (e.g., "id1 id2 id3")

When a screen reader encounters the Textarea, it will use the content of the referenced element(s) as the label, reading them in the order specified.

Note that if both ariaLabel and ariaLabelledby props are provided, ariaLabelledby takes precedence.

The following code snippets show different ways to provide accessible labels:

// PREFERRED: Using the built-in label prop
<Textarea label="Feedback" placeholder="Please share your thoughts with us" />

Screen reader would announce: “Feedback”

// Use ariaLabel ONLY when a visible label cannot be provided
<Textarea
  placeholder="Please share your thoughts with us"
  ariaLabel="Feedback form for customer comments"
/>

Screen reader would announce: “Feedback form for customer comments”

// Use ariaLabelledby to reference an existing visible label elsewhere in the DOM
<div>
  <h3 id="feedback-heading">Share Your Feedback</h3>
  <p>We value your opinion about our services.</p>
  <Textarea placeholder="Please share your thoughts with us" ariaLabelledby="feedback-heading" />
</div>

Screen reader would announce: “Share Your Feedback”

// Multiple label references
<span id="form-context">Flight #KI2807</span>
<h3 id="feedback-section">Passenger Feedback</h3>
<Textarea ariaLabelledby="form-context feedback-section" placeholder="Tell us about your experience" />

Screen reader would announce: “Flight #KI2807 Passenger Feedback”

// Using both ariaLabelledby and ariaLabel (ariaLabelledby takes precedence)
<div>
  <h3 id="feedback-title">Customer Feedback</h3>
  <Textarea
    ariaLabelledby="feedback-title"
    ariaLabel="Share your thoughts about our service"
    placeholder="Tell us what you think"
  />
</div>

Screen reader would announce: “Customer Feedback” (ignoring the ariaLabel)

When using the help or error props, their content is automatically set as aria-describedby on the element.

Screen readers will announce this additional information after reading the component’s label.

<Textarea
  label="Feedback"
  placeholder="Please share your thoughts with us"
  error="This field is required"
/>

Screen reader would announce: “Feedback. This field is required.”

For special cases you can use your own, detached label. This approach can be useful when you need more control over the label’s styling or position:

<label htmlFor="feedback-textarea">Your feedback</label>
<Textarea
  id="feedback-textarea"
  placeholder="Please share your thoughts with us"
/>

Screen reader would announce: “Your feedback”

This method maintains the necessary association between the label and the textarea element for screen readers.

1. Always use a visible label when possible. The label prop is preferred over ariaLabel.

2. Only use ariaLabel when a visible label is absolutely not possible in your user interface.

3. Use ariaLabelledby to associate the textarea with existing visible labels that appear elsewhere in the interface.

4. Use clear, descriptive labels that explain what information is expected in the textarea.

5. Ensure that error messages are specific and helpful, guiding users on how to correct their input.

6. Consider that users with screen readers will interact with your textareas differently than sighted users. Test your forms with assistive technologies to ensure a smooth experience.