SEO vs Accessible Web Design

There’s a discussion in the NG alt.internet.search-engines “comparing seo techniques [was: To hyphen or not to hyphen]” partially based on this web page How to get IE6 to apply image border styles on hover (mouseover)?.

The owner of the Locus Optimus (Els) is a web designer who focuses on accessibility based web design, a growing niche market due to recent web site accessibility legislation.

Some Free SEO Advice

If she came to me as a client with the primary goal of accessibility since that’s her niche market in web design and compromising accessibility would damage the sites credibility (I have SEO clients with similar needs, and you are a pain in the neck :-)) my optimization advice would be as follows.

Consider putting the logo area to the bottom of the code, this will push your pages content to the top of the code giving a possible SEO boost and making it more accessible to blind visitors using audio browsers (less need for the hidden “Skip to content” link by doing this as well). This allows you to add a relevant alt attribute to your logo image without affecting accessibility (very few visually impaired readers will get that far in the code), it really should at least say “Accessible Web Design Home Page” for your site (if it was just for SEO reasons then “Accessible Web Design” since that’s the home pages main SERP).

Oops, should have looked at the code for the page first, you’ve made two “mistakes” with the logo code.

First problem is it’s surrounded by a H1 header.

Second you’ve added a blank title attribute.

<h1><a href="/"><img src="/images/logo.gif" alt="Locus Optimus accessible web design" title="" width="300px"/></a></h1>

That’s a complete waste of a H1 header from an SEO perspective and unless you are using CSS to show an alternative to the image for text based browsers there’s no reason to have it there.

Update/correction: Els (owner of the site) has informed me the H1 header is there so text browsers see the alt text of the logo image as a header. I wasn’t aware any browser treated the alt text this way (good to learn something new) so I can see the accessibility argument for doing this (though there are alternatives without ‘wasting’ a H1 header). Interestingly (though not surprisingly!) IE does not see this text as a header when you turn images off, FireFox (as you would expect from a better quality browser) does.

Title attributes are shown as tool tips when hovering over an image in preference to the alt attribute when using Internet Explorer, so viewers see nothing when they mouseover that image. You shouldn’t use the title attribute and alt attribute together for this reason. Since the title attribute is currently ignored by Google (see bottom of Anchor Text Optimization) my advice is use only the alt attribute on images and the title attribute (if you must use it) on text links and similar items where the title attribute is displayed (but don’t expect an SEO boost in Google by using the title attribute, it’s ignored).

Speaking of headers the hidden H2 Navigation header should be replaced with another tag (span would be my choice) so as not to tell search engines the word Navigation is important. You should also change the H2 header with “How to get IE6 to apply image border styles on hover (mouseover)?” to a H1 header since that’s the title of the main content of this page (it should be considered most important hence H1).

There’s no menu on this page and only a small menu on other pages. There’s some benefits to having a menu, (again you can put it at the bottom of the code for SEO and accessibility reasons) and benefits to not having a menu. Really depends on the site in question.

Main benefits are your main pages receive a link from every page of the site, which tells the search engines which pages of your site are the most important (say it with links not flowers :-)) and it makes navigation of a large site much easier.

Biggest negative is every page has the content within the menu and this will ‘water down’ the relevance of most pages. This depends exactly what is within the menu of course, a site that is highly targeted to a small set of similar SERPs the menus anchor text is likely to use keywords that will help most pages of the site so you get an SEO advantage using a menu with relevant anchor text. Conversely a large site with no real focus or theme the anchor text is likely to not help many pages of the site and so could hinder your SEO efforts.

An alternative to a menu is a set of contextual links from either within the content or above/below it. These should be the most relevant pages to this pages theme. The link with anchor text “solution: get IE6 to apply image border styles on hover.” is a relevant contextual link, there are other pages that are highly relevant to this page that should be linked from here as well.

The set of number links at the top of the content should be deleted, they aren’t good from an SEO or accessibility stand point (I was surprised to see them?). For a partially sighted visitor it’s going to be a pain hovering over a set of small numbers to see a difficult to read title attribute (harder than carefully worded anchor text). Add your contextual links at the bottom and no need for these links.

I’m also surprised at the colours used for a site targeting the accessibility web site design market, those number links are very hard to distinguish as links because of the anchor text colours. Also red text on a white background, wouldn’t be my first choice, (I personally like the design, but I think it could put some potential clients off) it has to be black text on a white background for the most contrast (play it safe). I would be interested to here if there’s some research that these colours are easy to read relatively speaking?

The poppy image really should have alt text for both SEO and accessibility reasons. It’s not part of the templates structure (spacer image), those should have a blank or * alt attribute. It is part of the main content and deserves an alternative description. What exactly is a blind visitor to the page using an audio browser to take from this?

“The problem they experience, is demonstrated here:

poppy.jpg

As you can see when looking at this example in Internet Explorer 6″

I appreciate the text goes on to explain the problem (I quoted well to make my point above :-)), but I can see confusion caused by the lack of an alt attribute here.

Wouldn’t poppy.jpg better be represented by a description like “When viewed in IE5 or IE6 the border of this image remains unchanged” (I’m sure there’s a better description than this in the sites owner).

Then we come to the title element (saved the best until last).

The current title element is-

CSS: how to apply mouseover styles on images in IE6 @ Locus Optimus ©2005

This part of a web page is probably the most important when it comes to gaining a pages main SERP. For this reason it is advisable to include only the main SERP IF it makes sense to searches viewing the title as part of a Search Engines Results Page (SERP.) A search on Google for “CSS: how to apply mouseover styles on images in IE6″ (not what I’d say is the main SERP, but I knew I’d find the page this way :-)) shows this-

Google SERPs Screenshot of CSS: how to apply mouseover styles on images in IE6

As you can see the title is cut off mid stream, but doesn’t hinder with understanding what the page is about, the structure (page title, Company name, copyright notice) won’t cause problems with click thrus.

The next question is does it target the main SERP(s) for this page in the best way?

For this you need to determine what the main SERPs are. Based on the pages file name ie-image-border-styles-on-hover it suggests the author believes these words are important-

IE Image Border Styles on Hover

The content suggests these words are important-

CSS IE6 image border styles on hover mouseover

Based on this information and a little research I’d advise the following title element-

CSS Solution to IE6 Image Border Hover Styles Bug

It’s a little longer than I’d like, but accessibility is a priority for this site. The above title element doesn’t take branding into account, but I very much doubt the owner of the site can afford a strong branding campaign and with a PR4 home page she really can’t afford to add the sites name and copyright notice to the title (never waste a title element). I’ve wrote a detailed article about optimizing the title element called Title Optimization.

Other general advice would be link to this page from other related pages on the site and other sites under the owners control with relevant anchor text. If you can put those links within content (contextual linking) that’s even better than having a list of links at the top/bottom of the content.