Page 1 | 2 | 3 | 4 | 5 | 6

Introduction: Accessibility
People browsing your web page have different abilities. These can include having impaired vision, photosensitive epilepsy, red / green colour blindness, and changing abilities due to nothing other than ageing. In fact, one in twenty people have some sort of vision problem. Some people will access your site with speech synthesizers, text readers or won't be able to browse horizontally, i.e. move the scroll bar from left to right.

When designing a web page you should aim to build it so the content is accessible to the broadest range of people. In this article we will look at a number of ways you can write your underlying code to make it more accessible for people with different abilities.

Relative Sizes
When you use relative sizes rather than fixed sizing in your code it gives your users more control over how they see your content. If you use fixed sizing you can limit access. This is particularly true with font sizes.

If you define your font sizes in pixels then anyone using Internet Explorer will not be able to resize the text on the screen by using the text size from the View menu. Consider the following examples. In the first example the text is defined in pixels.

The controls below simulate the effect of using the text size menu in your browser to increase or decrease the text size. Choose either to see the effect on the text above.

+ increase text size | - decrease text size

With a visual impairment a user might not be able to read the content on your site if they can't resize the text. Everyone, irrespective of their physical condition, should be able to access your content. Use relative font sizes to accomplish this, do not define your text size in pixels.

You could use the following intervals in your CSS style sheets to define your text sizes to ensure browsers are able to resize the default font size you use.

In your CSS the font size would be written as follows, where you want to set a default size for most of your page elements.

Using relative sizing in your font size definitions is the single most important attribute you can add to your site to improve its accessibility.

The "alt" Attribute
Whenever you include an image on your web site you should include an alternative text for the image for people who are browsing with image display switched off or are using another device to access your page such as a text reader. To validate your page in XHTML you must provide alternative text.

If the image you are using conveys additional, important information you should also include the "longdesc" attribute to describe that information so it is available to text readers. Lets look at an example.

The image on the left conveys a lot of information a user might miss if they didn't have display images switched on or were viewing the page with something other than a computer. The image indicates top level domains, including .com. .co.uk, .org and .net are on sale from £5. Now hover your mouse over the image.

The "alt" attribute is displayed so if images are switched off a user will still get the right message. The code looks like this where your image is located in "images/domains.jpg" in your site directory.

Using CSS and the div tag to control display
Not everyone is able to browse horizontally, i.e. move the scroll bars left to right, so when you use a div or table to control your page layout you should use relative sizing so people can access your content without having to scroll from left to right.

You should use CSS and divs to control layout rather than tables. Tables are easy to manipulate but they should be used to display data rather than content. A typical page design uses a three column table, but this can be easily replicated without using tables. Lets look at how.

The example below uses a table to display content.

Now we can replicate this design using a div as per below

In table design we would have used colspan or rowspan to merge cells together to, for instance, create a header or footer in our page design. Again this can be easily accomplished with CSS and the div tag.

Lets look at the code. We'll define six div tags in our style container. Click view at the bottom of this form to see the result. This page is built using divs rather than tables to control the layout. In addition the div tags are sized in relative terms to improve accessibility and the page validates as XHTML.

Once you've opened the page resize it to see the changes. Unlike fixed width definitions the divs will resize along with the browser window.

Checkpoint 5.3 of the World Wide Web Consortiums web accessibility guidelines says

By using the div tag rather than a table we are improving the accessibility and structure of our web site. To see an example of using this structure where we have added a splash of color, some graphics and formatted the text please click this link Click here to open the example.

The Title Attribute
Did you ever click a link on a website only to have your screen freeze up as you wait, very annoyed, for Adobe Acrobat to finish loading? You were given no indication a different file type was going to be opened. When this happens to me I either click the back button or close the window. I don't care what the content is on the page. If I had some warning or alert beforehand then I might be more patient.

Including the unexpected in your web design is not a good idea. People like to do things at their own pace. If the page suddenly reloads or content switches some users may not be ready. Remember your page will be read by slow readers and people with learning or cognitive difficulties. Not everyone is at the same performance level as you.

The title attribute can be used almost anywhere to give users more information about what's going to happen. Lets look at some examples. Move your mouse over the form button below.

The value of the title attribute is displayed, in a similar way to a tooltip. The user knows exactly what's going to happen i.e. "When you click submit a new page will be opened in your browser". Lets look at another example. Consider these text links, both of which look identical. Move your mouse over each to see the difference. In the latter example a tooltip is displayed advising your visitor that a new page will be opened.

This is a text link
This is a text link

The code is very simple, you just add the title attribute.

Acronyms and Abbreviations
Acronyms and abbreviations may not be understood by your visitors. Use the <acronym> and <abbr> tags to explain what they are. You can also add individual styling to these elements to indicate to users an explanation is provided when they focus on the acronym or move their mouse over it. Move your mouse over the following acronym CSS. You will notice two things

1. The acronym is defined
2. The acronym has special styling to alert the user

Here is the code

And the styling

Next Article
In this series of articles we've covered the basics of building a website in valid XHTML and explored accessibility so that the site can be used by the broadest range of users. In the continuing articles we will look at more specifics such as CSS menus, forms and a more detailed study of CSS. In the next major series we will look at web site content and how you can improve it to drive traffic to your site. Remember, in the internet, content is king.

Until then.............

Mark O'Connor 22nd May, 2006

Page 1 | 2 | 3 | 4 | 5 | 6