WordPress Theme Pattern Library for Accessibility


We want to make creating accessibility-ready themes as easy possible. To do that, we’re working on building a library of accessible patterns for themes. That way, theme authors can learn about and implement accessibility in their themes with ease.

Goals

The goals are simple:

  • Become a central resource for WordPress theme developers to learn about and how to implement accessible patterns for accessibility-ready themes.
  • Patterns should be self contained and have as few dependencies as possible.
  • Be a codebase that gets tested rigorously, evolves constantly and keeps it simple.

Pattern Ideas

I have a handful of pattern ideas that should be included, most of which help meet the current accessibility-ready requirements. This isn’t an exhaustive list, of course, and other patterns would be needed and welcomed.

  • Skip link (in Underscores)
  • Mobile menu toggle (in Underscores)
  • Menu drawyer, expand from side
  • Menu overlay
  • Continue reading links (in Underscores, partly)
  • Form label and field patterns (start with Core markup and expand on that.)
  • Outline/:focus style examples
  • Tabs
  • Accordion

Implementation

After feedback from the Accessibility team, especially in a recent meeting, I think the best way to implement is:

  • Giving each pattern its own repository: Each pattern (including whatever HTML, CSS, JS and PHP needed) would be in a self-contained repository under this Github organization. Theme authors could just download the repos, drop in the code and go.
  • A page that explains the different patterns and their purpose. This would probably be a page in our future handbook or on our Make site.
  • A link to a demo. Showing the working pattern would be nice, but not a requirement. I would like to see different patterns created first before we worry about this aspect. To me, this comes later.

What’s Next

This is only a rough list of basic steps:

  • Start working on patterns needed for accessibility-ready themes.
  • Establish a code contribution policy.
  • Develop a testing policy.
  • Test patterns as they get created.
  • Release patterns.

We can release one pattern at a time really, as we create and test them.

Questions

I have an idea for a pattern. Can I work on it? Yes, just let me know in the comments, so I can keep track of who’s doing what and make sure we don’t have people working on the same pattern. That way, I can connect people for collaboration.

How do I get access to the WPAccessibility repositories so I can commit code, etc.? You should develop the pattern on your own Github account or locally first. Once I have a list of patterns being worked on, we’ll create repositories for them and go from there. We will likely adopt the fork and pull method.

What about theme frameworks? Can I submit a pattern for it? Yes, we’d like to cover as many methods of theming as possible.

Can I include Sass, Less, Grunt, Gulp, build tool, etc.? For now, please create patterns with as few dependencies as possible. Accessibility can be intimidating and we want keep the barrier to entry as low as possible.

If you want to be involved, make sure you’re following this blog. You’ll see updates here. If you have other ideas or questions, let us know in the comments.

#theme-pattern-library