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 Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., CSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., JS and PHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.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 GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ 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
