That Standards Guy

I’m pleased to announce the release of my first WordPress theme today—Brave New World. The theme is free of layout and styling beyond a modified version of Eric Meyer’s reset CSS and a baseline typography. Just like Elliot Jay Stock’s Starkers theme this is a base theme free from cruft yet incorporates HTML5, WAI-ARIA landmark roles and hCard and hAtom microformats.

HTML 5?

Yep, it’s the new kid on the block and everyone should say “Hi!”. Keeping up with this evolving spec could be pretty time-consuming if it were not for the excellent HTML 5 Doctor. Complementing the Doctor is the HTML 5 Gallery that is doing a great job curating live HTML 5 websites.

Internet Explorer chokes on HTML 5 without a small piece of JavaScript to create the new elements in the DOM so this is the one piece of (included) JavaScript you do want to load in the header. This allows IE to see the styles you apply to them but because they are treated as inline elements rather than block I have added a line to the reset.css file:
header, nav, section, article, dialog, figure, aside, footer {display:block; margin:0; padding:0;}

Here’s a quick overview of the template structure:

• The site title is wrapped in a tag.
• The main content is wrapped in a
  tag.
• Each post on the home page is wrapped in a tag.
• Each post has a tag for the title with a nested for the post date and microformatted author name.
• Each post has a
  tag for the excerpt or full content.
• Each post has a tag for the metadata.
• Each comment is an inside a comments that is nested inside the post .
• The sidebar is marked up with the tag.
• The footer is marked up with the tag.

This structure also gives me the necessary hooks to incorporate the hAtom microformat which I shall come onto after introducing WAI-ARIA to you.

Why ARIA?

The Web Accessibility Initiative’s Accessible Rich Internet Applications suite (WAI-ARIA) is a soon-to-be released W3C standard for defining ways to make web content and web applications more accessible to people with disabilities. It’s especially helpful with dynamic content and advanced user interface controls developed with Ajax etc to interact with assistive technologies. Specifically, I’ve applied Landmark Roles to this template. These roles identify common areas of a web page and allow assistive technologies to develop features to help users identify and navigate to sections of page content. These consistent, semantically-named roles are seen as superior to the traditional “skip to content” links we previously used. You would be right in thinking that the new HTML 5 elements would give you that too but as yet the assistive technology developers have not gotten involved with HTML 5 whereas they did with WAI-ARIA. Consider it a belts and braces approach in that WAI-ARIA complements HTML 5 very nicely:

• role="banner" on the first (site-title) tag.
• role="main" for the main wrapper.
• role="navigation" for the sidebar .
• role="contentinfo" for the main .

WordPress 3.0 introduces WAI-ARIA aria-required="true" to required input fields in the comments form. I’d love to make the comments form use HTML5 but haven’t figured out how to override the defaults yet—this parent theme stuff is a bit new to me.

hAtom and hCard microformats

The hAtom microformat, although a draft (version 0.1) is based on the Atom syndication format and as such is suited to content syndication (primarily blog posting). Here’s a quick overview of how I applied the microformat:

• The main
  is given a class name of hfeed.
• Each (post) is given a class name of hentry.
• Each post title is given a class name of entry-title.
• Each tag is given a class name of published.
• The author is marked up as a simple (and required) hCard microformat with an additional author class name.
• Each
  for the excerpt is given a class name of entry-summary.
• The full post
  is given a class name of entry-content.

Support

This theme is provided as-is, with no promise of support actually, although I’ll help out where I can if Google can’t help you first. I hope you find this useful, please let me know in the comments below and spread the word if you do. If you find any errors, please let me know in the comments below. If you can provide the file name, line number or some other signpost to where the error is if at all possible, that would be great thanks—the extended use of functions.php is quite the learning curve during the early days of WordPress 3.0.

Download the Brave New World WordPress Theme here (215Kb zip file). I’ve ran my anti-virus over it, but so should you.

Update: 7 April 2009

I made a slight amendment to the CSS reset today in light of the work done by Jacob Rask regarding the removal of elements no longer used by HTML5.

Update: 1 July 2009

• Comment block now marked up with tags.
• Removed a div, span and class=”url” from the post header.
• Updated this post with a lot more detail on the hows and whys of the theme.

Update: 7 July 2009

• Sidebar block now marked up with tags.
• Now linking to the html5.js script hosted on Google Code – thanks Remy!

Update 28 June 2010

• Completely rebuilt for WordPress 3.0 using the new default theme “Twenty Ten”
• Hat tip to Elliot Jay Stocks for his work on Starkers 3.0 upon which this theme is also built.