diff --git a/ACCESSIBILITY_AUDIT.md b/ACCESSIBILITY_AUDIT.md new file mode 100644 index 0000000..5445745 --- /dev/null +++ b/ACCESSIBILITY_AUDIT.md @@ -0,0 +1,148 @@ +### Omoluabi Accessibility Audit (WCAG 2.2 AA) + +Scope: Current Astro site as of this commit. Focus on perceivable, operable, understandable, and robust criteria for Nigerians in NL and Dutch partners. + +--- + +### Executive summary +- **Overall**: Solid semantic base with clear landmarks in `src/layouts/BaseLayout.astro`. Reduced-motion support exists in `src/styles/global.css`. Key gaps: language/i18n markup, skip links, menu ARIA, carousel semantics, form error/ARIA, dialog semantics, and strict CSP readiness. +- **Risk**: Medium → High for navigation/keyboard and language; Low → Medium for contrast on image/gradient backgrounds. + +--- + +### High-priority issues (fix now) + +1) Missing skip link + focus target +- File: `src/layouts/BaseLayout.astro` +- Snippet (add just inside `` and set `id` on `
`): +```astro + + Skip to main content + +... +
+ +
+``` +- Rationale: Allows keyboard users to bypass repeated navigation (WCAG 2.4.1, 2.4.3). + +2) Page language + `hreflang` +- File: `src/layouts/BaseLayout.astro` +- Snippet (top `` and ``): +```astro + + + ... + + + +``` +- Rationale: Correct language for screen readers and localized SEO (WCAG 3.1.1, 3.1.2). + +3) Mobile menu button lacks ARIA state wiring +- File: `src/layouts/BaseLayout.astro` +- Snippet (button + script): +```astro + +``` +```html + +``` +- Rationale: Communicates expanded/collapsed state for assistive tech (WCAG 4.1.2). + +4) Carousel semantics and controls +- File: `src/components/HeroCarousel.jsx` +- Snippet: +```jsx +
+ {slides.map((slide, index) => ( +
+ ... +
+ ))} + +
+``` +- Rationale: Conveys carousel/slide semantics; exposes play/pause state (WCAG 1.4.2, 2.2.2, 4.1.2). + +5) Contact form ARIA and honeypot +- File: `src/components/ContactForm.jsx` +- Snippet: +```jsx +const [hp, setHp] = useState(''); +... +
+ + + {errors.name &&

{errors.name}

} +``` +- Rationale: Accessible errors association and simple anti-bot (WCAG 3.3.1/3.3.3). + +6) Lightbox dialog semantics +- File: `src/components/Lightbox.jsx` +- Snippet: +```jsx +
+``` +- Rationale: Dialog semantics and modality (WCAG 1.3.1, 2.4.3, 4.1.2). + +7) Inline styles and data-URI backgrounds limit strict CSP +- Files: `src/pages/about.astro`, `src/pages/donate.astro`, `src/pages/orphanage.astro` +- Fix: Extract inline `style="background: ..."` to named CSS classes in `src/styles/main.css` (e.g., `.bg-flag-nl-ng`, `.pattern-overlay`) and reference via `class` only. Move inline ` diff --git a/src/pages/about.astro b/src/pages/about.astro index 72748b3..84ef8d2 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -3,21 +3,93 @@ import BaseLayout from '../layouts/BaseLayout.astro'; --- - -
-
+ +
+ + +
+ +
+
+
+
+
+ +
🤝
+ +
+
+
+
+
+
+ + +
+
Nigeria 🇳🇬 • Netherlands 🇳🇱
+
+ + +
+ +
-
+ +
🏠 Home • About
-

- About Us -

-

- Discover the rich heritage and noble mission of the Omoluabi Association in the Netherlands. + + +

+

+ About Us +

+ + +
+
+
+
+
+
+
+
🤝
+
+
+
+
+
+
+
+
+ +

+ Discover the rich heritage and noble mission of the Omoluabi Association bridging + Nigerian culture with + Dutch hospitality in the Netherlands.

+ + +
+
+
+ Nigerian Heritage +
+
🌉
+
+
+ Dutch Integration +
+
@@ -283,7 +355,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
-
+
diff --git a/src/pages/contact.astro b/src/pages/contact.astro index b3f5fd5..6c8b9f2 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -5,13 +5,14 @@ import ContactForm from '../components/ContactForm.jsx'; -
+
🏠 Home • Contact +

