Within a web development organization, it’s ideal to maintain (and enforce usage of) design patterns and a components library. And they should work together; design patterns create consistency among visual elements across projects and the components library creates consistent implementation of those patterns during development. This is especially important on several levels including accessibility.
Here is an extensive list of recommended code libraries, patterns, and design systems. It’s one list instead of separating by category as many have elements of each. There are also some related articles below. Please leave a comment for any updates, corrections, additions, etc.
- U.S. Web Design Systems from United States government
- CMS Design System by U.S. federal government website; applied to HealthCare.gov and Medicare.gov; open-source
- Government Service Design Manual (UK)
- GOV.UK Design System — and blog post Introducing the GOV.UK Design System
- ADDED Oct 2023: W3C design system
- BBC GEL
- Australian Government Design System
- Online Accessibility Toolkit by The Government of South Australia
- Added Mar 2024: Component library from The City of Calgary
- AccDC Technical Style Guide by WhatSock/Bryan Garaventa
- Accessible_Components by Scott O’Hara
- No Style on GitHub by Adam Silver
- MIND Patterns from eBay by eBay/Ian McBurnie
- Cauldron React: Accessible Components Library by Deque Systems
- Code Library by Deque University
- Tenon-UI accessible React components library
- Foundation for Sites by ZURB
- A11Y Style Guide by @CarieFisher
- Demos by Web Overhauls by Web Axe author @DennisL
- Modern Web Accessibility Demos by @PaulJAdam
- Accessible Solutions by @haltersweb
- Vuetensils – A reportedly accessible component library for Vue.js
- Lightning Design System 2 by Salesforce
- Polaris by Shopify
- Rivet Design System by Indiana University
- Lion Web Components by ING Bank; Lion on GitHub
- Chakra – React component library by Segun Adebayo
- Web Experience Toolkit (WET) by Government of Canada
- Cedar by REI
- Access & Use
- Teach Access Tutorial
- Added Oct 2026: Accessible components library by Tetralogical
Related resources:
- W3C WAI-ARIA Authoring Practices – Design Patterns and Widgets
- Web Accessibility Tutorials by W3C WAI
- Inclusive Components article series by Heydon Pickering
- Design Patterns for [UK] Government Services UXPA 2016 (Slideshare) by Caroline Jarrett
- Style Guide Best Practices by Brad Frost
- Creating A Living Style Guide: A Case Study by Steven Lambert
- Website Style Guide Resources – long list of real life pattern libraries, code standards documents and content style guides.
- Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference? by UXPin
- Scaling accessibility with a design system by Geri Reid
- accessible-slick – the last (accessible) carousel you’ll ever need, by Accessible360
12 replies on “Web Accessible Code Libraries and Design Patterns”
Here’s another one that could be included from Adobe:
https://react-spectrum.adobe.com
Hi Dennis, surprised you don’t have the W3C WAI-ARIA Authoring Practices pattern in the resources.
Thanks Matt. I made it the first bullet in the list of resources.
[…] is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns that we can build upon based on technological and design […]
[…] is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns that we can build upon based on technological and design […]
[…] is actually the identical, whatever the precise coding language used. That is why I admire streamlined coding libraries with accessible patterns that we will construct upon based mostly on technological and design […]
[…] is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns that we can build upon based on technological and design […]
[…] a mesma, independentemente da linguagem de codificação real usada. É por isso que agradeço bibliotecas de codificação simplificadas com padrões acessíveis que podemos construir com base nas necessidades tecnológicas e de […]
[…] is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns[7] that we can build upon based on technological and design […]
[…] is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns that we can build upon based on technological and design […]
I would like to humbly submit https://agnosticui.github.io/a11y-tabs/ to add to the list. a11y-tabs a lightweight (less then 1Kb) JavaScript package that facilitates a11y-compliant tabbed interfaces. It was partially inspired by Kitty Giraudel’s a11y-dialog and of course the WAI-ARIA examples and MDN aria docs.
Great list — I’ve been leaning on GOV.UK Design System and the ARIA Authoring Practices for our own projects. We build photobooth machines with touchscreen kiosk software, and it’s surprising how often accessibility gets overlooked in self-service hardware UIs; things like proper focus order and contrast really matter when you have users of all ages and abilities tapping through a photo flow at an event. Would love to see more examples covering kiosk-style interfaces if anyone has recommendations.