aria-patterns

Name: aria-patterns
Author: dylantarre

33stars3forks

How to install aria-patterns?

dylantarre/design-system-skills/aria-patterns

$npx -y skills add dylantarre/design-system-skills --skill aria-patterns

Installs into the current project.

Summary

Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.

Files · 1

View on GitHub

SKILL.md

1	# ARIA Patterns Guide
2
3	## Overview
4
5	Implement accessible interactive components using correct ARIA roles, states, and properties. Provides copy-paste patterns for common widgets that work with screen readers and keyboard navigation.
6
7	## When to Use
8
9	- Building custom interactive components
10	- Making dynamic content accessible
11	- Fixing screen reader issues
12	- Adding keyboard support to custom widgets
13
14	## Quick Reference: First Rules of ARIA
15
16	1. Don't use ARIA if native HTML works - `<button>` over `<div role="button">`
17	2. Don't change native semantics - Don't put `role="button"` on a heading
18	3. All interactive ARIA elements must be keyboard accessible
19	4. Don't use `role="presentation"` or `aria-hidden="true"` on focusable elements
20	5. All interactive elements must have accessible names
21
22	## The Process
23
24	1. Identify component type: What widget pattern matches?
25	2. Check native HTML first: Can a semantic element do this?
26	3. Apply ARIA pattern: Roles, states, properties
27	4. Add keyboard support: Expected keys for the pattern
28	5. Test with screen reader: Verify announcements
29
30	## Component Patterns
31
32	### Button
33
34	Native (preferred):
35	```html
36	<button type="button">Click me</button>
37	```
38
39	Custom (when necessary):
40	```html
41	<div
42	role="button"
43	tabindex="0"
44	aria-pressed="false"
45	onkeydown="handleKeyDown(event)"
46	>
47	Toggle
48	</div>
49
50	<script>
51	function handleKeyDown(e) {
52	if (e.key === 'Enter' \|\| e.key === ' ') {
53	e.preventDefault();
54	e.target.click();
55	}
56	}
57	</script>
58	```
59
60	### Toggle Button
61
62	```html
63	<button
64	type="button"
65	aria-pressed="false"
66	onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')"
67	>
68	<span class="sr-only">Enable</span> Dark Mode
69	</button>
70	```
71
72	---
73
74	### Modal Dialog
75
76	```html
77	<div
78	role="dialog"
79	aria-modal="true"
80	aria-labelledby="modal-title"
81	aria-describedby="modal-desc"
82	>
83	<h2 id="modal-title">Confirm Action</h2>
84	<p id="modal-desc">Are you sure you want to proceed?</p>
85
86	<button type="button">Cancel</button>
87	<button type="button">Confirm</button>
88	</div>
89	```
90
91	Required behavior:
92	- Focus moves to dialog on open
93	- Focus trapped within dialog
94	- Escape key closes dialog
95	- Focus returns to trigger on close
96
97	```js
98	// Focus trap example
99	function trapFocus(dialog) {
100	const focusable = dialog.querySelectorAll(
101	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
102	);
103	const first = focusable[0];
104	const last = focusable[focusable.length - 1];
105
106	dialog.addEventListener('keydown', (e) => {
107	if (e.key === 'Tab') {
108	if (e.shiftKey && document.activeElement === first) {
109	e.preventDefault();
110	last.focus();
111	} else if (!e.shiftKey && document.activeElement === last) {
112	e.preventDefault();
113	first.focus();
114	}
115	}
116	});
117	}
118	```
119
120	---
121
122	### Dropdown Menu
123
124	```html
125	<div class="dropdown">
126	<button
127	type="button"
128	aria-haspopup="menu"
129	aria-expanded="false"
130	aria-controls="dropdown-menu"
131	id="dropdown-trigger"
132	>
133	Options
134	</button>
135
136	<ul
137	role="menu"
138	id="dropdown-menu"
139	aria-labelledby="dropdown-trigger"
140	hidden
141	>
142	<li role="none">
143	<button role="menuitem" tabindex="-1">Edit</button>
144	</li>
145	<li role="none">
146	<button role="menuitem" tabindex="-1">Duplicate</button>
147	</li>
148	<li role="none">
149	<button role="menuitem" tabindex="-1">Delete</button>
150	</li>
151	</ul>
152	</div>
153	```
154
155	Keyboard:
156	- Enter/Space: Open menu, activate item
157	- Arrow Down: Next item (or first if closed)
158	- Arrow Up: Previous item
159	- Escape: Close menu
160	- Home: First item
161	- End: Last item
162
163	---
164
165	### Tabs
166
167	```html
168	<div class="tabs">
169	<div role="tablist" aria-label="Account settings">
170	<button
171	role="tab"
172	aria-selected="true"
173	aria-controls="panel-1"
174	id="tab-1"
175	tabindex="0"
176	>
177	Profile
178	</button>
179	<button
180	role="tab"
181	aria-selected="false"
182	aria-controls="panel-2"
183	id="tab-2"
184	tabindex="-1"
185	>
186	Security
187	</button>
188	<button
189	role="tab"
190	aria-selected="false"
191	aria-controls="panel-3"
192	id="tab-3"
193	tabindex="-1"
194	>
195	Billing
196	</button>
197	</div>
198
199	<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
200	Profile content...
201	</div>
202	<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" hidden>
203	Security content...
204	</div>
205	<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" tabindex="0" hidden>
206	Billing content...
207	</div>
208	</div>
209	```
210
211	Keyboard:
212	- Arrow Left/Right: Move between tabs
213	- Home: First tab
214	- End: Last tab
215	- Tab: Move into panel content
216
217	---
218
219	### Accordion
220
221	```html
222	<div class="accordion">

People who liked this also viewed

6 picks

Type

aria-patterns

33stars3forks

View on GitHub

How to install aria-patterns?

dylantarre/design-system-skills/aria-patterns

$npx -y skills add dylantarre/design-system-skills --skill aria-patterns

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# ARIA Patterns Guide
2
3	## Overview
4
5	Implement accessible interactive components using correct ARIA roles, states, and properties. Provides copy-paste patterns for common widgets that work with screen readers and keyboard navigation.
6
7	## When to Use
8
9	- Building custom interactive components
10	- Making dynamic content accessible
11	- Fixing screen reader issues
12	- Adding keyboard support to custom widgets
13
14	## Quick Reference: First Rules of ARIA
15
16	1. Don't use ARIA if native HTML works - `<button>` over `<div role="button">`
17	2. Don't change native semantics - Don't put `role="button"` on a heading
18	3. All interactive ARIA elements must be keyboard accessible
19	4. Don't use `role="presentation"` or `aria-hidden="true"` on focusable elements
20	5. All interactive elements must have accessible names
21
22	## The Process
23
24	1. Identify component type: What widget pattern matches?
25	2. Check native HTML first: Can a semantic element do this?
26	3. Apply ARIA pattern: Roles, states, properties
27	4. Add keyboard support: Expected keys for the pattern
28	5. Test with screen reader: Verify announcements
29
30	## Component Patterns
31
32	### Button
33
34	Native (preferred):
35	```html
36	<button type="button">Click me</button>
37	```
38
39	Custom (when necessary):
40	```html
41	<div
42	role="button"
43	tabindex="0"
44	aria-pressed="false"
45	onkeydown="handleKeyDown(event)"
46	>
47	Toggle
48	</div>
49
50	<script>
51	function handleKeyDown(e) {
52	if (e.key === 'Enter' \|\| e.key === ' ') {
53	e.preventDefault();
54	e.target.click();
55	}
56	}
57	</script>
58	```
59
60	### Toggle Button
61
62	```html
63	<button
64	type="button"
65	aria-pressed="false"
66	onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')"
67	>
68	<span class="sr-only">Enable</span> Dark Mode
69	</button>
70	```
71
72	---
73
74	### Modal Dialog
75
76	```html
77	<div
78	role="dialog"
79	aria-modal="true"
80	aria-labelledby="modal-title"
81	aria-describedby="modal-desc"
82	>
83	<h2 id="modal-title">Confirm Action</h2>
84	<p id="modal-desc">Are you sure you want to proceed?</p>
85
86	<button type="button">Cancel</button>
87	<button type="button">Confirm</button>
88	</div>
89	```
90
91	Required behavior:
92	- Focus moves to dialog on open
93	- Focus trapped within dialog
94	- Escape key closes dialog
95	- Focus returns to trigger on close
96
97	```js
98	// Focus trap example
99	function trapFocus(dialog) {
100	const focusable = dialog.querySelectorAll(
101	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
102	);
103	const first = focusable[0];
104	const last = focusable[focusable.length - 1];
105
106	dialog.addEventListener('keydown', (e) => {
107	if (e.key === 'Tab') {
108	if (e.shiftKey && document.activeElement === first) {
109	e.preventDefault();
110	last.focus();
111	} else if (!e.shiftKey && document.activeElement === last) {
112	e.preventDefault();
113	first.focus();
114	}
115	}
116	});
117	}
118	```
119
120	---
121
122	### Dropdown Menu
123
124	```html
125	<div class="dropdown">
126	<button
127	type="button"
128	aria-haspopup="menu"
129	aria-expanded="false"
130	aria-controls="dropdown-menu"
131	id="dropdown-trigger"
132	>
133	Options
134	</button>
135
136	<ul
137	role="menu"
138	id="dropdown-menu"
139	aria-labelledby="dropdown-trigger"
140	hidden
141	>
142	<li role="none">
143	<button role="menuitem" tabindex="-1">Edit</button>
144	</li>
145	<li role="none">
146	<button role="menuitem" tabindex="-1">Duplicate</button>
147	</li>
148	<li role="none">
149	<button role="menuitem" tabindex="-1">Delete</button>
150	</li>
151	</ul>
152	</div>
153	```
154
155	Keyboard:
156	- Enter/Space: Open menu, activate item
157	- Arrow Down: Next item (or first if closed)
158	- Arrow Up: Previous item
159	- Escape: Close menu
160	- Home: First item
161	- End: Last item
162
163	---
164
165	### Tabs
166
167	```html
168	<div class="tabs">
169	<div role="tablist" aria-label="Account settings">
170	<button
171	role="tab"
172	aria-selected="true"
173	aria-controls="panel-1"
174	id="tab-1"
175	tabindex="0"
176	>
177	Profile
178	</button>
179	<button
180	role="tab"
181	aria-selected="false"
182	aria-controls="panel-2"
183	id="tab-2"
184	tabindex="-1"
185	>
186	Security
187	</button>
188	<button
189	role="tab"
190	aria-selected="false"
191	aria-controls="panel-3"
192	id="tab-3"
193	tabindex="-1"
194	>
195	Billing
196	</button>
197	</div>
198
199	<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
200	Profile content...
201	</div>
202	<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" hidden>
203	Security content...
204	</div>
205	<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" tabindex="0" hidden>
206	Billing content...
207	</div>
208	</div>
209	```
210
211	Keyboard:
212	- Arrow Left/Right: Move between tabs
213	- Home: First tab
214	- End: Last tab
215	- Tab: Move into panel content
216
217	---
218
219	### Accordion
220
221	```html
222	<div class="accordion">

People who liked this also viewed

6 picks

Type