Contact Us diff --git a/src/pages/donate.astro b/src/pages/donate.astro index 2a35e8d..9ef3b2c 100644 --- a/src/pages/donate.astro +++ b/src/pages/donate.astro @@ -5,13 +5,14 @@ import DonationProgressBar from '../components/DonationProgressBar.jsx'; -
+
🏠 Home • Donate +

Support Our Mission diff --git a/src/pages/events.astro b/src/pages/events.astro index e32288d..4a4354e 100644 --- a/src/pages/events.astro +++ b/src/pages/events.astro @@ -9,13 +9,14 @@ const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0) - -
+
🏠 Home • Events +

Our Events diff --git a/src/pages/index.astro b/src/pages/index.astro index ea5181f..f42da78 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -173,7 +173,7 @@ import HomeGallery from '../components/HomeGallery.astro';

-
+
diff --git a/src/pages/members.astro b/src/pages/members.astro index 4abfa7a..8dc9e8d 100644 --- a/src/pages/members.astro +++ b/src/pages/members.astro @@ -7,13 +7,14 @@ const members = memberFiles[0]?.frontmatter?.members || []; -
+
🏠 Home • Members +

Meet Our Members diff --git a/src/pages/orphanage.astro b/src/pages/orphanage.astro index 90c28b7..380a87a 100644 --- a/src/pages/orphanage.astro +++ b/src/pages/orphanage.astro @@ -4,13 +4,14 @@ import BaseLayout from '../layouts/BaseLayout.astro'; -
+
🏠 Home • Orphanage +

Our Orphanage Program diff --git a/src/styles/global.css b/src/styles/global.css index e3e4302..b2e6bea 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -11,6 +11,10 @@ --kente-gold: #f59e0b; --ankara-red: #dc2626; --adire-blue: #2563eb; + /* Dutch Flag Colors */ + --dutch-red: #21468b; + --dutch-white: #ffffff; + --dutch-blue: #1e4785; } /* Custom scrollbar */ diff --git a/src/styles/main.css b/src/styles/main.css index bf94e7b..56f05d3 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -211,11 +211,29 @@ box-shadow: 0 0 20px rgba(22, 163, 74, 0.6); } - /* Nigerian Flag Colors */ - .nigerian-gradient { - background: linear-gradient(90deg, #16a34a 0%, #ffffff 50%, #16a34a 100%); + /* Nigerian Flag Background (vertical stripes) */ + .nigerian-flag-bg { + background: linear-gradient(90deg, var(--nigerian-green) 0%, var(--nigerian-green) 33.33%, #fff 33.33%, #fff 66.66%, var(--nigerian-green) 66.66%, var(--nigerian-green) 100%); } + /* Dutch Flag Badge (horizontal stripes) */ + .dutch-flag-badge { + width: 48px; + height: 16px; + border-radius: 3px; + overflow: hidden; + display: inline-block; + box-shadow: 0 1px 4px rgba(0,0,0,0.08); + border: 1px solid #eee; + } + .dutch-flag-badge .stripe { + height: 33.33%; + width: 100%; + } + .dutch-flag-badge .red { background: var(--dutch-red); } + .dutch-flag-badge .white { background: #fff; } + .dutch-flag-badge .blue { background: var(--dutch-blue); } + /* Kente Pattern Inspired Background */ .kente-pattern { background-image: @@ -341,4 +359,43 @@ .text-gray-400 { color: #9ca3af; } + } + + /* Nigerian + Dutch Flag Combined Gradient */ + .combined-flag-gradient { + background: linear-gradient(90deg, var(--nigerian-green) 0%, var(--dutch-white) 20%, var(--dutch-red) 40%, var(--dutch-white) 60%, var(--dutch-blue) 80%, var(--nigerian-green) 100%); + } + + /* Combined Flag Button */ + .btn-combined-flag { + background: linear-gradient(135deg, var(--nigerian-green) 0%, var(--dutch-red) 33%, var(--dutch-white) 66%, var(--dutch-blue) 100%); + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 0.75rem; + font-weight: 600; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + } + + .btn-combined-flag::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--dutch-blue) 0%, var(--dutch-white) 50%, var(--nigerian-green) 100%); + transition: left 0.3s ease; + z-index: -1; + } + + .btn-combined-flag:hover::before { + left: 0; + } + + .btn-combined-flag:hover { + transform: translateY(-2px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } \ No newline at end of file