EvoBloggito

Oops! There Goes Another Accessibility Mistake

Author: Ray Gulick; Published: Jan 29, 2009; Category: Accessibility, CSS, Design/Development; Tags: Accessibility, CSS; One Comment

I’m not an accessibility “expert,” though I care about the issue and do my best to create accessible websites. However, I read a lot of web design/development information, and sometimes in my reading I pick up a trick without thinking through all of the accessibility angles. A classic example is how I’ve routinely (until now) implemented the Gilder/Levin Method of image replacement to place logos in the page header. The reason I settled on using the G/L method in the first place, by the way, is that it is supposed to be accessible. And it is, if properly implemented. Here is the HTML markup as it’s normally recommended:

<h2><span></span>Company Name Goes Here</h2>

I won’t bother with the CSS, because that’s not where the problem lies. The problem is in the HTML markup. Using a head tag (<h2>) in the page header turns out not to be such a good idea. The reason given for doing this is the supposed SEO benefits: Google will give the information high priority because it’s enclosed in a head tag. However, some of my SEO friends tell me there is little benefit to having the same heading on each and every page of a website.

But the real problem is that enclosing the company name in the h2 tag interferes with the document hierarchy. A semantically structured document has a single h1 heading first (in the "content" part of the webpage), followed by lesser headings. Including headings prior to the h1 heading interferes with the ability of people who use assistive technologies to make sense of the document.

So what’s the solution? Instead of using a head tag to enclose the company name, simply subsitute a div tag. Maybe it will cost you slightly in SEO (there’s a lack of consensus on this point), but it will definitely make your pages more accessible. I think it’s a good trade-off:

<div id=”logo”><span></span>Company Name Goes Here</div>

Related Posts

Why Bad Websites Happen to Good Companies, Part 9: Having a Print Designer Design Your Website

Five Fundamental Website Design Principles We Think About at Evo

Part 6, Why Bad Websites Happen to Good Companies: Too Much Stuff on the Home Page

Paying Attention to Website Accessibility

10 jQuery Plugins We Really, Really Like

One Response to “Oops! There Goes Another Accessibility Mistake”

1. dani says:

   January 31, 2009 at 1:12 am

   Ray,
   I guess there are many tricks on wordpress (try googling, key: heading seo wordpress or h1 seo wordpress) to make a homepage and single pages semantically correct and get score 100 by raven seo tools