ARIA Attribute Styling
Style elements based on ARIA attributes using CSS attribute selectors — disabled, expanded, selected states without extra classes.
Quick implementation
/* Style based on ARIA attributes without extra classes */
/* Selected State */
button[aria-selected="true"] {
background: var(--accent);
color: oklch(1 0 0);
font-weight: 600;
}
/* Expanded State */
button[aria-expanded="true"] {
border-left: 4px solid var(--accent);
}
/* Disabled State */
button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
background: var(--muted);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
Role: You are an expert CSS developer specializing in accessible UI patterns.
Task: Create CSS styles that visually reflect ARIA attribute states without adding extra classes to the HTML.
Constraints:
1. Use only CSS attribute selectors (e.g., [aria-expanded="true"]).
2. Do not use JavaScript to toggle classes.
3. Ensure styles are high-contrast and accessible.
4. Support modern browsers (Chrome, Firefox, Safari, Edge).
Requirements:
- Style a button when aria-selected="true" (active tab state).
- Style a button when aria-expanded="true" (accordion/toggle state).
- Style a button when aria-disabled="true" (inactive state).
- Use CSS variables for colors (var(--accent), var(--muted), etc.).
- Provide a fallback for older browsers if necessary.
Output:
Provide the CSS code and a brief explanation of how attribute selectors work in this context.Why this matters in 2026
Modern web development prioritizes semantic HTML and accessibility, making ARIA attributes essential for screen readers. By styling directly off these attributes, you ensure the visual state always matches the accessibility state, eliminating the risk of desynchronization that often occurs when relying on separate CSS classes toggled by JavaScript.
The logic
CSS attribute selectors like [aria-selected="true"] allow you to target elements based on their current state in the DOM. This approach reduces the need for "state classes" (e.g., .is-active) and keeps your HTML cleaner. The browser handles the rendering logic natively, ensuring that if the attribute changes, the style updates immediately without extra event listeners.
Accessibility & performance
This method improves accessibility by guaranteeing visual consistency with the DOM state, which is critical for assistive technologies. Performance is optimized because the browser's native CSS engine handles the state changes, removing the need for JavaScript to calculate and apply class changes on every interaction.