DIAGRAM Center: Accessible Interactives Library

Accessible Interactives (Work in Progress)

Name Main Link Demo
Drag and Drop Drag and Drop GitHub 2018, Drag and Drop Demo 2018, Drag-and-Drop Demo 2017
Multi-Check in Grid Multi-check GitHub Multi-Check in Grid Demo
Accessible SVG InfoBox InfoBox GitHub Accessible SVG InfoBox Demo
ARIA Accordion Accordion GitHub Accordion Example
ARIA Menubar Multi-check GitHub ARIA Menubar Demo
ARIA Horizontal Multi-Thumb Slider Slider GitHub Horizontal Multi-Thumb Slider Example
ARIA Horizontal Simple Slider Horizontal Slider Example
ARIA Grid Combobox Grid Combobox GitHub Grid Combobox Example
ARIA Combo Listbox Listbox Combo GitHub Listbox Combobox Example
ARIA Radio #1 Radio1 button GitHub Radio Example #1
ARIA Radio #2 Radio2 button GitHub Radio Example #2
ARIA Tabs #1 Tabs1 GitHub Tab Example #1
ARIA Tabs #2 Tabs2 GitHub Tab Example #2
ARIA Toolbar Toolbar GitHub Toolbar Example
ARIA Treeview #1 Treeview1 GitHub Treeview Example #1a, Treeview Example #1b
ARIA Treeview #2 Treeview2 GitHub Treeview Example #2a, Treeview Example #2b

Accessible Audio/Video Players

Here is an open source accessible audio/video player that you can use to ensure your multimedia presentations are accessible, but just using this player does not make your presentation fully accessible, adding closed captioning, text-based audio descriptions, transcripts, signlanguage track, etc. must also be included.

Adding Extended Descriptions

When an image, table, graph, etc. needs an extended description, doing this in a way that is accessible and reduces the cognative load on the reader is very important. Here are some best practices on how to do this for both the web and EPUB digital ebooks.


Update: Aug 31, 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