CSS HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5cd049e Feb 4, 2018
Failed to load latest commit information.
.github move issue template from root to .github folder Jan 14, 2018
dist opacity update Feb 4, 2018
docs demo update 2 Feb 4, 2018
gulp-tasks removing drupal only files and updating audio/video component wording Mar 27, 2017
src demo update Feb 4, 2018
.babelrc initial check-in Feb 6, 2017
.editorconfig updates to make theme work on top level Mar 12, 2017
.eslintrc initial check-in Feb 6, 2017
.gitignore update gitignore to ignore more things Aug 20, 2017
.nvmrc updates to make theme work on top level Mar 12, 2017
.sass-lint.yml updates to make theme work on top level Mar 12, 2017
LICENCE Create LICENCE Mar 28, 2017
README.md readme updates Jan 20, 2018
npm-shrinkwrap.json more cleaning Mar 25, 2017
package.json add license & repository to package.json Apr 8, 2017


A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise, there are ways to help contribute to the a11y style guide.

See a live demo of the style guide.

Why did this project start?

We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer, UX/UI specialist, site-builder, QA tester, and developer all rolled into one. How can we possibly add the accessibility hat on top of all that? What accessible pieces should we even include? Which pieces are easy wins vs. impossible juggernauts? How do we implement inclusive design and development when a project does not have a lot of time or budget to include that piece?

One way we can tackle these issues is by using an accessible component driven approach. By thinking about inclusiveness from the start, we can get a head start on accessibility while still building the required site components.

The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.

How do I use this tool?

  • As a reference.
  • As a base for your own style guide.
  • As a base for creating your own accessible components.
  • As a base for a new accessible theme.
  • Contribute to the style guide and make it better.

Really? What can't you do with it is an easier question?

How can I contribute?

Please see the Contributing Guide for more information.

How did I get here?

Maybe you are a total beginner and wondering where to start? That's cool...welcome! Learning accessibility can feel a bit like drinking out of a firehose, so here are some tips to follow on your journey toward accessibility: Getting Started with Website Accessibility.