A11Y Style Guide
Style guide and pattern library promoting accessible components and WCAG compliance criteria.
About A11Y Style Guide
A11Y Style Guide is a living style guide and pattern library generated from KSS-documented styles, focused on web accessibility. It provides pre-populated, accessible UI components along with related links to tools, articles, and WCAG guidelines, and includes both HTML markup and SCSS/CSS code for each component.
The tool is intended for front-end and back-end developers, designers, and UX/UI specialists working on websites, particularly those who handle multiple roles on a project and want to build accessibility into components from the start. It can be used as a reference, as a base for building a custom style guide or accessible component library, or as a foundation for a new accessible theme.
The project is open to contributions, with a separate contributing guide available for people who want to help build it out. It also links to a getting-started resource for accessibility beginners and a resources page with further material.
Key features
- Living style guide/pattern library generated from KSS documented styles with accessibility focus
- Pre-populated accessible UI components (cards, forms, navigation, media, structure)
- Components include links to related tools, articles, and WCAG guidelines
- Provides HTML markup and SCSS/CSS code examples for each component
- Open to community contributions via a Contributing Guide
Frequently asked questions
What is the A11Y Style Guide?
It is a living style guide or pattern library generated from KSS documented styles, with an accessibility twist.
How can I use this tool?
It can be used as a reference, as a base for your own style guide or accessible components, or as a base for a new accessible theme.
Who is this for?
It is aimed at front-end developers, designers, and QA testers who want to incorporate accessibility into their site components.
Can I contribute to the project?
Yes, contributions are welcome and instructions are provided in the Contributing Guide.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
A11y Coffee
Accessibility/LearnThe introduction on web accessibility for every single web developer.
A11ygator
AccessibilityAn application, a Twitter bot and a browser extension that bites websites to taste their accessibility.
A11yWeekly
Accessibility/NewsletterA weekly dose of web accessibility to help you bring it into your every day work.
Accessible Color Generator
Accessibility/ColorA tool for creating color variations on a base color to meet WCAG AA or AAA color contrast ratio guidelines.
ally.js
Accessibility/LibraryJavaScript library to help modern web applications with accessibility concerns by making accessibility simpler.
Awesome a11y
AccessibilityA curate list about A11Y. Contribute to brunopulis/awesome-a11y development by creating an account on GitHub.
