First: I love the Genesis framework from StudioPress. It’s structured, flexible, user friendly and saves a lot of time developing themes. And the price is very reasonable for such a good framework.
But: It needs some changes to improve accessibility. Therefor I developed an accessible child theme, keeping the functionality of the original theme intact, so a developer can use and change it to her liking.
Get the theme at RRWD’s GitHub.
The following changes are made to a new child theme, belonging to Genesis version 1.8.2, to make it WCAG 2.0 AA valid.
The doctype is changed from XHTML 1.0 transitional into HTML5. That makes it possible to add landmarks and roles.
For screen readers and keyboard users skip links where added to the main navigation, the content, sidebars and the footer, depending on the page temple.
Semantics of the headings
Archives and categories lack a H1 heading and the sidebar and footer widgets have a H4 heading. So an H1 was added. This H1 was added hidden by CSS to keep the layout of the original theme intact.
If there is a primary navigation a hidden H2 was added on top of the HTML, according to the example by WCAG 2.0.
To keep constancy of the HTML the H1 is now always directly above the content, no heading is added to the site title and the description
Removed adding the H2 for the site description in the header, now always a <p> tag.
Changes in the CSS
- Added css for the skip link
- Added a .hidden class, to hide headings in the display, but not for keyboard users and screen readers
- Changed font size definition from pixels to em. Body base font-size: 100% (16px).
- Made the display of the H2 of the widgets similar to the original H4 :-)
- checked for WCAG 2.0 AA colour contrast, the original CSS is ok. Adjusted the link colour from #0d72c7 to #005AA4, to comply to WCAG 2.0 AAA, just because.
The stylesheet doesn’t validate for the -moz declarations. I decided to keep them in, no functionality is hindered by them. If it bothers you, remove them.
- Removed the title attribute from the images, to prevent confusion of screen readers, this will be solved in WP 3.5, but this is for now.
- Removed the title attributes form the copyright section in the footer
Added a template for the sitemap, this is a copy of the sitemap, shown with the 404 page.
The Genesis framework comes with a set of widgets, some of them are accessible, others need some work. I adjusted the twitter widgets and simplified the featured post:
- Links open in the same window
- No title attribute in the links
- Removed the links on the hash tags (to prevent an overload of links)
- Removed the date info per tweet (to prevent an overload of links)
WordPress and Genesis Theme settings
This you can set yourself with the installation of WordPress and the Genesis framework
- Disable fancy dropdowns
- Writing: Enable “WordPress should correct invalidly nested XHTML automatically”
- While editing: Don’t add a title to links in the editor
- Add Landmarks and roles
- Upgrade to WCAG 2.0 AAA
- Check all different lay-outs
- Check the comment system and lay-outs
- Documentation for the content manager
- Twitter widget: I chose not to link to hash tags to the accordingly twitter feed and remove the dat for each tweet. This to prevent an overload of links in the twitter feed. Is it better to leave the links out or add them?
- Semantics: Is an extra H2 necessary on top of the side bar, if so the headings of the widgets will be changed to an H3.