Surprise! Your “semantic, accessible, search engine friendly” WordPress theme is none of the above.
by Dean Hamack
January 22nd, 2009
I’ve been a fan of WordPress for a long time, and have used it to set up numerous blogs for clients over the years. So when I finally got around to building one for myself, W.P. was the logical choice. The tough part was choosing a theme.
I had five basic requirements:
- It had to be Valid XHTML
- It had to have clean, simple markup and CSS without tables, absolute positioning, etc.
- The markup had to be semanitic
- It had to be optimized for accessibility
- It had to be optimized for search engines
Considering the vast number of WordPress themes available, this didn’t seem like a very tall order. Finding one that met the first two requirements wasn’t that difficult (since even the default theme validates and is tableless). But after hours of searching, I was unable to find a single theme that met all five (despite the claims of their authors). More suprisingly, I discovered almost all themes violate some very basic structural markup rules.
Semantics
If you Google the term "semantic markup", you will find dozens of articles attempting to explain exactly what the term means. For more on the subject of semantic markup, check out Joseph Lindsay’s presentation here.
Most WordPress themes aren’t semantic because they use classnames like "narrowcolumn" and HTML tags like <small>, <bold>, and <hr> (all of which have been deprecated). Most themes also suffer from "div-itis" (the practice of wrapping every single item in a div tag, whether it needs it or not). Blocks of text should be paragraphs, comments should be ordered list-items, etc.
Accessibility
Web accessibility is about making websites usable by everyone, regardless of their platform or disability. Since W.P. is designed primarily to be a platform for distributing basic text information (rather than audio and video), we’ll concentrate on two types of users: those with visual impairments and those using mobile devices (iPhone, Windows Mobile, etc.)
Visual Impairments
There are three common types of visual impairment:
- Complete blindness
- Low Vision (poor eyesight)
- Color blindness
Complete Blindness
People in the first category use screenreaders to navigate the web. A screenreader works by reading the text of your website in the order it appears in your markup. Screenreaders ignore CSS (with the exception of elements set to display="none"). Screenreader users can also skip sections of your page by tabbing to a heading tag (H1, H2, etc.). Making your site accessible to these users means giving them the ability to quickly navigate to the information they are looking for, without having to wade through a bunch of irrelevant stuff first. For example: a sighted user arriving at this site looking for articles on accessibility can quickly see the category link in the right hand sidebar. But since nearly every W.P. theme places the page navigation and category links after the post content, the blind user has to listen to (or toggle through) all of your content before they can get to those links.
One of the ways you can improve the accessibility of your site is by using a "skip link". Skip links are generally placed at the very top of your markup and have anchor text that says "skip navigation" or "skip to content". This allows people using screenreaders or mobile devices with very little screen real estate to quickly jump past your navigation or content. A few W.P. themes incorporate this feature, but it’s completely useless in most of them. In every one I tried, clicking the "skip navigation" link only got me past the logo and a search bar. I still had to scroll all the way through the page text to get to the categories and other sidebar content. I could only find one theme that made proper use of the skip link. But that theme suffers from 50 validation errors, inline styles, deprected tags, and numerous semantic errors.
Making your site accessible also means not using markup for decorative elements like the "|" and "»" characters. WordPress is rife with these, and it’s extremely annoying for screenreader users. For more on that subject, you can read my article on Special HTML Characters and Accessibility.
Low Vision and Color Blindness
People with poor eyesight have a difficult time reading small text, and text which has a low contrast ratio to the page’s background. So while your 10 pixel, gray, Times New Roman text on a black background may be fine for young people with good eyesight, it’s less than ideal for people with aging eyes or visual impairment. And your links without underlines may be fine for people who can see colors, colorblind people won’t be able to distinguish them from plain text.
If your theme uses basic black text on white background, underlined links, and relative font sizes, its probably fine for low vision users. If not, you should provide users with the ability to switch to an alternative stylesheet.
Mobile Devices
At the time of this writing, statistics show that approximately 1 out of 100 people visiting a given website are doing so on a mobile device such as an iPhone, Windows Mobile, or BlackBerry. Multi-column layouts, small fonts, etc. work really poor on devices with three inch screens. So in order to make your site accessible to those users, you need to provide a mobile stylesheet.
Search Engine Optimization
One of the most hotly debated topics in the field of web-dev is the proper use of header tags. There’s no solid information on the subject, but my anecdotal evidence suggests that Google and other search engines give more weight to H1 tags than other lesser headings (H2, H3, etc.). That being the case, the title of your post (which is the most relevant thing on a given page) should be an H1 not your blog title. Unless you are a superstar in the blogging world, it is highly unlikely that people are going to be searching for the name of your blog. Even if they are, your domain name, page titles, and other content should be more than sufficient to get them to the right place. Additionally, the way WordPress sets up page titles is backwards from an SEO standpoint. It places the blogname before the article’s title, rather than after it ((as it should be). Unfortunately, you can’t change the order in the theme, it must be done by hacking the "general-template.php" file, or by installing a plugin such as the All in One SEO Pack.
"If you want something done right…"
Since I couldn’t find a theme that met all of my criteria, I decided to build my own theme called "Access". It’s the result of a whole lot of testing, tweaking, and input from from a lot of people.
Features:
- All unecessary divs and deprecated HTML tags removed
- Semantic classnames and ID’s
- Stylesheet for mobile devices
- A "theme switcher" menu to improve accessibility for low-vision users
- A "skip link" to improve accessibility for screenreader and mobile device users
- All special characters removed and replaced with background images
- All CSS and PHP minified (white space and unecessary comments removed) to decrease file size and load times
- Logo and icons contained in a single image "sprite" to reduce HTTP requests
- Comment form optimized with proper label placement and markers to denote required fields
- And of course, Section 508 compliance and 100% valid XHTML/CSS (with the exception of the mobile stylesheet which doesn’t validate due to iPhone specific styles)
Server Requirements:
- WordPress 2.7 or higher
- PHP 4
- MySQL 4.1 or higher
The theme is a very clean, basic, black and white theme. It was designed primarily to be used as a starting point for developers, rather than an end-product. But it still looks great out of the box. This site uses the very same template, with only a few modifications to the stylesheet, and a few extra images.
Update – 04/27/2009:
The latest version of Access is available now. A huge thanks to Stephen Howard for making the theme switcher compatible with both PHP4 and PHP5. If you’ve been getting parse errors when trying to install the theme, it’s probably because you had PHP4. This latest version should fix those.
You can download the Version 2.1 of the Access Theme for WordPress 2.7 here
38 Responses to “Surprise! Your “semantic, accessible, search engine friendly” WordPress theme is none of the above.”
You must be logged in to post a comment.