---
title: "@aria Mixin for Accessibility"
description: "Use @aria mixin for ARIA attribute selectors in Shilp CSS."
keywords: ["@aria", "ARIA", "accessibility mixin", "attribute selector"]
---

# @aria Mixin

Use `@aria` mixin for ARIA attribute (`aria-*`) selectors.

Usage:

Usage:

```css
.any-class {
	/* normal */
	@aria <variant> { ... }

	/* functions */
	@childs <variant>("<arguments>") { ... }
}
```

<Alert variant="info">

This page contains only the **mixins configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	target: "react",

	mixins: {
		aria: {
			variants: {
				// busy: `&[aria-busy]`,
				// checked: `&[aria-checked]`,
				// disabled: `&[aria-disabled]`,
				// expanded: `&[aria-expanded]`,
				// hidden: `&[aria-hidden]`,
				// invalid: `&[aria-invalid]`,
				// pressed: `&[aria-pressed]`,
				// "read-only": `&[aria-readonly]`,
				// required: `&[aria-required]`,
				// selected: `&[aria-selected]`,

				/* functions */
				// @aria is("disabled=false"); --> &[aria-disabled=false]
				is: "&[aria-<1>]",
			},
		},
	},
};

export default shilpConfig;
```

</section>