DIAGRAM Center: Accessible Interactives Library

Able Player

A fully accessible cross-browser HTML5 media player designed from the ground up to meet the diverse needs and preferences of all users.

Caption and Descriptive Editing Tool

CADET is free, downloadable caption-authoring software that enables anyone to produce high-quality caption files that are compatible with any media player that supports the display of captions. CADET can also be used to generate audio-description scripts.

OzPlayer

OzPlayer is fully compliant with the W3C Web Content Accessibility Guidelines, Version 2.0, Level AA. We want video to be accessible to everyone and therefore offer it free for non-profit use.

Accessible Non-Repeating Carousel

Fully accessible horizontal carousel showing multiple book jacket covers to scroll through and select.

Slic Accessible Carousel

Fully accessible Fully responsive carousel that scales with its container.

Characters Remaining Counter

Using ARIA-live messaging to announce remaining character count in a fixed character count edit textbox.

Simple Two State Checkbox

Dual-state: The most common type of checkbox, it allows the user to toggle between two choices -- checked and not checked.

Tri-State Checkbox

Tri-state: This type of checkbox supports an additional third state known as partially checked.

Radio Button Tab Index

Radio button group using roving tabindex for managing keyboard focus.

Radio Button Group (aria-activedescendant)

Radio button group using aria-activedescendant for managing keyboard focus.

Combobox with Grid Popup

Implements the combobox design pattern using a grid for the suggested values popup.

Combobox using Listbox

Implements the combobox design pattern using a listbox for the suggested values popup.

Color Contrast

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. This utility makes it easy to choose an appropriate color forground / background in order to meet this minimum contrast ratio.

Color Safe

Color Safe generates an acceptable range of foreground colors base on your choice of background color, styling of your text. Accessible text colors are generated with WCAG Guidelines recommend contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold.

Predictive Text

The predictive text pattern allows users to type in values or to select values from a list of possible matches that appears after the user starts typing. Screen readers announce the availability of predictive text options, and users can select the options with keyboard, touch, or mouse.

Horizontal Multi-Thumb Slider

A multi-thumb slider is a slider with two or more thumbs that each set a value in a group of related values. For example, in a product search, a two-thumb slider could be used to enable users to set the minimum and maximum price limits for the search.

Slider

A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider.

Date Picker

Accessible Date picker which brings up a calendar where you can pick a specific Day/Month/Year.

ARIA Modal Date Picker

The example includes a date input field and a button that opens a date picker that implements the ARIA dialog design pattern. The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar. Choosing a date from the calendar closes the dialog and populates the date input field. When the dialog is opened, if the input field is empty, or does not contain a valid date, then the current date is focused in the calendar. Otherwise, the focus is placed on the day in the calendar that matches the value of the date input field.

Drag & Drop Overview

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.

Interactions addressed

• Categorization
• Matching
• Ordering
• Sorting Lists

Drag & Drop Overview

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.

Interactions addressed

• Single Source List - Multiple Desinations

UX designed fully accessibvle ListBox

Implements a rearragable listbox baised on AIRA authoring practices

Ace Checker

Ace, the Accessibility Checker for EPUB, is a tool developed by the DAISY Consortium to assist with the evaluation of accessibility features of EPUB publications.

EPUB Check

EPUBCheck is a tool to validate the conformance of EPUB publications against the EPUB specifications. EPUBCheck can be run as a standalone command-line tool or used as a Java library.

Scale Vector Graphics Information Box

Open source example of accessible SVG Info Box on Github using colorful map of United States

Detailed Image Descriptions Show/Hide

Samples of alt text vs. longer use of descriptions for images, aria-details in the wild, and an ongoing project to make them more context-appropriate.

Accessible MathML

Accessible Wkipedia Math increases accessibility of math in Wikipedia pages.

Menubar

A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.

ARIA Editor Menubar

A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.

ARIA Alert

An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound. It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.

Alert Dialog

An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response. Examples include action confirmation prompts and error message confirmations. The alertdialog role enables assistive technologies and browsers to distinguish alert dialogs from other dialogs so they have the option of giving alert dialogs special treatment, such as playing a system alert sound.

Disclosures

A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

Disclosures

A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

Disclosures

A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

HTML Summary / Details

The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

ARIA Modal Dialog

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

Accordian

The Accordion example contains a simple personal information input form divided into 3 sections to demonstrate the design pattern for accordion. In this implementation, one panel of the accordion is always expanded, and only one panel may be expanded at a time.

Tab Panel

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

Tab Panel

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

Multi-Check Grid

To use the Multi-Check in Grid allows you to specify a "main" region using predefined WAI-ARIA role and reate a custom "Response" region using a WAI-ARIA "region" role and an "aria-label" attribute. If you are using a "table" element for layout purposes, give it a "role" attribute of presentation. A better alternative is to use CSS for layout. Prevent announcement of these column headings ahead of checkboxes by using "aria-hidden='true'."

Converts Dataset into an Accessible Table

Converts a (TSV) Tab Separated Value data file into an HTML Table

Toolbar

The Aria Toolbar example demonstrates the design pattern for toolbar that demonstrates how a toolbar can group a set of buttons into a single tab stop. It also illustrates the roving tabindex method for managing focus within a component.

File Directory Tree View (Computed)

When users activate an item that represents a file name in the tree, the name of the selected file appears in the read-only edit field next to the tree. This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level.

File Directory Tree View (Declarative)

When users activate an item that represents a file name in the tree, the name of the selected file appears in the read-only edit field next to the tree. The code in this example explicitly declares values for aria-setsize, aria-posinset and aria-level, which overrides browser computation of values for these properties.

Navigation Directory Tree View (Computed)

The user can browse a set of pages about items that is organized into categories. Activating an item in the tree will open a page about the chosen item. This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level.

Navigation Directory Tree View (Declarative)

The user can browse a set of pages about items that is organized into categories. Activating an item in the tree will open a page about the chosen item. The code in this example explicitly declares values for aria-setsize, aria-posinset and aria-level, which overrides browser computation of values for these properties.

HTML CodeSniffer

HTML CodeSniffer is a validation tool that checks provided HTML against web accessibility standards. It can be run in javascript source, via a CLI, and as a Node.js module.

aXe: accessibility engine for automated Web UI testing

aXe is a testing engine for testing accessibility for HTML. This Node.js module can be used to run tests on your code and report errors. There is also a chrome extension for browser-side testing.

Accessibility Insights for Web (Microsoft)

This browser extension can be used to find and fix accessibility problems in websites and web apps. Accessibility Insights for Web can quickly determine the most important accessibilibty problems and provide steps and methods to fix them.

Web Accessibility Evaluation Tools List

This comprehensive list compiled by the W3C consists of over 140 tools, from browser extensions, to testing frameworks and HTML validators.