ARIA Support

Definition

Using Tailwind's `aria-*` variants to style components based on their accessibility attributes, bridging the gap between styling and screen readers.

Explain Like I'm New

An accordion has an `aria-expanded="true"` attribute to tell blind users that it is open. You can use Tailwind's `aria-expanded:bg-blue-500` to magically change the background color ONLY when the accordion is open, relying strictly on the accessibility attribute as the source of truth.

Real World Example

Styling an active tab in a Tab Component using `aria-selected:border-b-2 aria-selected:border-blue-500`.

Common Use Cases

•Headless UI integration
•Complex interactive components

Interactive Example

Interview Questions

basic

What Tailwind variant allows you to style an element when its `aria-checked` attribute is set to true?

intermediate

Why is styling based on ARIA attributes considered a best practice for modern React components?

Flash Cards

Question

Which variant?

Click to reveal answer

Answer

`aria-checked:` (e.g., `aria-checked:bg-blue-500`).

Question

Why a best practice?

Click to reveal answer

Answer

Because it forces developers to add the correct ARIA attributes to their HTML. If the visual styling relies on the ARIA attribute to work, the developer cannot forget to include the ARIA attribute, ensuring the app is always accessible to screen readers.