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.
All solutions require the following css and js files.
This autocomplete is created to work on desktop and in mobile with screen readers and switch devices.
This accessible table page gives a how to, example, and code snippet.
This drop menu is also responsive, changing to an accessible drawer menu.
Preferred SVG code for use in links and buttons.
This modal example uses role="dialog", role="document", aria-controls, and aria-hidden to create an accessible solution.
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.
This form example uses label and legend correctly. It also demonstrates accessible error handling.
This form example with disabled submit shows an accessible solution for the disabled-submit-as-validation design pattern.
This accordion example is light in aria. It demonstrates the use of aria-owns, aria-controls, and aria-expanded.
This barchart example uses HTML/CSS applied to a data table.
For information only. No additional requirements.