Accessible Components

I've built a good handful of accessible markup patterns and widgets at this point. Each is based on testing with users, UX and design needs of past projects, and from following W3C specifications & notes. I do enjoy making these :)

These components all live in their own repositories. Some are written in ES5 JavaScript, and should be pretty easy to add to an exiting project. Other older scripts require jQuery as a dependency. There are even a few that are just straight markup patterns, and any additional functionality would need to be supplied via the underlying language of a particular project (e.g. PHP, Ruby, more JavaScript).

Vanilla JavaScripts

The following scripts create custom UI components and widgets that require the use of ARIA:

• Accordions (v3)
• Disclosure Widgets (v1)
• Modal Dialogs (v3)
• Tab Widgets (v2)
• Switch Toggles (v1)
• Switch Toggle Web Component (v0)
• Tooltips (v1)
• Links (v1)
• Buttons (v1)

Markup Components

• Breadcrumb Navigation
• Landmarks Demonstration
• Various Styled Form Controls (some use JavaScript)

More to come...

This is an on-going project, so expect to see more scripts (and non-JS markup & CSS patterns) as time permits.

If you end up using any of these components, please let me know!

Most importantly, if you ever come across a bug or awkward UX quirk with a component listed here, please file an issue in the that component's GitHub repository.

Thanks!