WCAG Accessibility Audit Report

June 2026 Automated Testing (Lighthouse) WCAG 2.0 + 2.1 Standards 16 pages tested
15
Pages Passed
0
Pages With Issues
1
External Only
4
Remaining Issues

Executive Summary

This report summarises an accessibility audit of all 17 pages across Punit Ganjara's interactive e-learning portfolio. Each page was tested in both light and dark theme modes using Google Lighthouse.

Per-Page Results

Page ☀️ Light 🌙 Dark Status
Main Portfolio (index.html) 100 100 Pass
Lexiplane 3D Word Hunt (wordgame) 100 100 Pass
H5P Interactive Timeline 100 100 Pass
Customer Service De-Escalation 100 100 Pass
AI Ethics Training 100 100 Pass
Interactive Quiz (H5P) 100 100 Pass
IELTS Speaking Masterclass 100 100 Pass
IELTS Portfolio Index 100 100 Pass
Design Samples 100 100 Pass
WCAG Accessibility Report 100 100 Pass
Children Psychology — Interactive Video 100 100 Pass
Adapt Framework Mini Course 100 100 Pass
LXD Design Frameworks & Evaluation 100 100 Pass
EFL Teaching Dilemmas (Adapt Framework) 100 100 Pass
Workplace Safety Compliance Training 100 100 Pass
Storyboarding Sample (storyboard.html) 100 100 Pass
Learning Analytics Dashboard 84 84 External

Accessibility Issues

1. Missing <main> Landmark Resolved

Most portfolio pages were missing a <main> landmark element — a foundational WCAG requirement that lets screen reader users jump directly to the primary content area. This issue has been fully resolved across all portfolio pages.

Fixed in this round (6 pages): index.html, h5p.html, customer-service-mastery.html, ai-ethics-training.html, ai-literacy/index.html, giving-constructive-feedback/index.html. Also fixed a nested-<main> in data-privacy-compliance/index.html and added lang="en" attributes to 3 pages.

2. Color Contrast Issues Resolved

All contrast issues have been fixed across 10 pages over 3 rounds: index.html — tag badge accent changed from #b85c1a → #9a4a12 (4.61:1 AA), dark-mode --primary tightened from #6fa3e8 → #3d72c4 (4.63:1 AA), hero-label and filter-count overrides added; customer-service-mastery.html — theme toggle icon colour updated; ielts-masterclass — all blue text elements changed to #fbbf24 yellow in dark mode (h1, h2, exam-header-strip, transcript-btn, recorder-info, back-btn); wcag-report — --fail → #b91c1c (8.91:1), --pass → #047857 (7.64:1), section h3 and report-header h1 dark mode overrides added. All WCAG 2.0 AA colour contrast requirements are now met.

3. Heading Order Resolved

ai-literacy/index.html and giving-constructive-feedback/index.html have been fixed: <div class="course-title"> upgraded to <h1>, <h4> labels downgraded to <h3>. Heading hierarchy is now h1 → h2 → h3 with no skipped levels.

4. Link in Text Block Resolved

wcag-report/index.html: All links now have text-decoration: underline by default, making them visually distinguishable from surrounding text by more than colour alone. The wcag-audit-report.json link in the Methodology section now meets WCAG 1.4.1.

Learning Analytics Dashboard External (unfixable)

All issues originate from the embedded Veracity LRS dashboard (a third-party tool). These cannot be fixed from our end — the host page (theme toggle, back button, iframe container) passes all checks.

Serious

Unlabelled chart controls

Interactive chart elements are missing labels that screen readers rely on. Learners using assistive technology would find it difficult to understand what each part of the chart represents or how to navigate through the data.

Critical

Improper chart structure

Interactive chart components are not structured according to accessibility standards. Screen readers may announce chart elements in confusing ways or skip over data points entirely, making the dashboard hard to interpret for visually impaired learners.

Serious

Low contrast text

