Semantic Details

When we did our Circle Six redesign, it was important to me that we go out of our way to make this our most semantic and accessible site yet. Clean, semantic code was the goal, and here are some details that we considered that you may want to keep in mind for your next project…

Doctype

The Doctype is an area of great controversy in the web design world. We went with XHTML strict, and our pages validate as such, but we send our content as html, so there are questions as to whether XHTML is appropriate at all. Either way, you generally want to go with the strict version of whichever you choose, HTML or XHTML.

Title

The title is where we put the name of our site, as opposed to the h1 tags. Those we reserved for the headline of each individual page. I took part in a lively discussion on this point on VIRB and eventually conceded that the site’s name and branding was better served in a div id=banner than in an h1, at least from a semantic perspective. It makes more sense for SEO as well. That being said, a page title should also include the name of the page you’re viewing. To accomplish this in Wordpress, just use basic template tags:

Title Code

< ?php wp_title(''); ?> < ?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at < ?php } ?> < ?php bloginfo('name'); ?>

For the purposes of branding, we include our tagline in our site’s title, which includes our city and state. This was determined by watching the searches that came into our site and desiring to improve our findability for those searches.

Navigation

It’s a good idea to be able to see at a glance where you are in a site. If your layout is fairly simple this is easily accomplished with a little PHP and some CSS. There are multiple ways of doing this, from setting an ID on the body tag that then corresponds to IDs set on each menu item to adding a class to the current menu item, which is the course we chose. We just added the following code to the menu, which is hardcoded. It gets a little more complicated if your menu is dynamically generated, but can be done:

Current menu selection code (snippet)

	<li><a href="<?php echo get_option('home'); ?>/" < ?php if (is_home()) echo ' id="current"'; ?> accesskey="h"><span class="access">H</span>ome</a></li>
	<li><a href="<?php echo get_option('home'); ?>/services" < ?php if (is_page('services')) echo ' id="current"'; ?> accesskey="s"><span class="access">S</span>ervices</a></li>

Then we just add a CSS style for #current, and now there’s a marker that shows what page your on with a glance at the menu. The style is set up so that it doesn’t change on hover, just to avoid confusion.

We also defined access keys in the menu. This is just an accessibility feature, but makes for easy navigation if it’s called out stylistically and the user happens to be savvy enough to make use of it (beyond those that require the use of it, of course). We marked out our access keys using a span rather than an ‘em’ tag because, semantically, we weren’t emphasizing the text, we were just styling it.

Content Ordering

The content ordering of the new Circle Six site was a point of great debate for me. Every page contains a sidebar on the left that describes the content of the page and sometimes offers related links. At the time that I first designed the site, the sidebars were short, sweet and to the point. They made good introductions to the page and it made sense to have them come first in the code. Things have grown a little more convoluted as the site has evolved and I have considered moving the sidebar to the bottom of the content ordering. Essentially, you want to be able to view the page without CSS and read it in a manner that makes sense. Accessibility guidelines require that there be an option to skip redundant navigation links to get to the content of the page, but that it makes sense to have those at the top. Your headlines should be in the order of importance, and your content should flow in an order that makes linear sense.

Well, it’s nearly three in the morning and I should either get something done or go to bed. It’s been fun!