---
title: "Show state through attributes · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/naming-and-state/state-in-attributes
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Show state through attributes

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- Rule: Express state with the attribute that carries it, such as `aria-expanded`, `aria-current`, `aria-invalid`, `disabled`, `hidden` or `data-state`. Never add a state class such as `is-open` or `active`.
- How: A state class shows the state to sighted users only. The ARIA attribute also tells assistive technology, which WCAG 4.1.2 requires for every control whose state a user can change. Style the attribute directly, so the visible state and the announced state can never disagree. Use `data-state` only for states that have no standard attribute, such as `data-state="loading"`. List every state in the catalogue from [Show every component state in a catalogue](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-catalogue).
- Check: The stylesheets have 0 class selectors starting with `is-` or `has-` or equal to `active`, `open`, `selected` or `current`. Every element with `aria-controls` that opens or closes its target, such as a disclosure or menu button, also has `aria-expanded`.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### HTML example

```html
<button class="faq-toggle" aria-expanded="false" aria-controls="faq-answer-delivery">Do you deliver?</button>
<div class="faq-answer" id="faq-answer-delivery" hidden>Yes, within 5 km of the bakery.</div>
<a class="site-nav-link" href="/menu" aria-current="page">Menu</a>
```

### CSS example

```css
/* Avoid */
.faq-toggle.is-open { }

/* Do: the same attribute the screen reader announces */
.faq-toggle[aria-expanded="true"] { }
.site-nav-link[aria-current="page"] { }
.order-list[data-state="loading"] { }
```

## Sources

- [WCAG 2.2 Name, Role, Value](https://www.w3.org/TR/WCAG22/#name-role-value)
- [WAI-ARIA 1.2 aria-expanded](https://www.w3.org/TR/wai-aria-1.2/#aria-expanded)

## Related rules

- [Show every component state in a catalogue](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-catalogue) in App interface
- [Keep script hooks apart from style hooks](https://agentwranglers.se/playbook/html-css/naming-and-state/separate-script-hooks) in HTML and CSS

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/naming-and-state/state-in-attributes">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Use one naming pattern for every class](https://agentwranglers.se/playbook/html-css/naming-and-state/one-class-name-pattern)
- Next: [Never style by position or deep nesting](https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors)
- [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)