Accessible Solutions

Link back to the GitHub Repository for these solutions.

This is a collection of accessible solutions. The links take you to a page demonstrating the fully functional widget.

Requirements for all solutions:

All solutions require the following css and js files.

Accessible Autocomplete

This autocomplete is created to work on desktop and in mobile with screen readers and switch devices.

Additional Requirements:


This accessible table page gives a how to, example, and code snippet.

Drop Menu / Mobile Drawer Menu

This drop menu is also responsive, changing to an accessible drawer menu.

Additional Requirements:

Inline SVGs for buttons and links

Preferred SVG code for use in links and buttons.

Dialog Boxes (Modals and Interstitials)

This modal example uses role="dialog", role="document", aria-controls, and aria-hidden to create an accessible solution.

Additional Requirements:

Tab-Like Navigation

This tab-like menu example shows two options: one where only one content panel is revealed at a time, and the other where all content is in view and selecting an in-page link scrolls that content into view.

Additional Requirements:

Form and Error Handling

  1. This form example uses label and legend correctly. It also demonstrates accessible error handling.

    Additional Requirements:

  2. This form example with disabled submit shows an accessible solution for the disabled-submit-as-validation design pattern.

    Additional Requirements:


This accordion example is light in aria. It demonstrates the use of aria-owns, aria-controls, and aria-expanded.

Additional Requirements:


Additional Requirements:

CSS-based Bar Chart

This barchart example uses HTML/CSS applied to a data table.

Additional Requirements:

Single-page Application

Additional Requirements:

Font Sizing, Font Weight, and Font Contrast

For information only. No additional requirements.