Skip to content →

Case Study

So I recently re-did one of my old websites. My client wanted to had some images so I took the opportunity to give her an accessible site. I had done this site a few years ago. I wasn’t aware back then of web standards and web accessibility. I must confess of using tables for layout. But alas, I have done right by this website. I gutted it and made it new again. Although you can’t really see the difference between before and after! Let me show you what I mean:

Contact page before
Contact page before
Contact page after
Contact page after

They don’t look different, but I did change the code.

Here’s what I did:

  • I started by getting rid of the tables for layout purposes. I know!!! It’s all gone now.
  • Then I added the language to the html tag, lang=”en-US”, like this <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
  • I gave a more complete title to each page, like “Nadia Stevens Jin Shin Do Bodymind Acupressure Montreal”.
  • I repositionned some divs and wrapped them properly. Some classes and ids were not correctly placed, so I had to fix these. For instance, I had the same id used several times in the same file, so I changed these to classes.
  • Some images had misleading or inaccurate alternative text. Instead of “Fire” as the alt attribute for a chinese character representing fire, I wrote “Fire character”. In the instance where I had images that were not content related I made them blank text, like this: alt=””.
  • I got rid of widths and height attributes.
  • The menu of the page was not in a list, so a placed it in an unordered list.
  • For the maps, I added an onfocus attribute to every onmouseover attribute  and I added an onblur attribute to every onmouseout attribute.

The first page took me about 3 hours, additional pages took me 1 hour to 2 hours to renovate in the same way.

Ok so this site was easy to do because I had already a lot of div’s in the first place, but it really gave me an idea of how many things need to be thought of while in the process of revamping a site. This work is meticulous and a little repetitive, but if done with methodology, making any site accessible can be pretty painless.

Published in Reviews

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *