best practices – rocioalvarado.ca

Designing a website: Top 15 things to consider for web accessibility

Published 17 March 2011 by Rocío

Here are the main things to think about when designing a website:

Maintain a design and layout consistency throughout the site,
Avoid clutter,
Include written transcript for any audio and visual media,
Avoid multiple level menus. Do not have more than two levels,
Include a sitemap when your site has embed pages,
Avoid making the width of content too large,
Any one link should have the same title,
Make the titles of the pages clear,
Content must be simple and to the point (Especially if your target audience is broad.),
Do not add default value in form fields,
Make sure that the colours of the background and foreground are well contrasted,
Have a decent font-size. (14px is good.),
Avoid images with text on them,
Don’t use “Read more” links, instead use “Read more about THE TITLE OF THE PAGE”,
All links in the content should be underlined.

Maintain a design and layout consistency throughout the site

I have rarely seen an effective switch in design or layout within the same site. If it is absolutely required, make all changed subtle. Having differences in webpages of one site can be confusing and frustrating for a visually-impaired person and even for a new visitor. A visually-impaired person often uses a screen reader to read the content of the site to them. If within the same site the structure of the site changes from one page to the other, it can be disorienting. The norm is to maintain the same look and feel throughout a site, your new visitor might feel lost when jumping to another page with a completely different look.

Avoid clutter

Keep the layout as clear as possible. This makes it easier for the visitor to find the destination they are looking for.

Include written transcript for any audio and visual media

It’s fair to say that this demand is not obvious to produce. But it’s not fair to those who do not possess all senses. Food for thought!

Avoid multiple level menus. Do not have more than two levels

Not only do multiple level menus often not work properly in different browser, especially older ones, but they are very hard to navigate by keyboard only. Next time you see a multiple level menu try going through the menu by click on the tab key on your keyboard. You’ll see, it won’t be easy to get to the third level or even the second level.

Include a sitemap when your site has embed pages

If your site does have many sub-pages within a page, make it easier for your visitor to get to those pages through a complete sitemap.

Avoid making the width of content too large

When the width of a paragraph is too long, it is often harder on the eyes. The reader gets tired more quickly. Those affected may include people with learning disabilities, newbies, but even people with no known deficiencies.

Any one link should have the same title

You should avoid having the same link with different titles. For example, the link to the contact page with the title “Contact us” should not named “Reach us” elsewhere. We want to avoid any type of confusion that the visitor may encounter.

Make the titles of the pages clear

Be as accurate as possible when naming your pages. Think that you will be using these titles as your page’s main heading.

Content must be simple and to the point

Do not be verbose. Use lists whenever possible. Keep your sentences short. Use words effeciently. Read the W3C Writing Style section.

Do not add a default value in the text input field

The label of the text input field should be enough as to determine the desired input.

Make sure that the colours of the background and foreground are well contrasted

Colour contrast can be measured with applications like the Contrast Analyser by The Paciello Group. Download the application, install it and with the pipette determine if your chosen background and foreground colours satisfy the required contrast ratio.

Have a decent font-size

Make it as easy as possible to read your content. For a font like Arial, use a font-size of 14px.

Avoid images with text on them

If you must have text in your images, make sure to describe the image in the alt attribut.

Don’t use “Read more” links

Instead of linking to your full page with the very commun “Read more” link or the like add the title of what you are linking to. So if the title of the page the link is directing to is called “The Greatest Article Ever” have your link be “Read more about The Greatest Article Ever”. It might be redundant for sighted people, but when you consider that these links might be read out of context by screen reader, then it makes sense.

All links in the content should be underlined

In terms of usability, we want to inform the visitor when a textual information is linked to another page. Making the link a different colour may be indistinguishable to visitors with color blindness.

Many of these points have other implications when implemented in practice. We’ll leave those for another post.

One Comment

Getting Lists right

Published 23 December 2009 by Rocío

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

Published 27 September 2009 by Rocío

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.

4 Comments

Evaluating a website for accessibility

Published 15 June 2009 by Rocío

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!

One Comment

Case Study

Published 13 June 2009 by Rocío

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.

No Canadian Section 508

Published 25 May 2009 by Rocío

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.

Tag: best practices