Thinking Accessible » best practices

Getting Lists right

Rocío — Wed, 23 Dec 2009 13:29:27 +0000

Lists can be tricky, but as long as you keep a consistent structure and the correct sequence, lists are a piece of cake.

Here are the basics to remember:

Make your menus into unordered lists,
Place the list inside a div,
Have an H2 header with menu title (hide it if not need to be visible),
The ul has no left indentation (for browser compatibility),
Use display:inline for horizontal lists,
Breadcrumbs use nested lists,
Be diligent.

To read more about lists: CSS Design: Taming Lists

Pretty and accessible design

Rocío — Sun, 27 Sep 2009 15:42:41 +0000

It is more and more apparent that accessibility can be beautiful. I came across Accessibility in Focus, a website for an accessible web award.

There was 4 finalist, one of them was the Salford City Council. A fairly large website. Its navigation is straightforward even if at first glance the site looks overwhelming. This site is proof that the size of a website is no excuse for accessibility.

The interactive award winner uses Flash. Although Orange Project conforms to the lowest priority level of the W3C WAI standards, I still think that Flash has a long way to go. While considering the site’s probable target audience, the design is a very successful one.

Evaluating a website for accessibility

Rocío — Mon, 15 Jun 2009 21:08:47 +0000

The W3C has extensive information on how to properly evaluation a sites accessibility. Here are the underlining steps to ensure that your evaluation is full-proof:

For a preliminary review, select a page that is representative of the whole site or that most people will see. Try to choose a page that has tabular data, images and scripts. And then:

Examine this page for alternative text,
Divs instead of tables for page layout,
Use the keyboard instead of the mouse for navigation,
Test with different font-sizes and screen resolutions.

The Firebug and Web Developer extensions in Firefox will make your life easier in accessing the code and disabling images and even resizing your browser size. It might be a good idea to try a screen reader, and not to mention an Web accessibility evaluation tool like AChecker. These will enhance your understanding of the sites limitations and successes.

Another important part of evaluating a site is to get people with disabilities involved in the process. Some may have insights that other users will not.

For a complete procedure of website evaluation you have to go to the W3C – Web Accessibility Initiative page.

Although a little outdated, the WAI also provides a comprehensive checklist of accessibility guidelines (WCAG 1.0) and an useful template for the final accessibility report. They really thought of everything!

Case Study

Rocío — Sat, 13 Jun 2009 16:05:48 +0000

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

No Canadian Section 508

Rocío — Mon, 25 May 2009 12:31:37 +0000

Ok so Canada does not have the national equivalent to the United States section 508. But if you want to know what they recommend you can read their Common Look and Feel standards for the Internet documentation. Obviously the information is for government and public sector websites, but it could be useful to get another perspective on standards and accessibility. It basically lists out the main things we need to remember for guidelines and best practices.