WordPress and the Genesis framework are great tools for building a website. But if you need a WCAG accessible site: both programs have accessibility issues.
So: child theme plus a plugin
This Genesis child theme Leiden, in combination with the plugin Genesis Accessible, gives web developers a starting point for building an accessible website and gives users an accessible-ready website out of the box.
- Keep as close to the original Genesis default design
- Keep all Genesis functionality
- Make the site validate for WCAG 2.0 AA and the colour scheme for WCAG 2.0 AAA.
- No validation or parse errors
- No inline style (for complying with Dutch accessibility rules)
The child theme Leiden needs the plugin Genesis Accessible to be accessible, but the plugin can be used with any Genesis theme, to improve it’s accessibility. The child theme fixes the colour contrast and some validation issues, the plugin does the rest.
What’s in a name
So, why Leiden? Joseph Karr O’Connor started Cities, a project to build accessible WordPress themes, all named after cities. In October 2013 the first WordCamp Europe was held in Leiden and I live 10 kilometres from this wonderful, pretty, little town. No better name than Leiden then.
The theme logo represents the word Leiden in braille and the text Leiden: accessible Genesis theme. Credits for the logo design go to Daan Dijkmeijer.
Fixes and extra’s
- WCAG 2.0 AAA colour scheme
- Links are underlined
- W3C validation for CSS and HTML
- Added an HTML label with id for to the search forms and prevents a double id when there is more than one search form
- Replaced the H4 on widgets for a H2 for a semantic headings order
- Removed the title attributes on the site title
- Removed title attributes in the breadcrumbs
- Added keyboard accessibility to the drop down menu
- Skip Links are added, depending on the current (Genesis) page layout
- Fixed the heading semantics of the 404 and archive_page template (h4 headings becomes h2)
- Renamed Not found 404 → page not found
HTML label to the search forms (and Genesis Search widget)
Fixes the HTML of the search forms by adding a label for=id construction, making it valid HTML and readable for screen reader users.
WCAG reference: H44: Using label elements to associate text labels with form controls.
The plugin addresses not only Genesis issues but also some of the WordPress accessibility problems.
- Added the post title to the “read more” links
- Removed the H1 element from editor options.
Some functions overlap the options of the plugin WordPress Accessibility by Joe Dolson, but in Genesis Accessible the solutions are especially written for the Genesis framework, like the Skip Links option. You can use both plugins together (we don’t bite), just select the options you want from each plugin.
The functionality of the plugin Genesis Accessible Dropdown Menu is fully included into Genesis Accessible.
If you want to contribute to the translation: please let me know and I’ll give you access to the GlotPress of the plugin.
The Genesis Widgets
- Genesis Featured Page,
- Genesis User Profile Widget and
- Genesis Featured Post
still have major accessibility issues.
So these widgets can be disabled by Genesis Accessible, this is optional.
This year another accessible Genesis Child theme came out that uses the plugin Genesis Accessible. If you want more than just a standard theme, please check out the beautiful Genesis child theme Utility Pro by Carrie Dils.
The best thing ever would be if this child theme and the plugin would become redundant. That would mean Genesis and WordPress would be fully accessible. Maybe one day. Until then the plugin and the child theme will be maintained and expanded if necessary. Suggestions are always welcome.
In Genesis 2.2 a lot of the accessibility functionality will be added into Genesis core. You can use this plugin to activate those features when version 2.2 is released. This plugin is already compatible with this new version.