Skip to content

Commit 5f6f08c

Browse files
Alexandrbig1Alexandrbig1
authored
Merge pull request #115 from fudailzafar/ui/accessibility
UI: improved style for accessibility page #105
2 parents 5c9e876 + 7f06962 commit 5f6f08c

1 file changed

Lines changed: 144 additions & 142 deletions

File tree

‎src/pages/Accessibility/Accessibility.jsx‎

Lines changed: 144 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,167 @@
1-
import SEO from "../../components/SEO";
1+
import SEO from '../../components/SEO';
22

33
export default function AccessibilityPage() {
44
return (
55
<>
6-
<SEO
7-
title="Accessibility | CoreX Nutrition"
8-
description="Learn about CoreX Nutrition's commitment to web accessibility, assistive technology support, and inclusive digital experiences."
9-
keywords="Accessibility, CoreX Nutrition, WCAG, Screen Readers, Keyboard Navigation, Inclusive Design"
10-
/>
11-
126
{/* Skip link for keyboard users */}
137
<a
148
href="#main-content"
15-
className="sr-only focus:not-sr-only focus:absolute top-0 left-0 bg-blue-500 text-white p-2 z-50"
9+
className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 p-2 bg-blue-600 text-white z-50"
1610
>
1711
Skip to main content
1812
</a>
1913

20-
{/* Header Landmark */}
21-
<header role="banner" className="max-w-4xl mx-auto mb-8 px-4 sm:px-6 lg:px-8">
22-
<h1 className="text-4xl font-bold text-gray-900 mb-4">Accessibility</h1>
23-
</header>
24-
25-
{/* Main content landmark */}
26-
<main id="main-content" className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
27-
<div className="max-w-4xl mx-auto space-y-8">
28-
<section className="bg-white rounded-lg shadow-sm p-6 md:p-8">
29-
<h2 className="text-2xl font-semibold text-gray-900 mb-4">
30-
Our Commitment to Accessibility
31-
</h2>
32-
<p className="text-lg text-gray-700 leading-relaxed mb-6">
33-
At CoreX Nutrition, we are committed to ensuring digital accessibility for people with disabilities.
34-
We are continually improving the user experience for everyone and applying the relevant accessibility standards.
35-
</p>
36-
</section>
37-
38-
<section className="bg-white rounded-lg shadow-sm p-6 md:p-8">
39-
<h2 className="text-2xl font-semibold text-gray-900 mb-4">
40-
Accessibility Standards
41-
</h2>
42-
<p className="text-gray-700 leading-relaxed mb-4">
43-
We strive to conform to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards.
44-
These guidelines explain how to make web content more accessible to people with disabilities.
45-
</p>
14+
<SEO
15+
title="Accessibility | CoreX Nutrition"
16+
description="Learn about CoreX Nutrition's commitment to web accessibility, assistive technology support, and inclusive digital experiences."
17+
keywords="Accessibility, CoreX Nutrition, WCAG, Screen Readers, Keyboard Navigation, Inclusive Design"
18+
/>
4619

47-
<article className="mt-6">
48-
<h3 className="text-xl font-medium text-gray-900 mb-3">Key Features We Implement</h3>
49-
<ul className="space-y-2 text-gray-700" role="list">
50-
<li className="flex items-start">
51-
<span className="text-green-600 mr-2" aria-hidden="true">✓</span>
52-
<span>Alternative text for images and graphics</span>
53-
</li>
54-
<li className="flex items-start">
55-
<span className="text-green-600 mr-2" aria-hidden="true">✓</span>
56-
<span>Keyboard navigation support</span>
57-
</li>
58-
<li className="flex items-start">
59-
<span className="text-green-600 mr-2" aria-hidden="true">✓</span>
60-
<span>High color contrast ratios</span>
61-
</li>
62-
<li className="flex items-start">
63-
<span className="text-green-600 mr-2" aria-hidden="true">✓</span>
64-
<span>Screen reader compatibility</span>
20+
<main
21+
id="main-content"
22+
className="min-h-screen bg-white font-inter py-12 px-4 sm:px-6 lg:px-8"
23+
role="main"
24+
aria-labelledby="accessibility-title"
25+
>
26+
<div className="max-w-4xl mx-auto">
27+
{/* Page Header */}
28+
<header className="mb-8">
29+
<h1 id="accessibility-title" className="text-5xl mb-4">
30+
Accessibility
31+
</h1>
32+
</header>
33+
<hr className="text-slate-400" />
34+
35+
{/* Main Content */}
36+
<article className="prose prose-lg max-w-none space-y-8">
37+
{/* Our Commitment to Accessibility */}
38+
<section aria-labelledby="commitment-section">
39+
<h2
40+
id="commitment-section"
41+
className="text-3xl font-bold mt-8 mb-8"
42+
>
43+
OUR COMMITMENT
44+
</h2>
45+
<p className="mb-4">
46+
At CoreX Nutrition, we are committed to ensuring digital
47+
accessibility for people with disabilities. We are continually
48+
improving the user experience for everyone and applying the
49+
relevant accessibility standards.
50+
</p>
51+
<p className="mb-4">
52+
This project, developed by Open Code Chicago, is an open-source
53+
educational initiative. While it is not a live commercial store,
54+
accessibility remains a core value in our design and development
55+
process.
56+
</p>
57+
</section>
58+
<hr className="text-slate-400" />
59+
60+
{/* Accessibility Standards */}
61+
<section aria-labelledby="standards-section">
62+
<h2 id="standards-section" className="text-3xl font-bold mb-8">
63+
WHAT WE AIM FOR
64+
</h2>
65+
<p className="mb-4">We strive to follow best practices with:</p>
66+
<ul className="list-disc list-inside space-y-2 ml-4" role="list">
67+
<li>
68+
WCAG (Web Content Accessibility Guidelines) 2.1 Level AA
6569
</li>
66-
<li className="flex items-start">
67-
<span className="text-green-600 mr-2" aria-hidden="true">✓</span>
68-
<span>Clear and consistent navigation</span>
70+
<li>Semantic HTML for screen reader support</li>
71+
<li>Sufficient color contrast for text and UI elements</li>
72+
<li>Keyboard navigation for interactive components</li>
73+
<li>Clear and descriptive alt text for images</li>
74+
</ul>
75+
</section>
76+
<hr className="text-slate-400" />
77+
78+
{/* Current Project Status */}
79+
<section aria-labelledby="current-project-status">
80+
<h2
81+
id="improvement-section"
82+
className="text-3xl font-bold text-gray-900 mb-8"
83+
>
84+
CURRENT PORJECT STATUS
85+
</h2>
86+
<p className="mb-4">
87+
This is a work-in-progress demo project. While we make every
88+
effort to ensure accessibility, some areas may still be under
89+
development or not fully compliant. Contributors are encouraged
90+
to:
91+
</p>
92+
<ul className="list-disc list-inside space-y-2 ml-4">
93+
<li>Use semantic and accessible HTML</li>
94+
<li>Follow ARIA guidelines where appropriate</li>
95+
<li>
96+
Test features with screen readers and keyboard navigation
6997
</li>
70-
<li className="flex items-start">
71-
<span className="text-green-600 mr-2" aria-hidden="true">✓</span>
72-
<span>Responsive design for various devices</span>
98+
<li>
99+
Report or fix accessibility issues via GitHub discussions or
100+
pull requests
73101
</li>
74102
</ul>
75-
</article>
76-
</section>
77-
78-
<section className="bg-white rounded-lg shadow-sm p-6 md:p-8">
79-
<h2 className="text-2xl font-semibold text-gray-900 mb-4">Assistive Technology Support</h2>
80-
<p className="text-gray-700 leading-relaxed mb-4">
81-
Our website is designed to work with a variety of assistive technologies, including but not limited to:
82-
</p>
83-
84-
<div className="grid md:grid-cols-2 gap-4">
85-
<article className="border border-gray-200 rounded-lg p-4">
86-
<h3 className="font-medium text-gray-900 mb-2">Screen Readers</h3>
87-
<p className="text-sm text-gray-600">
88-
Compatible with JAWS, NVDA, VoiceOver, and other screen reading software.
89-
</p>
90-
</article>
91-
92-
<article className="border border-gray-200 rounded-lg p-4">
93-
<h3 className="font-medium text-gray-900 mb-2">Voice Recognition</h3>
94-
<p className="text-sm text-gray-600">
95-
Supports Dragon NaturallySpeaking and other voice control software.
96-
</p>
97-
</article>
98-
99-
<article className="border border-gray-200 rounded-lg p-4">
100-
<h3 className="font-medium text-gray-900 mb-2">Keyboard Navigation</h3>
101-
<p className="text-sm text-gray-600">
102-
Full functionality available through keyboard-only navigation.
103-
</p>
104-
</article>
105-
106-
<article className="border border-gray-200 rounded-lg p-4">
107-
<h3 className="font-medium text-gray-900 mb-2">Magnification Software</h3>
108-
<p className="text-sm text-gray-600">
109-
Compatible with ZoomText and other screen magnification tools.
110-
</p>
111-
</article>
112-
</div>
113-
</section>
114-
115-
<section className="bg-white rounded-lg shadow-sm p-6 md:p-8">
116-
<h2 className="text-2xl font-semibold text-gray-900 mb-4">Feedback and Contact</h2>
117-
<p className="text-gray-700 leading-relaxed mb-4">
118-
We welcome your feedback on the accessibility of our website. If you encounter any barriers or have suggestions for improvement, please don't hesitate to contact us.
119-
</p>
120-
121-
<div className="bg-gray-50 rounded-lg p-4">
122-
<h3 className="font-medium text-gray-900 mb-2">Contact Information</h3>
123-
<div className="space-y-2 text-gray-700">
124-
<p>
125-
<strong>Email:</strong>{' '}
126-
<a
127-
href="mailto:accessibility@corexnutrition.com"
128-
className="text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
129-
aria-label="Email accessibility team at accessibility@corexnutrition.com"
103+
</section>
104+
<hr className="text-slate-400" />
105+
106+
{/* Feedback */}
107+
<section aria-labelledby="feedback-section">
108+
<h2
109+
id="improvement-section"
110+
className="text-3xl font-bold text-gray-900 mb-8"
111+
>
112+
FEEDBACK AND CONTACT
113+
</h2>
114+
<p className="mb-4">
115+
Accessibility is an ongoing effort. We regularly review and
116+
update our website to ensure it remains accessible to all users.
117+
We also conduct periodic accessibility audits and user testing
118+
to identify areas for improvement and implement necessary
119+
changes.
120+
</p>
121+
<p>
122+
If you encounter accessibility issues, please let us know
123+
through our GitHub repository discussions or issues tab.
124+
Together, we can improve accessibility for everyone.
125+
</p>
126+
</section>
127+
<hr className="text-slate-400" />
128+
129+
{/* Disclaimer */}
130+
<section aria-labelledby="disclaimer-section">
131+
<h2
132+
id="disclaimer-section"
133+
className="text-3xl font-bold text-gray-900 mb-8"
134+
>
135+
DISCLAIMER
136+
</h2>
137+
<div className="flex">
138+
<div className="flex-shrink-0">
139+
<svg
140+
className="h-5 w-5 text-yellow-400"
141+
viewBox="0 0 20 20"
142+
fill="currentColor"
143+
aria-hidden="true"
130144
>
131-
accessibility@corexnutrition.com
132-
</a>
133-
</p>
134-
<p>
135-
<strong>Response Time:</strong> We aim to respond to accessibility inquiries within 2 business days.
136-
</p>
145+
<path
146+
fillRule="evenodd"
147+
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
148+
clipRule="evenodd"
149+
/>
150+
</svg>
151+
</div>
152+
<div className="ml-3">
153+
<p>
154+
Core<span className="text-red-600">X</span> Nutrition is a
155+
community open-source project. This accessibility statement
156+
demonstrates best practices for real e-commerce sites. All
157+
content is for demonstration purposes only.
158+
</p>
159+
</div>
137160
</div>
138-
</div>
139-
</section>
140-
141-
<section className="bg-white rounded-lg shadow-sm p-6 md:p-8">
142-
<h2 className="text-2xl font-semibold text-gray-900 mb-4">Continuous Improvement</h2>
143-
<p className="text-gray-700 leading-relaxed">
144-
Accessibility is an ongoing effort. We regularly review and update our website to ensure it remains accessible to all users. We also conduct periodic accessibility audits and user testing to identify areas for improvement and implement necessary changes.
145-
</p>
146-
147-
<div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
148-
<p className="text-blue-800 text-sm">
149-
<strong>Last Updated:</strong> This accessibility statement was last reviewed and updated on{' '}
150-
{new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}.
151-
</p>
152-
</div>
153-
</section>
161+
</section>
162+
</article>
154163
</div>
155164
</main>
156-
157-
{/* Footer Landmark */}
158-
<footer role="contentinfo" className="bg-gray-50 p-4 mt-12">
159-
<p className="text-gray-700 text-sm text-center">
160-
© 2025 CoreX Nutrition. All rights reserved.
161-
</p>
162-
</footer>
163165
</>
164166
);
165167
}

0 commit comments

Comments
 (0)