During the redesign of this site I had to take into consideration the current hot topic of web standards, accessibilty. This is where you design your site with respect to people with disabilities, such as blindness, so that it can be viewed in as many different kind of browers and screen readers as possible. There are laws, such as the Disability Discrimination Act UK and US Section 508, demanding that public bodies make their websites fit certain criteria. This makes web accessibility a valuable skill to add to your arsenal. It was also the topic of the recent Brighton & Hove web awards keynote speech by Kevin Carey, the head of HumanITy, a digital inclusion charity. The good news is that accessibility and Search Engine Optimisation (SEO) share the common traits of demanding well-writen code in line with web standards so there are also financial reasons to adopt them.

During this sites redesign one of my main goals was to fix the poor CSS layout in an attempt to help its SEO. The old fluid layout technique had demoted the middle content to the bottom of my HTML file leaving the busy left and right bars sitting in the middle of the code. Search Engine robots often give up reading a sites content after a certain amount of code and stopped before they got to the actual post. This has now been fixed and the code is semantically sound with the correct use of headers and other CSS tags (with no hacks) allowing me to post my CSS validation badge at the bottom of the sidebar. To get a better understanding of this you should view the source of this web page and you’ll be able to almost read the site yourself (in Internet Explorer go to view/source and in Firefox press CTRL-U.) If most of it makes sense to a human then it should work better on all devices.

After last Wednesday’s post on the live implementation I thought there might be nothing left to change on this site. The PHP templates were fixed, the CSS was fixed, the design had improved by a factor of 10, what else was there to do? After adjusting the rightbar adverts and the comments form I thought I had finished. It was only after I decided to check my site out with some online validation tools I realised there was a lot more to do. The goal was to get one of these:
and to do that I needed to get a pass from a range of different sources. I did well and made around 10 changes that have increased the accessibility by quite a margin. I now present a list of different validation sites, along with comments on why this site failed to pass.

Cynthia Says. My site passed the Section 508 test and only came up with a few warnings, not fails, on the WCAG tests. One problem was with the alternative text of images (the description of the image). You are meant to use an ‘alt’ tag so that people whose browsers have images disabled can still know what the image was. Blind people should also be able to read the image description, not guess what it is from the filename. I enter these descriptions when I create each post and I can often get lazy and ignore them. The recommendations are that the descriptions should be between 7 and 81 characters long and I will endeavour to include these from now on.

TAW. This validation service checks your site against WCAG 1.0 standards up to level AAA (priority three) and is the best looking of the lot. Instead of a list it actually visibly highlights problems across your web page making identification of problems much easier. KingOfMyCastle.com passes Priority 1 & 2 but falls over with only one instance of failure to comply with Priority 3. The mistake is with the search box on the right. I am advised to put some text into this box as some screen readers have difficulty when they are empty. Aesthetically, I felt this was wrong so I have left it blank.

ATRC. This checker validates your site to WCAG 2.0 Level 2 on it’s default setting. Unfortunately my site fails on only one factor, a dodgy link created by WordPress. This link has no text to actually click, which is what the validator complains about. Solving this would involve making changes to the WordPress engine itself, something I’m not about to do. Oh well, at least this isn’t my fault.

EvalAccess 2.0. Ouch! This one threw up over 250 problems and 600 warnings although Priority 1 was clean and Priority 2 had only one issue. The issue was that it didn’t ‘associate labels explicitly with their controls’ in the search area on the right. To fix this would mean putting some text next to the search button saying ‘Press this to search’ which I feel is unnecessary on a submit button. Most of the issues thrown up on Priority 3 are with Access Keys which allow the reader to move to specific links using shortcuts, rather than the mouse. A good article about access keys can be found at A List Apart and it’s well worth the read if you’d like to know more about this underused and badly supported feature.

So that’s the automated experts view on my source code but what do I think? Well, I’m upset that I can’t display the badge proudly at the bottom of this site but I’m not a government organisation which lets me off. This is just some place on the web I dump a number of links, images and articles I think people may find interesting. However, the improvments from the last design are numerous. Just try increasing the font size (CTRL scroll wheel) and you’ll see that the site doesn’t break as before. The markup is much more cleaner and I’m sure that anybody using a device other than a standard web browser will be having a much better experience than they were last week. I’ll just chalk this one up to a big experience gain on my part.