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:
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.
Comments