DIAGRAM Center: Accessible Interactives Library

Accessible Interactives (Work in Progress)

Name GitHub Repository Type Demo / Download Contributor(s)
Drag and Drop Drag and Drop GitHub 2018 HTML, CSS and JavaScript Drag and Drop Demo 2018 Ifran Ali
Drag and Drop Drag and Drop GitHub 2017 HTML, CSS and JavaScript Drag-and-Drop Demo 2017 Sina Bahram, Charles LaPierre, Jason White
Multi-Check in Grid Multi-check GitHub HTML, CSS and JavaScript Multi-Check in Grid Demo Ifran Ali
Accessible SVG InfoBox InfoBox GitHub SVG, ARIA Accessible SVG InfoBox Demo Doug Schepers
ARIA Accordion Accordion GitHub HTML, CSS and JavaScript Accordion Example Jon Gunderson
ARIA Menubar Multi-check GitHub HTML, CSS and JavaScript ARIA Menubar Demo Bryan Garaventa
ARIA Horizontal Multi-Thumb Slider Slider GitHub HTML, CSS and JavaScript Horizontal Multi-Thumb Slider Example Jon Gunderson
ARIA Horizontal Simple Slider HTML, CSS and JavaScript Horizontal Slider Example W3C WAI-ARIA
ARIA Grid Combobox Grid Combobox GitHub HTML, CSS and JavaScript Grid Combobox Example Jon Gunderson
ARIA Combo Listbox Listbox Combo GitHub HTML, CSS and JavaScript Listbox Combobox Example Jon Gunderson
ARIA Radio #1 Radio1 button GitHub HTML, CSS and JavaScript Radio Example #1 Jon Gunderson
ARIA Radio #2 Radio2 button GitHub HTML, CSS and JavaScript Radio Example #2 Jon Gunderson
ARIA Tabs #1 Tabs1 GitHub HTML, CSS and JavaScript Tab Example #1 Jon Gunderson
ARIA Tabs #2 Tabs2 GitHub HTML, CSS and JavaScript Tab Example #2 Jon Gunderson
ARIA Toolbar Toolbar GitHub HTML, CSS and JavaScript Toolbar Example Jon Gunderson
ARIA Treeview #1 Treeview1 GitHub HTML, CSS and JavaScript Treeview Example #1a, Treeview Example #1b Jon Gunderson
ARIA Treeview #2 Treeview2 GitHub HTML, CSS and JavaScript Treeview Example #2a, Treeview Example #2b Jon Gunderson
TSV to Table Converts a Tab Separated Value data file into an HTML Table Python Script Jason White, Sina Bahram
Accessible Wikipedia Math Accessible Wikipedia Math GitHub Firefox Add-on Increases accessibility of math in Wikipedia pages Rory Soiffer and Jake Springer
Accessible Tree HTML, CSS and JavaScript Code Pen Demo - Carousel Evan Yamanishi
Accessible Carousel HTML, CSS and JavaScript Code Pen Demo - Carousel Evan Yamanishi
Sortable Listbox HTML, CSS and JavaScript Code Pen Demo - Sortable Listbox Evan Yamanishi
Accessible Audio/Video Player Able Player HTML5 &Amp; Wordpress Able Player Demos Terrill Thompson
Enhanced Extended Image Descriptions Enhanced Image Descriptions GitHub HTML, CSS and JavaScript Enhanced Image Description Demo Evan Yamanishi, Sina Bahram, Jason White, Charles LaPierre

Update: Dec 18, 2018

Ideas that Work LogoThe DIAGRAM Center is a Benetech initiative supported by the U.S. Department of Education, Office of Special Education Programs (Cooperative Agreement #H327B100001). Opinions expressed herein are those of the authors and do not necessarily represent the position of the U.S. Department of Education.

Benetech Logo