Skip to content

Commit 0e13dec

Browse files
RUKAYAT-CODERRUKAYAT-CODER
authored
Merge pull request #79 from ReinaMaze/accessibility-compliance
implement accessibility compliance suite
2 parents bcc31e4 + 93e72ea commit 0e13dec

15 files changed

+3183
-0
lines changed

‎ACCESSIBILITY_IMPLEMENTATION_GUIDE.md‎

Lines changed: 409 additions & 0 deletions
Large diffs are not rendered by default.

‎src/app/accessibility-demo/page.tsx‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { AccessibilityProvider } from '@/app/components/accessibility/AccessibilityProvider';
5+
import { AccessibleFormExample } from '@/app/components/accessibility/examples/AccessibleFormExample';
6+
import { ModalExampleUsage } from '@/app/components/accessibility/examples/AccessibleModalExample';
7+
import { AccessibleProgress } from '@/app/components/accessibility/ScreenReaderOptimizer';
8+
9+
/**
10+
* Demo page showcasing all accessibility features
11+
*/
12+
export default function AccessibilityDemoPage() {
13+
return (
14+
<AccessibilityProvider
15+
enableNavigator={true}
16+
enableScreenReader={true}
17+
enableContrastChecker={true}
18+
enableTester={true}
19+
autoCheckContrast={false}
20+
autoCheckAccessibility={false}
21+
>
22+
<div className="min-h-screen bg-gray-50">
23+
{/* Skip Link Target */}
24+
<a
25+
href="#main-content"
26+
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded"
27+
>
28+
Skip to main content
29+
</a>
30+
31+
{/* Header */}
32+
<header role="banner" className="bg-white shadow-sm">
33+
<div className="max-w-7xl mx-auto px-4 py-6">
34+
<h1 className="text-3xl font-bold text-gray-900">
35+
Accessibility Features Demo
36+
</h1>
37+
<p className="mt-2 text-gray-600">
38+
WCAG 2.1 AA Compliant Components and Tools
39+
</p>
40+
</div>
41+
</header>
42+
43+
{/* Main Navigation */}
44+
<nav
45+
id="main-navigation"
46+
role="navigation"
47+
aria-label="Main navigation"
48+
className="bg-white border-b border-gray-200"
49+
>
50+
<div className="max-w-7xl mx-auto px-4">
51+
<ul className="flex space-x-8 py-4">
52+
<li>
53+
<a
54+
href="#overview"
55+
className="text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-2 py-1"
56+
>
57+
Overview
58+
</a>
59+
</li>
60+
<li>
61+
<a
62+
href="#form-example"
63+
className="text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-2 py-1"
64+
>
65+
Form Example
66+
</a>
67+
</li>
68+
<li>
69+
<a
70+
href="#modal-example"
71+
className="text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-2 py-1"
72+
>
73+
Modal Example
74+
</a>
75+
</li>
76+
</ul>
77+
</div>
78+
</nav>
79+
80+
{/* Main Content */}
81+
<main id="main-content" role="main" className="max-w-7xl mx-auto px-4 py-8">
82+
{/* Overview Section */}
83+
<section id="overview" aria-labelledby="overview-heading" className="mb-12">
84+
<h2 id="overview-heading" className="text-2xl font-bold mb-4">
85+
Overview
86+
</h2>
87+
<div className="bg-white rounded-lg shadow p-6 space-y-4">
88+
<p>
89+
This page demonstrates comprehensive accessibility features ensuring WCAG 2.1 AA
90+
compliance. Use the floating buttons on the right to access:
91+
</p>
92+
<ul className="list-disc list-inside space-y-2 ml-4">
93+
<li>
94+
<strong>Accessibility Navigator</strong> (bottom) - Keyboard navigation and skip
95+
links
96+
</li>
97+
<li>
98+
<strong>Color Contrast Checker</strong> (middle) - Validate color contrast ratios
99+
</li>
100+
<li>
101+
<strong>Accessibility Tester</strong> (top) - Automated accessibility testing
102+
</li>
103+
</ul>
104+
105+
<div className="mt-6">
106+
<h3 className="text-lg font-semibold mb-3">Progress Example</h3>
107+
<AccessibleProgress value={75} max={100} label="Course completion" />
108+
</div>
109+
110+
<div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
111+
<h3 className="text-lg font-semibold mb-2">Keyboard Navigation Tips</h3>
112+
<dl className="space-y-2 text-sm">
113+
<div className="flex">
114+
<dt className="font-medium w-32">Tab</dt>
115+
<dd>Move to next focusable element</dd>
116+
</div>
117+
<div className="flex">
118+
<dt className="font-medium w-32">Shift + Tab</dt>
119+
<dd>Move to previous focusable element</dd>
120+
</div>
121+
<div className="flex">
122+
<dt className="font-medium w-32">Enter / Space</dt>
123+
<dd>Activate buttons and links</dd>
124+
</div>
125+
<div className="flex">
126+
<dt className="font-medium w-32">Escape</dt>
127+
<dd>Close dialogs and menus</dd>
128+
</div>
129+
</dl>
130+
</div>
131+
</div>
132+
</section>
133+
134+
{/* Form Example Section */}
135+
<section id="form-example" aria-labelledby="form-heading" className="mb-12">
136+
<h2 id="form-heading" className="text-2xl font-bold mb-4">
137+
Accessible Form Example
138+
</h2>
139+
<div className="bg-white rounded-lg shadow p-6">
140+
<AccessibleFormExample />
141+
</div>
142+
</section>
143+
144+
{/* Modal Example Section */}
145+
<section id="modal-example" aria-labelledby="modal-heading" className="mb-12">
146+
<h2 id="modal-heading" className="text-2xl font-bold mb-4">
147+
Accessible Modal Example
148+
</h2>
149+
<div className="bg-white rounded-lg shadow p-6">
150+
<ModalExampleUsage />
151+
</div>
152+
</section>
153+
154+
{/* Features List */}
155+
<section aria-labelledby="features-heading" className="mb-12">
156+
<h2 id="features-heading" className="text-2xl font-bold mb-4">
157+
Implemented Features
158+
</h2>
159+
<div className="grid md:grid-cols-2 gap-6">
160+
<div className="bg-white rounded-lg shadow p-6">
161+
<h3 className="text-lg font-semibold mb-3">Keyboard Navigation</h3>
162+
<ul className="space-y-2 text-sm text-gray-600">
163+
<li>✓ Full keyboard accessibility</li>
164+
<li>✓ Skip links for quick navigation</li>
165+
<li>✓ Focus trap for modals</li>
166+
<li>✓ Visible focus indicators</li>
167+
<li>✓ Logical tab order</li>
168+
</ul>
169+
</div>
170+
171+
<div className="bg-white rounded-lg shadow p-6">
172+
<h3 className="text-lg font-semibold mb-3">Screen Reader Support</h3>
173+
<ul className="space-y-2 text-sm text-gray-600">
174+
<li>✓ ARIA labels and descriptions</li>
175+
<li>✓ Live regions for announcements</li>
176+
<li>✓ Semantic HTML structure</li>
177+
<li>✓ Accessible form labels</li>
178+
<li>✓ Status messages</li>
179+
</ul>
180+
</div>
181+
182+
<div className="bg-white rounded-lg shadow p-6">
183+
<h3 className="text-lg font-semibold mb-3">Color Contrast</h3>
184+
<ul className="space-y-2 text-sm text-gray-600">
185+
<li>✓ WCAG AA compliance (4.5:1)</li>
186+
<li>✓ Automated contrast checking</li>
187+
<li>✓ Visual contrast indicators</li>
188+
<li>✓ Large text support (3:1)</li>
189+
<li>✓ Detailed reports</li>
190+
</ul>
191+
</div>
192+
193+
<div className="bg-white rounded-lg shadow p-6">
194+
<h3 className="text-lg font-semibold mb-3">Testing & Validation</h3>
195+
<ul className="space-y-2 text-sm text-gray-600">
196+
<li>✓ Automated accessibility checks</li>
197+
<li>✓ Issue severity classification</li>
198+
<li>✓ WCAG criteria mapping</li>
199+
<li>✓ Exportable reports</li>
200+
<li>✓ Real-time validation</li>
201+
</ul>
202+
</div>
203+
</div>
204+
</section>
205+
</main>
206+
207+
{/* Footer */}
208+
<footer id="footer" role="contentinfo" className="bg-gray-800 text-white mt-12">
209+
<div className="max-w-7xl mx-auto px-4 py-8">
210+
<p className="text-center">
211+
© 2024 Accessible Learning Platform. WCAG 2.1 AA Compliant.
212+
</p>
213+
</div>
214+
</footer>
215+
</div>
216+
</AccessibilityProvider>
217+
);
218+
}

0 commit comments

Comments
 (0)