Interactive accessibility training platform for web developers featuring WCAG 2.1/2.2 guidance, ARIA patterns, keyboard navigation testing, and accessibility-focused UX workflows.
The interactive accessibility lab for people who build interfaces.
A premium, developer-first accessibility platform focused on real implementation patterns, WCAG 2.2 workflows, semantic HTML, ARIA systems, keyboard interactions, and production-grade front-end accessibility engineering.
https://www.508dev.com508 Dev is an interactive accessibility engineering platform designed for developers who build production user interfaces.
Instead of teaching accessibility through static documentation alone, 508 Dev provides live playgrounds, classified reference patterns, keyboard interaction systems, browser-exposed semantic inspection, WCAG references, developer utilities, and interactive testing environments.
The platform is a static, progressively routed application with zero runtime package dependencies. The main interactive experience remains in index.html; focused top-level routes provide stable, bookmarkable entry points.
It is optimized primarily for:
- desktop
- laptop
- modern browsers
Mobile and tablet experiences remain responsive and functional, but the core experience is designed around developer workflows on larger screens.
Most accessibility education falls into one of two categories:
- Compliance-heavy documentation
- Surface-level design guidance
Neither teaches developers how accessibility actually behaves in production.
508 Dev was created to bridge that gap.
The goal is to help developers:
- understand real accessibility failures
- test keyboard interactions
- visualize semantic structure
- learn ARIA behavior
- understand WCAG implementation
- ship accessible UI systems confidently
Every feature is implementation-focused.
Hands-on WCAG playgrounds designed to demonstrate accessibility failures and repaired reference implementations side-by-side.
- Target Size (WCAG 2.5.8)
- Redundant Entry (WCAG 3.3.7)
- Non-text Contrast (WCAG 1.4.11)
- Identify Input Purpose (WCAG 1.3.5)
Each playground demonstrates:
- failing implementations
- accessible implementations
- keyboard interaction differences
- visual contrast behavior
- real-world UX impact
Production-style accessibility patterns with:
- semantic structure
- ARIA usage
- keyboard interaction maps
- copyable implementation code
- accessibility explanations
- live interaction testing
- Modal Dialog
- Tabs
- Combobox
- Toast Notifications
- Tooltips
- Skip Links
- Accordions
- Menus
- Form Validation
- Date Input Systems
The pattern system focuses on implementation realism rather than simplified demo components.
Full WCAG 2.2 reference layer including:
- 86 current WCAG 2.2 success criteria
- SC 4.1.1 Parsing retained and labeled as a historical WCAG 2.0/2.1 criterion
- level filtering (A / AA / AAA)
- principle filtering
- version filtering
- searchable criteria
- linked demonstrations
- implementation-focused descriptions
The reference layer behaves more like developer documentation than compliance documentation.
Integrated accessibility engineering tools:
- AA / AAA validation
- ratio calculations
- live color comparisons
- accessibility tree visualization
- role inspection
- semantic hierarchy mapping
- heading-level validation
- skipped-level detection
- document structure analysis
- semantic landmark coverage mapping
- structural hierarchy visualization
- quick accessibility issue scanning
- categorized issue reporting
Built-in visual simulations for:
- protanopia
- deuteranopia
- tritanopia
- achromatopsia
- blurred vision
- low vision
- cataract simulation
Implemented using SVG filters and real-time rendering transformations.
A documentation-style search experience inspired by modern developer tooling.
- Header search button
⌘KCtrl + K/keyboard shortcut- Floating controls menu
- fuzzy search aliases
- WCAG number matching
- result grouping
- highlight matching
- recent searches
- accessible combobox behavior
- keyboard navigation
Interactive onboarding experience introducing:
- search workflows
- floating controls
- pattern library navigation
- developer utilities
The onboarding system supports:
- keyboard interaction
- focus management
- smooth viewport transitions
- accessibility-safe overlays
Documentation-style navigation system featuring:
- scroll spy behavior
- section highlighting
- grouped navigation architecture
- focus trapping
- ESC close behavior
- backdrop dismissal
- viewed-state persistence
Light and dark themes with:
- OS preference detection
- pre-paint theme initialization
- no flash-of-incorrect-theme
- localStorage persistence
- Safari compatibility handling
Persistent utility controls:
- vision simulator access
- documentation search access
- table-of-contents access
- scroll-to-top control
All controls share:
- consistent spacing
- consistent shadows
- consistent animations
- accessible target sizing
- mobile safe-area handling
Every code block includes:
- accessible copy controls
- hover-reveal behavior
- visual confirmation states
- zero-layout-shift interactions
Accessibility is foundational to the platform architecture.
- full keyboard navigation
- roving tabindex systems
- focus trapping
- ESC dismissal support
- Home / End navigation
- arrow-key widget navigation
- skip-link support
- keyboard-first workflows
- visible focus indicators
- focus restoration
- modal focus containment
- logical tab ordering
- reduced scroll-jump behavior
- accessible overlay handling
- landmark regions
- heading hierarchy
- native interactive elements
- semantic lists
- accessible navigation structure
- production-style document architecture
Includes:
- dialogs
- tabs
- comboboxes
- live regions
- disclosure widgets
- status messaging
- active descendant systems
- accessible overlays
Animations respect:
prefers-reduced-motionMotion-heavy transitions are disabled automatically for users requesting reduced motion.
Responsive support exists for:
- desktop
- laptop
- tablet
- mobile
Primary optimization target:
- desktop accessibility workflows
- developer tooling experiences
- large-screen documentation navigation
| Shortcut | Action |
|---|---|
⌘K |
Open search |
Ctrl + K |
Open search |
/ |
Open search |
ESC |
Close overlays |
Tab |
Navigate interactive controls |
Shift + Tab |
Reverse keyboard navigation |
Arrow Keys |
Navigate composite widgets |
Home / End |
Jump within widget systems |
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | Tailwind CSS + custom CSS |
| Behavior | Vanilla JavaScript |
| Icons | Inline SVG |
| Architecture | Static routes + interactive document |
| Storage | localStorage / sessionStorage |
No frameworks.
No build tooling.
Node-based repository audits are available through npm scripts; the shipped site itself has no package-runtime dependency.
No runtime dependencies.
The shipped file is the source file.
508Dev/
├── index.html # Interactive home and complete legacy experience
├── learn/index.html # Learning-path entry point
├── playground/index.html # Playground catalog
├── playground/target-size/ # Deep-linkable lab
├── patterns/index.html # Pattern catalog
├── test/index.html # Testing tools and workflows
├── reference/index.html # Developer reference catalog
├── standards/index.html # Standards and legal-context catalog
├── assets/content-models.js # Central standards, status, path, and test data
├── assets/route.css # Shared route design system
├── scripts/audit.mjs # Repository accuracy and structure checks
└── package.json # Audit/test commands/assets/screenshots/hero-light.png
/assets/screenshots/hero-dark.png/assets/screenshots/pattern-library.png/assets/screenshots/wcag-reference.png/assets/screenshots/search-modal.png/assets/gifs/vision-simulator.gifgit clone https://github.com/deandreperry/508-dev.gitSimply open:
index.htmlin any modern browser.
No installation required.
Best experience:
- Chrome
- Safari
- Edge
- Firefox
Primary optimization targets:
- Chrome
- Safari
Recommended hosting:
- GitHub Pages
- Netlify
- Vercel
- Cloudflare Pages
Because the platform is static and dependency-free, deployment is instant on virtually any static host.
- Automated source, JavaScript-syntax, metadata, and heading checks are maintained in the repository
- Desktop and mobile browser smoke checks are part of the release workflow
- Browser/assistive-technology combinations remain explicitly untested until results are documented
PUBLIC PREVIEW — REFERENCE EXAMPLESPotential future roadmap:
- additional deep-linkable detail routes
- downloadable accessibility audit reports
- PDF accessibility tooling
- screen reader announcement debugger
- interactive ARIA tree visualizer upgrades
- component export systems
- saved accessibility testing sessions
- advanced accessibility quizzes
- accessibility scoring systems
- developer certification tracks
508 Dev is built around one core belief:
Accessibility should be learned through interaction, implementation, and testing — not passive reading.
Developers understand systems by:
- building
- testing
- breaking
- navigating
- inspecting
- comparing
The platform is intentionally designed to feel like modern developer tooling rather than educational software.
The goal is to make accessibility engineering feel practical, production-focused, and deeply integrated into front-end development workflows.
Copyright © 2026 De'Andre Perry. All rights reserved.This repository is publicly viewable for portfolio and educational purposes only.
No permission is granted to copy, modify, redistribute, sublicense, or commercially use this software without explicit written permission.
Built by De'Andre Perry.
GitHub:
https://github.com/deandreperryExample quality is classified as Reference, Complete, or Tested. Existing examples are labeled Reference until the documented browser and assistive-technology matrix supports stronger claims.
Public Previewfor public portfolio use and static hosting.