skip to main content
Web Accessibility Logo
Person sitting on a wheelchair with the internet as wheels using a laptop
Link To Home
Toggle Navigation
Intro to Web Accessibility
About Us
Our Services
ADA Training
ADA Consultation
Accessibility Certifications
Website Evaluation
Documents
Accessible Website Design
Website Remediation
Contact Us
Accessible Code Samples
Accessible Code Patterns
Learn More
Photo by Roman Synkevych via unsplash
Categories
Menus
Imagery
Accordions & Tabs
Forms
Buttons
Anchors/Links
Modal Windows
Tables
Tooltips
Labelling
Video Players
Other
Patterns
Menus
Mega Dropdown
Mobile Toggle
Off Canvas Push
jQuery accessible keyboard-enhanced dropdown navigation
Imagery
Accessible SVG Link List with Tooltips
SVG
Video Element Backgrounds
Accordions & Tabs
Accessible Accordions (progressively enhanced Vanilla JS)
Accessible Tab Widgets (progressively enhanced Vanilla JS)
Responsive Tabs to Accordion
Simple Accordion
Simple Responsive Tabs (Vanilla JS)
Simple Tabs
Forms
A11y Styled Form Controls: from checkboxes and radios, to toggle buttons and range sliders
Accessible Floating Labels
Buttons
ARIA Switch Control
Form Submission
Single Toggle (anchor)
Anchors/Links
Read More Links
aria-label
aria-labelledby
hidden <span>
Skip To Content
Modal Windows
Accessible Modal Dialogs
Launchy: An Accessible Modal Window
The Incredible Accessible Modal Window, Version 4
Tables
Simple ARIA Data Table
Simple Data Table
Tooltips
Form field with icon-based tooltip for extra field information
Toggletip from paragraph
Labelling
Using aria-labelledby with Lists
Video Players
Able Player
Accessible HTML5 Video Player
Plyr Player
Other
Accessible Breadcrumb Navigation Pattern
Content Touch Target
High Contrast-friendly dropshadow
Back-To-Top — hit enter to go back up