Some notification messages and timestamp labels use colours that blend into the background. Learners with low vision or colour blindness may struggle to read cookie notices and status updates in the dashboard.

Serious

Keyboard navigation conflicts

Some interactive elements are nested inside other interactive regions, creating confusion for learners who navigate by keyboard. Tabbing through the dashboard may skip expected elements or trap focus unexpectedly.

Notes

Fix Round 1 — 6 June 2026: Added <main> landmarks to 7 pages (index.html, h5p.html, customer-service-mastery.html, ai-ethics-training.html, ai-literacy/index.html, giving-constructive-feedback/index.html, and this report page). Fixed nested <main> in data-privacy-compliance/index.html. Added lang="en" attributes to 3 pages. The <main> issue is now fully resolved across all portfolio pages.
Fix Round 2 — 6 June 2026: Resolved all remaining AA contrast issues across 4 pages (index.html, customer-service-mastery.html, ai-literacy/index.html, giving-constructive-feedback/index.html, and this report page). Fixed heading order on 2 course pages (h4→h1+h3). Added underline to all links for WCAG 1.4.1 compliance.
Fix Round 3 — 6 June 2026: Further tightened dark-mode --primary from #5a92db to #3d72c4 (4.63:1 AA). Fixed .hero-label and .filter-tab.active .count contrast in dark mode.
Fix Round 4 — 7 June 2026: Full Lighthouse sweep across all 15 portfolio pages. Fixed IELTS dark mode: replaced all blue text (h1, h2, exam-header-strip, transcript-btn, recorder-info, back-btn) with #fbbf24 yellow (13.2:1 AA). Fixed Interactive Quiz heading order (h1→h2→h3) — scored 98→100. Fixed design-samples: iframe titles, <main> landmark, and meta description (87→100). Fixed wcag-report h1 contrast and missing meta description (95→100).
Fix Round 5 — 7 June 2026: Added <meta name="description"> tags to all 6 pages that lacked them (h5p.html, ielts-masterclass, interactive-quiz, ai-literacy, data-privacy-compliance, giving-constructive-feedback). SEO score on all pages now 100.
Fix Round 6 — 7 June 2026: Added Children Psychology — Interactive Video (interactive-video.html) — a new H5P Interactive Video page restored from an H5P export. Lighthouse 100/100/100 in both themes. Design system tokens match all existing pages.
Fix Round 7 — 20 June 2026: Added Adapt Framework Mini Course (adapt-framework-xapi/) — a SCORM 2004 + xAPI course built with the Adapt Framework. Full WCAG 2.1 AA compliance audit completed. Fixes applied:
  • Added role="dialog", aria-labelledby, aria-describedby, and aria-modal="true" to custom modal
  • Implemented focus trap (Tab cycles within modal when open)
  • Added Escape key handler to close modal
  • Added auto-focus to OK button when modal opens
  • Added visible :focus-visible outlines for back button and modal buttons
  • Fixed light theme CSS selectors to use html.theme-light / html.theme-dark (matching Adapt Framework's actual theming mechanism)
  • Color contrast verified: Light 16.5:1, Dark 15.8:1 (both exceed AAA 7:1)
  • All 5 images have descriptive alt text
  • Responsive design verified across all breakpoints (desktop, tablet, mobile)
Fix Round 8 — 6 July 2026: Added Workplace Safety Compliance Training (workplace-safety-scorm/) — an Articulate Rise 360-style SCORM 2004 4th Ed. course. Full WCAG 2.1 AA compliance audit completed: 15 interactive block types (data charts, confidence sliders, drag-and-drop, branching scenarios, statement blocks, tabs, flashcards, galleries, sorting activities), all with proper ARIA labels, keyboard navigation, and focus management. Skip link, landmark regions, and semantic HTML throughout. Passes in both light and dark themes.
All pages now pass WCAG 2.0 AA + Lighthouse 100: 15 of 16 portfolio pages score 100/100 on Accessibility, Best Practices, and SEO. The sole exception is the Learning Analytics Dashboard (learning-analytics/index.html), which is an external Veracity LRS redirect — Lighthouse cannot audit it.
Fix Round 8 — 22 June 2026: Added LXD Design Frameworks & Evaluation (adapt-lxd-frameworks/) — an Adapt Framework branching scenario course on real-world LXD decisions. Full WCAG 2.1 AA compliance audit completed:
  • Colour contrast verified in both light and dark themes — all ratios pass WCAG 2.1 AA (body text 15.2:1, headings 8.43:1, buttons 9.13:1)
  • Noted data-theme vs CSS theme-dark class mismatch — Adapt's internal theme toggle adds/removes CSS classes without updating the inline data-theme attribute, but no visual impact on accessibility
  • Identified <button role="link"> for View Course navigation — ideal fix would be <a> element, but functional for screen readers
  • Notification drawer colour (#d0d0d0) persists in dark mode — visual inconsistency but 11.5:1 contrast ratio passes
  • All colour contrast ratios verified at AAA/AA thresholds — no blocking accessibility issues found
Fix Round 9 — 23 June 2026: Added Error Correction Dilemmas (Branching Scenario) (branching-scenario/) — a standalone HTML branching scenario for new EFL teachers featuring 27 authentic teaching dilemmas. Full WCAG 2.1 AA audit completed:
  • Added <main> landmark, skip link, and lang="en"
  • Added meta description for SEO and screen reader context
  • Heading order verified: h1 → h2 with no skipped levels
  • All buttons have accessible names via aria-label
  • All form inputs have associated <label> elements
  • Colour contrast verified: body text rgb(2,6,23) on white rgb(255,255,255) — exceeds AAA 7:1
  • Focus indicators present via :focus-visible with 3px primary outline
  • Granular xAPI tracking statements for every decision choice
  • No images on page — decorative gradient strip replaces imagery
  • Lighthouse 100/100/100 in both light and dark themes
Fix Round 10 — 29 June 2026: Added EFL Teaching Dilemmas (Adapt Framework) (adapt-efl-branching/) — a SCORM 2004 branching scenario built with Adapt Framework featuring 20 authentic EFL classroom dilemmas with dark theme toggle and custom xAPI tracking. Full WCAG 2.1 AA compliance verified: colour contrast passes in both themes, all interactive elements have accessible labels, focus indicators present, and heading hierarchy follows h1→h2→h3 pattern.
Fix Round 11 — 6 July 2026: Fixed 3 SCORM course accessibility violations: color-contrast (.section-card-meta from #999 to #595959 for 7:1 ratio in both index.html and scorm.html), scrollable-region-focusable (added tabindex="0" to <nav id="sidebar"> in both HTML files), and aria-prohibited-attr (added role="img" to .checkmark-animated span in scorm.js). Also fixed static server in wcag-audit.mjs that failed to serve directory index.html files via statSync directory check.
Fix Round 12 — 14 Aug 2026: Added Storyboarding Sample (storyboard.html) — a self-contained, data-driven curriculum storyboard for the Applied AI Security & Leadership course. Full WCAG 2.1 AA accessibility audit completed with axe-core in both light and dark themes: 0 violations. The page passed landmark, heading-order, colour-contrast, and bypass checks, and uses a semantic heading hierarchy (h1 → h2 → h3) with AA-compliant text contrast on the dark glassmorphism background and visible focus outlines on all interactive elements.
Third-Party Content: The Learning Analytics Dashboard embeds a reporting tool from Veracity LRS, which generates its own interactive charts and interface elements. These are rendered by the third-party service and cannot be modified from our end. The host page (theme toggle, back button, iframe container) passes all checks.

Methodology

Each page was tested using Google Lighthouse in an automated browser session. Tests were run at desktop resolution (1280×720) on both light and dark themes, covering WCAG 2.0 Level A and AA, plus WCAG 2.1 Level A and AA accessibility success criteria.