Essentially Accessibility means that as many people as possible can access your website (ideally, that means ALL).
Increasingly laws are being passed around
the world (Section 508 in the
There are many ways of categorising users, one way of looking at it is like this:
Looking at this list, you can see that an accessible page, as well as being accessible to most users is also accessible to search engines.
There are lots of things you can do to make your site accessible.
When you use images, ensure that you use alt tags – in other words a short description of the image, so that if users can’t see the image, they can gain the information from it.
NB. In the example above, you should ideally give the height and width of the image, as this allows the page to load faster.
It is particularly important that if you have a graphic of a logo of another site, or a graphic button linking to another bit of your site to have the alt text, or the user will not be able to navigate.
Use an empty alt tag
IE uses alt tags as tool tips when the mouse is held over an image.
However a study by the BBC has shown that this can confuse dyslexic users, as they think that the extra information needs to be read to understand the page. (See http://www.bbc.co.uk/commissioning/bbci/pdf/BBCi_Accessibility_Study_7-10-02.pdf)
One way of tackling this can be
The empty title tag ensures that there are no tool tips. However, I am not sure how all screen readers would handle images with alt text and title text – and which would get the priority.
If the image is providing complex, information, which is required to understand the page (e.g. a graph), then you can provide a D link. This is a link, to a page containing a text description of the image, which typically has a “d” (for description”) adjacent to the image. This should only be used when necessary.
Some images may be hard to see if the user is colour blind. There are a number of different types of colour blindness, mostly, though not exclusively, affecting males.
Vischeck provides an online service where you can check your images, to see how they would look to a colour blind person. http://www.vischeck.com/index.php
There are number of options for layout, you may be using tables or frames to get a consistent look on each page.
There are a great many issues surrounding frames, which affect a great deal of users, unless the web designer is VERY careful. I would strongly advise against the use of frames.
Table were originally designed to contain data, and therefore the older screen readers (used by those unable to see), worked on this assumption. Increasingly tables are used for layout, though this is being deprecated in favour of using CSS. You may find reference to the fact that screen readers typically read the first line in the first cell, then the first line in the second cell, so,
In a local news letter, might read:
“News For Sale Mr Smith has been appointed Chairman Fridge ..” and so on.
However, almost all screen readers can now cope with reading the contents of the first cell, and then the contents of the second. There are still some issues though.
If you are using tables therefore think of these things:
A quick test for this is to test your pages in Opera – which will allow you to turn the tables off!
· Use the TH tags to identify the row/ column contents
· Use the summary attribute to give extra information
· Use the caption tag where necessary
For more information see: http://www.webaim.org/howto/tables/
CSS are increasingly being used for layout, as well as general appearance of web pages, and in the current recommendations for HTML, tables for layout are deprecated.
The idea behind CSS is to separate the content from the appearance. (Which was the original idea behind HTML!)
There is a good section re. CSS and Accessibility on the W3C site (http://www.w3.org/TR/CSS-access) , and I would strongly recommend you learn to use CSS for both layout, as well as formatting. (More on that later)
As an example of what you can do with CSS for layout, have a look at http://www.csszengarden.com .
However you arrange your layout, make sure that it is easy to navigate – e.g have the links in a consistent location.
Right hand navigation.
Typically in the past, the navigation has been on the left. There have, however been studies that suggest right hand navigation is as fast, if not fster than left hand navigation.
For screen reader users, remember that the cells on the left (i.e. the content) will be read before the cell on the right (navigation)
For visually impaired users, who may have set the font to very large, if this means that they have to scroll sidewards, would you rather it was to read the page that they are on, or to use the navigation.
For physically disabled users, if they can use a mouse, but find it difficult, then having the vertical scroll near the navigation means less mouse movement.
For a report on a real web site with right hand navigation see:
There are a number of issues surrounding the choice of font on a web page.
By far and the best way of ensuring that you have the combination of setting your choice of font face/ size / colour for most users, but, making it easy for the user to override, is to use CSS, and to ensure that your pages are marked up correctly:
<font color="#ff0000" size=“30">Hello</font>
Using the above as inline formatting for headings will achieve the same outcome as creating an external CSS with the following contents:
then simply using the standard <h1> in your page.
There are several advantages:
To learn more about CSS there are many sites, for example http://www.w3schools.com .
As well as considering what it looks like, remember that users may read more slowly on screen than on paper.
It is generally thought that white space is good, as well as short sentences.
When you are writing, remember the audience. If you are doing community pages, you have to remember that many users may not speak and/ or read English well, so you need to use clear English.
There are a number of ways of calculating
the “readability” of a web page (other than just looking at it!), most are US based, rather than
One such tool is: (this one is actually Canadian)
When you are writing a link, try not to use “Click here”.
Ideally you should be very clear about where the users will end up, once they have clicked.
Most visual users skim a page, looking for hyperlinks. If you can’t see, you can’t do that.
Therefore a lot of screen readers can generate a list of the links in a page, so that the user can skim them in the same way as a visual user can.
The Web Development Accessories tool from
MS (linked to on http://www.microsoft.com/windows/ie/previous/webaccess/default.asp
) will let you generate lists of the links in a page.
Note: It says that this doesn’t work in IE 6, however, I have had no problems. If you also install IE 5 web accessories, it will put an image on/off toggle button on your tool bar – handy to check if alt text is there for images.
There are a number of points with regard to the use of forms, these are covered clearly on the webaim site:
The first thing to remember is don’t avoid using these! Remember that for anyone who finds reading difficult for what ever reason, is likely to find video etc easier to understand.
Most people, without disabilities would rather see something (e.g. how a car engine works) if it is easier to do visually than by text.
However, you must provide text alternatives/ closed captioning / transcripts for anyone who can’t access the multimedia based option. Remember that as well as some people, search engines can’t understand video…
There is more information on http://www.webaim.org/howto/ - as well as some links to software that you might find handy
There are a number of options for the end user, however, the more accessible you make your page in the first place, the easier it is for them to use their modifications.
The user can use View | Text size | Largest - Does this work in your site?
If not, then the user can go to Tools | Options | Accessibility, and choose to ignore your setting, and either use the default ones, or to use their own CSS.
Does your site allow the user to do this?
If the user has set fonts to a very large size in IE (and possibly over ridden your fonts), but you have a lot of forms, you will quickly discover that while the font on the page gets bigger the font that you have to enter in the box is still tiny (try it!)
If you use Opera however, there is a zoom option, which will Zoom everything … the text, the images, and the text that you put into a text entry box. (Opera isn’t without it’s critics, and if you don’t want the ads it isn’t free…)
Windows offers a number of different accessibility options – though this depends on the version of Windows, and the set up.
It is worth playing with the accessibility options – can you navigate your page without a mouse?
How easy is it to use the on screen keyboard to enter text in your site?
There is a wealth of specialist software to allow disabled users to interact with a PC – for web pages and all other software.
There is a comprehensive list at:
http://www.niad.sussex.ac.uk/ - of which some software is either free ware, or you can download demos if you want to have a go with it.
There are a lot of automated tools to assist with checking to see if your page is accessible. Probably the most well known is Bobby (http://www.cast.org.bobby ) but there are others, and they are worth looking at, especially Wave (http://www.wave.webaim.org/index.jsp ) if you are using tables for layout.
BETSIE (http://www.bbc.co.uk/education/betsie/) is a tool (perl based) developed by the BBC to help ensure that pages are accessible.
There are a number of settings that you can very easily alter in Opera, to see how your page works, see http://www.accessify.com/tutorials/checking-accessibility-with-opera.asp for more ideas.
Amaya: This is a
development browser, available from the w3c site (http://www.w3c.org)
which will let you examine the structure of your site, as well as viewing a
text only version.
Note: As this is the only browser that conforms totally to W3c standards, you may well find that your page, does not render correctly. Both Netscape and IE use code that is not fully compliant with standards, so if your page works in IE/ Netscape/ Opera, but not in Amaya, don’t get too worried.
Other tools have been mentioned at relevant points.
You will see that I have not mentioned a text only site. This is because in general this is not thought to be a good idea.
Going back to the example at the beginning of a building – we would not expect developers to build two shopping centres – one full of stairs, the other with lifts…therefore we would not expect web site developers to build two sites.
There may be a few areas where you need to duplicate the information (e.g. for videos) just as a the shopping centre has lifts and stairs to get to the upper level, buit in general, just one site!
(In any case, then you only have one to update!)
As always, there is a wealth of information on the Internet about accessibility!
As a start I would recommend:
"The power of the Web is in its
universality. Access by everyone regardless of disability is an essential
-- Tim Berners-Lee, W3C Director and inventor of the World Wide Web
This quote is frequently used with regard to accessibility, remember that a page that is accessible is generally easier to use by all users.