web-accessibility

Name: web-accessibility
Author: ziniman

27stars1forks

How to install web-accessibility?

ziniman/ai-instruct/web-accessibility

$npx -y skills add ziniman/ai-instruct --skill web-accessibility

Installs into the current project.

Summary

Use this skill whenever the user is building or reviewing any web UI. Accessibility is a baseline requirement, not a niche concern. Covers WCAG 2.2 AA, semantic HTML, ARIA patterns, keyboard navigation, focus management, color contrast, touch targets, forms, and testing with axe

Files · 1

View on GitHub

SKILL.md

1	# Web Accessibility Guide
2
3	> Applies to: Any website or web app \| Updated: March 2026
4
5	A practical reference for building accessible websites - covering WCAG 2.2 criteria, semantic HTML, ARIA, forms, touch, and testing.
6
7	---
8
9	## Section 0: Before You Start
10
11	Answer these questions before generating accessibility code. Each answer changes which sections apply.
12
13	Q: Where are your users?
14	Default: worldwide - EU/UK requirements (EAA, PSBAR) will be flagged as applicable throughout this guide.
15	Options: US only \| Europe/EU \| UK \| Worldwide
16
17	Q: What kind of product is this?
18	Default: company/marketing website
19	Options: Company/marketing website \| Online shop/e-commerce \| Web app/SaaS \| Media/video site \| Document tool
20
21	Q: Will people use this on mobile phones or tablets as well as desktop?
22	Default: yes - touch target sizing and pointer accessibility sections apply.
23
24	Q: Are you building with a component library?
25	Default: none
26	Options: Radix UI \| shadcn/ui \| MUI \| Chakra UI \| Other \| None - if a library is detected in `package.json`, note which accessibility features it handles natively so you don't duplicate them.
27
28	Q: Do you need to comply with a specific standard for legal or contract reasons?
29	Default: WCAG 2.2 AA - current best-practice baseline.
30	Options: WCAG 2.1 AA \| WCAG 2.2 AA \| Section 508 \| EN 301 549 \| Not sure
31
32	> AI assistant: Use these answers to prioritize. For EU products: apply EAA compliance notes. For mobile: apply touch target and pointer sections. If a known accessible component library is detected, note which patterns it handles so you don't duplicate effort.
33
34	---
35
36	## Contents
37
38	1. [Legal & Compliance](#legal--compliance)
39	2. [WCAG Standards Overview](#wcag-standards-overview)
40	3. [WCAG 2.2 - What's New](#wcag-22--whats-new)
41	4. [Semantic HTML](#semantic-html)
42	5. [Keyboard Navigation](#keyboard-navigation)
43	6. [ARIA](#aria)
44	7. [Images & Media](#images--media)
45	8. [Forms](#forms)
46	9. [Touch & Pointer](#touch--pointer)
47	10. [Color & Contrast](#color--contrast)
48	11. [Focus Management](#focus-management)
49	12. [Motion & Animation](#motion--animation)
50	13. [Testing](#testing)
51	14. [Anti-Patterns to Flag](#anti-patterns-to-flag)
52	15. [Checklist by Product Type](#checklist-by-product-type)
53
54	---
55
56	## Legal & Compliance
57
58	Accessibility is a legal requirement across most major markets. Non-compliance carries real risk - fines, market access restrictions, and litigation.
59
60	\| Jurisdiction \| Law / Standard \| Scope \| Notes \|
61	\|---\|---\|---\|---\|
62	\| EU \| European Accessibility Act (EAA) \| Private-sector e-commerce, banking, transport, streaming. Enforceable since June 28, 2025. \| Standard: EN 301 549 v3.2.1, which references WCAG 2.1 AA; WCAG 2.2 strongly recommended. Non-compliance = market access restrictions. \|
63	\| US \| ADA Title III \| Private-sector websites and apps \| ~4,000 - 4,500 lawsuits/year; e-commerce and hospitality are primary targets. Overlay-only solutions have been named in lawsuits as insufficient. \|
64	\| US Federal \| Section 508 \| Federal agencies and contractors \| References WCAG 2.0 AA. Agencies procuring software must meet this baseline. \|
65	\| UK \| Web Accessibility Regulations 2018 + Equality Act 2010 \| Public sector: WCAG 2.2 AA required. Private sector: Equality Act applies. \| PSBAR (Public Sector Bodies Accessibility Regulations) requires a published accessibility statement. \|
66
67	Overlay warning: Single-script accessibility overlays (AccessiBe, UserWay, etc.) do not achieve WCAG conformance and have been directly challenged in ADA litigation. Flag this clearly if a user asks about "automatic" or "one-line" accessibility fixes.
68
69	---
70
71	## WCAG Standards Overview
72
73	WCAG (Web Content Accessibility Guidelines) uses three conformance levels:
74
75	- Level A - minimum baseline; blocking failures (e.g. images with no `alt`)
76	- Level AA - standard legal requirement across most jurisdictions (e.g. 4.5:1 contrast)
77	- Level AAA - enhanced; not required site-wide but worth targeting for specific features
78
79	Target WCAG 2.2 Level AA as your default baseline.
80
81	On WCAG 3.0: It is a research-stage Working Draft with no published adoption timeline. It uses a different scoring model and will not replace WCAG 2.x for the foreseeable future. Do not use it as a current compliance target.
82
83	---
84
85	## WC

People who liked this also viewed

6 picks

Type

web-accessibility

27stars1forks

View on GitHub

How to install web-accessibility?

ziniman/ai-instruct/web-accessibility

$npx -y skills add ziniman/ai-instruct --skill web-accessibility

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Web Accessibility Guide
2
3	> Applies to: Any website or web app \| Updated: March 2026
4
5	A practical reference for building accessible websites - covering WCAG 2.2 criteria, semantic HTML, ARIA, forms, touch, and testing.
6
7	---
8
9	## Section 0: Before You Start
10
11	Answer these questions before generating accessibility code. Each answer changes which sections apply.
12
13	Q: Where are your users?
14	Default: worldwide - EU/UK requirements (EAA, PSBAR) will be flagged as applicable throughout this guide.
15	Options: US only \| Europe/EU \| UK \| Worldwide
16
17	Q: What kind of product is this?
18	Default: company/marketing website
19	Options: Company/marketing website \| Online shop/e-commerce \| Web app/SaaS \| Media/video site \| Document tool
20
21	Q: Will people use this on mobile phones or tablets as well as desktop?
22	Default: yes - touch target sizing and pointer accessibility sections apply.
23
24	Q: Are you building with a component library?
25	Default: none
26	Options: Radix UI \| shadcn/ui \| MUI \| Chakra UI \| Other \| None - if a library is detected in `package.json`, note which accessibility features it handles natively so you don't duplicate them.
27
28	Q: Do you need to comply with a specific standard for legal or contract reasons?
29	Default: WCAG 2.2 AA - current best-practice baseline.
30	Options: WCAG 2.1 AA \| WCAG 2.2 AA \| Section 508 \| EN 301 549 \| Not sure
31
32	> AI assistant: Use these answers to prioritize. For EU products: apply EAA compliance notes. For mobile: apply touch target and pointer sections. If a known accessible component library is detected, note which patterns it handles so you don't duplicate effort.
33
34	---
35
36	## Contents
37
38	1. [Legal & Compliance](#legal--compliance)
39	2. [WCAG Standards Overview](#wcag-standards-overview)
40	3. [WCAG 2.2 - What's New](#wcag-22--whats-new)
41	4. [Semantic HTML](#semantic-html)
42	5. [Keyboard Navigation](#keyboard-navigation)
43	6. [ARIA](#aria)
44	7. [Images & Media](#images--media)
45	8. [Forms](#forms)
46	9. [Touch & Pointer](#touch--pointer)
47	10. [Color & Contrast](#color--contrast)
48	11. [Focus Management](#focus-management)
49	12. [Motion & Animation](#motion--animation)
50	13. [Testing](#testing)
51	14. [Anti-Patterns to Flag](#anti-patterns-to-flag)
52	15. [Checklist by Product Type](#checklist-by-product-type)
53
54	---
55
56	## Legal & Compliance
57
58	Accessibility is a legal requirement across most major markets. Non-compliance carries real risk - fines, market access restrictions, and litigation.
59
60	\| Jurisdiction \| Law / Standard \| Scope \| Notes \|
61	\|---\|---\|---\|---\|
62	\| EU \| European Accessibility Act (EAA) \| Private-sector e-commerce, banking, transport, streaming. Enforceable since June 28, 2025. \| Standard: EN 301 549 v3.2.1, which references WCAG 2.1 AA; WCAG 2.2 strongly recommended. Non-compliance = market access restrictions. \|
63	\| US \| ADA Title III \| Private-sector websites and apps \| ~4,000 - 4,500 lawsuits/year; e-commerce and hospitality are primary targets. Overlay-only solutions have been named in lawsuits as insufficient. \|
64	\| US Federal \| Section 508 \| Federal agencies and contractors \| References WCAG 2.0 AA. Agencies procuring software must meet this baseline. \|
65	\| UK \| Web Accessibility Regulations 2018 + Equality Act 2010 \| Public sector: WCAG 2.2 AA required. Private sector: Equality Act applies. \| PSBAR (Public Sector Bodies Accessibility Regulations) requires a published accessibility statement. \|
66
67	Overlay warning: Single-script accessibility overlays (AccessiBe, UserWay, etc.) do not achieve WCAG conformance and have been directly challenged in ADA litigation. Flag this clearly if a user asks about "automatic" or "one-line" accessibility fixes.
68
69	---
70
71	## WCAG Standards Overview
72
73	WCAG (Web Content Accessibility Guidelines) uses three conformance levels:
74
75	- Level A - minimum baseline; blocking failures (e.g. images with no `alt`)
76	- Level AA - standard legal requirement across most jurisdictions (e.g. 4.5:1 contrast)
77	- Level AAA - enhanced; not required site-wide but worth targeting for specific features
78
79	Target WCAG 2.2 Level AA as your default baseline.
80
81	On WCAG 3.0: It is a research-stage Working Draft with no published adoption timeline. It uses a different scoring model and will not replace WCAG 2.x for the foreseeable future. Do not use it as a current compliance target.
82
83	---
84
85	## WC

People who liked this also viewed

6 picks

Type