accessibility-a11y-enhanced

Name: accessibility-a11y-enhanced
Author: PramodDutta

1installs17forks

How to install accessibility-a11y-enhanced?

pramoddutta/qaskills/accessibility-a11y-enhanced

$npx -y skills add PramodDutta/qaskills --skill accessibility-a11y-enhanced

Installs into the current project.

Summary

Comprehensive WCAG compliance and accessibility testing covering ARIA, keyboard navigation, screen readers, color contrast, and automated a11y validation.

Files · 1

View on GitHub

SKILL.md

1	# Accessibility A11y Enhanced Skill
2
3	You are an expert accessibility engineer specializing in WCAG compliance and inclusive web design. When asked to test or improve accessibility, follow these comprehensive instructions.
4
5	## Core Principles (POUR)
6
7	1. Perceivable -- Information must be presentable to users in ways they can perceive.
8	2. Operable -- User interface components must be operable by all users.
9	3. Understandable -- Information and operation must be understandable.
10	4. Robust -- Content must be robust enough to work with assistive technologies.
11
12	## WCAG 2.1 Compliance Levels
13
14	```
15	Level A (Minimum)
16	- Basic accessibility features
17	- Essential for some users
18	- Examples: Alt text, keyboard access, labels
19
20	Level AA (Standard)
21	- Recommended baseline for most sites
22	- Addresses major barriers
23	- Examples: Color contrast 4.5:1, focus indicators, skip links
24
25	Level AAA (Enhanced)
26	- Highest accessibility standard
27	- Not always achievable for all content
28	- Examples: Color contrast 7:1, sign language, extended descriptions
29	```
30
31	## Setting Up Automated Testing
32
33	### With Playwright and axe-core
34
35	```typescript
36	// playwright.config.ts
37	import { defineConfig } from '@playwright/test';
38
39	export default defineConfig({
40	use: {
41	trace: 'on-first-retry',
42	screenshot: 'only-on-failure',
43	},
44	});
45	```
46
47	```bash
48	npm install --save-dev @axe-core/playwright
49	```
50
51	```typescript
52	// tests/accessibility.spec.ts
53	import { test, expect } from '@playwright/test';
54	import AxeBuilder from '@axe-core/playwright';
55
56	test.describe('Accessibility tests', () => {
57	test('should not have any automatically detectable accessibility issues', async ({ page }) => {
58	await page.goto('/');
59
60	const accessibilityScanResults = await new AxeBuilder({ page })
61	.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
62	.analyze();
63
64	expect(accessibilityScanResults.violations).toEqual([]);
65	});
66
67	test('should have accessible homepage', async ({ page }) => {
68	await page.goto('/');
69
70	const results = await new AxeBuilder({ page })
71	.exclude('#third-party-widget') // Exclude third-party content
72	.analyze();
73
74	// Log violations for debugging
75	if (results.violations.length > 0) {
76	console.log('Accessibility violations:', JSON.stringify(results.violations, null, 2));
77	}
78
79	expect(results.violations).toEqual([]);
80	});
81
82	test('should have accessible forms', async ({ page }) => {
83	await page.goto('/contact');
84
85	const results = await new AxeBuilder({ page })
86	.include('form') // Test only forms
87	.analyze();
88
89	expect(results.violations).toEqual([]);
90	});
91
92	test('should meet specific WCAG rules', async ({ page }) => {
93	await page.goto('/');
94
95	const results = await new AxeBuilder({ page })
96	.withRules(['color-contrast', 'image-alt', 'label', 'aria-required-attr'])
97	.analyze();
98
99	expect(results.violations).toEqual([]);
100	});
101	});
102	```
103
104	### With Cypress and axe-core
105
106	```typescript
107	// cypress/support/commands.ts
108	import 'cypress-axe';
109
110	Cypress.Commands.add('checkA11y', (context?: string, options?: any) => {
111	cy.injectAxe();
112	cy.checkA11y(context, options, (violations) => {
113	if (violations.length) {
114	cy.task('log', violations);
115	}
116	});
117	});
118	```
119
120	```typescript
121	// cypress/e2e/accessibility.cy.ts
122	describe('Accessibility', () => {
123	beforeEach(() => {
124	cy.visit('/');
125	cy.injectAxe();
126	});
127
128	it('should have no accessibility violations on homepage', () => {
129	cy.checkA11y();
130	});
131
132	it('should have accessible navigation', () => {
133	cy.checkA11y('nav');
134	});
135
136	it('should meet WCAG AA color contrast', () => {
137	cy.checkA11y(null, {
138	rules: {
139	'color-contrast': { enabled: true },
140	},
141	});
142	});
143	});
144	```
145
146	## Manual Accessibility Testing
147
148	### 1. Keyboard Navigation Tests
149
150	```typescript
151	test.describe('Keyboard navigation', () => {
152	test('should navigate through interactive elements with Tab', async ({ page }) => {
153	await page.goto('/');
154
155	// Start at the first focusable element
156	await page.keyboard.press('Tab');
157
158	const firstFocusedElement = await page.evaluate(() => document.activeElement?.tagName);
159	expect(['A', 'BUTTON', 'INPUT']).toContain(firstFocusedElement);
160
161	// Tab through all interactive elements
162	for (let i = 0; i < 5; i++) {
163	await page.keyboard.press('Tab');
164	const focused = await page.evaluate(() => {
165	const e

People who liked this also viewed

6 picks

Type

accessibility-a11y-enhanced

1installs17forks

View on GitHub

How to install accessibility-a11y-enhanced?

pramoddutta/qaskills/accessibility-a11y-enhanced

$npx -y skills add PramodDutta/qaskills --skill accessibility-a11y-enhanced

Installs into the current project.

Summary

Comprehensive WCAG compliance and accessibility testing covering ARIA, keyboard navigation, screen readers, color contrast, and automated a11y validation.

Files · 1

View on GitHub

SKILL.md

1	# Accessibility A11y Enhanced Skill
2
3	You are an expert accessibility engineer specializing in WCAG compliance and inclusive web design. When asked to test or improve accessibility, follow these comprehensive instructions.
4
5	## Core Principles (POUR)
6
7	1. Perceivable -- Information must be presentable to users in ways they can perceive.
8	2. Operable -- User interface components must be operable by all users.
9	3. Understandable -- Information and operation must be understandable.
10	4. Robust -- Content must be robust enough to work with assistive technologies.
11
12	## WCAG 2.1 Compliance Levels
13
14	```
15	Level A (Minimum)
16	- Basic accessibility features
17	- Essential for some users
18	- Examples: Alt text, keyboard access, labels
19
20	Level AA (Standard)
21	- Recommended baseline for most sites
22	- Addresses major barriers
23	- Examples: Color contrast 4.5:1, focus indicators, skip links
24
25	Level AAA (Enhanced)
26	- Highest accessibility standard
27	- Not always achievable for all content
28	- Examples: Color contrast 7:1, sign language, extended descriptions
29	```
30
31	## Setting Up Automated Testing
32
33	### With Playwright and axe-core
34
35	```typescript
36	// playwright.config.ts
37	import { defineConfig } from '@playwright/test';
38
39	export default defineConfig({
40	use: {
41	trace: 'on-first-retry',
42	screenshot: 'only-on-failure',
43	},
44	});
45	```
46
47	```bash
48	npm install --save-dev @axe-core/playwright
49	```
50
51	```typescript
52	// tests/accessibility.spec.ts
53	import { test, expect } from '@playwright/test';
54	import AxeBuilder from '@axe-core/playwright';
55
56	test.describe('Accessibility tests', () => {
57	test('should not have any automatically detectable accessibility issues', async ({ page }) => {
58	await page.goto('/');
59
60	const accessibilityScanResults = await new AxeBuilder({ page })
61	.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
62	.analyze();
63
64	expect(accessibilityScanResults.violations).toEqual([]);
65	});
66
67	test('should have accessible homepage', async ({ page }) => {
68	await page.goto('/');
69
70	const results = await new AxeBuilder({ page })
71	.exclude('#third-party-widget') // Exclude third-party content
72	.analyze();
73
74	// Log violations for debugging
75	if (results.violations.length > 0) {
76	console.log('Accessibility violations:', JSON.stringify(results.violations, null, 2));
77	}
78
79	expect(results.violations).toEqual([]);
80	});
81
82	test('should have accessible forms', async ({ page }) => {
83	await page.goto('/contact');
84
85	const results = await new AxeBuilder({ page })
86	.include('form') // Test only forms
87	.analyze();
88
89	expect(results.violations).toEqual([]);
90	});
91
92	test('should meet specific WCAG rules', async ({ page }) => {
93	await page.goto('/');
94
95	const results = await new AxeBuilder({ page })
96	.withRules(['color-contrast', 'image-alt', 'label', 'aria-required-attr'])
97	.analyze();
98
99	expect(results.violations).toEqual([]);
100	});
101	});
102	```
103
104	### With Cypress and axe-core
105
106	```typescript
107	// cypress/support/commands.ts
108	import 'cypress-axe';
109
110	Cypress.Commands.add('checkA11y', (context?: string, options?: any) => {
111	cy.injectAxe();
112	cy.checkA11y(context, options, (violations) => {
113	if (violations.length) {
114	cy.task('log', violations);
115	}
116	});
117	});
118	```
119
120	```typescript
121	// cypress/e2e/accessibility.cy.ts
122	describe('Accessibility', () => {
123	beforeEach(() => {
124	cy.visit('/');
125	cy.injectAxe();
126	});
127
128	it('should have no accessibility violations on homepage', () => {
129	cy.checkA11y();
130	});
131
132	it('should have accessible navigation', () => {
133	cy.checkA11y('nav');
134	});
135
136	it('should meet WCAG AA color contrast', () => {
137	cy.checkA11y(null, {
138	rules: {
139	'color-contrast': { enabled: true },
140	},
141	});
142	});
143	});
144	```
145
146	## Manual Accessibility Testing
147
148	### 1. Keyboard Navigation Tests
149
150	```typescript
151	test.describe('Keyboard navigation', () => {
152	test('should navigate through interactive elements with Tab', async ({ page }) => {
153	await page.goto('/');
154
155	// Start at the first focusable element
156	await page.keyboard.press('Tab');
157
158	const firstFocusedElement = await page.evaluate(() => document.activeElement?.tagName);
159	expect(['A', 'BUTTON', 'INPUT']).toContain(firstFocusedElement);
160
161	// Tab through all interactive elements
162	for (let i = 0; i < 5; i++) {
163	await page.keyboard.press('Tab');
164	const focused = await page.evaluate(() => {
165	const e

People who liked this also viewed

6 picks

Type