Web Page Accessibility

Emma Duke-Williams

What is Accessibility

Essentially Accessibility means that as many people as possible can access your website (ideally, that means ALL).

Must I make my site accessible?

Increasingly laws are being passed around the world (Section 508 in the US, the DDA in the UK), which require accessibility of information. However, in the same way as we would expect new public buildings (schools, shopping centres, etc) to be fully accessible to those who use wheelchairs, are visually impaired, pushing a baby buggy etc, no-one would expect a private house to be fully accessible (though in the UK new builds now require certain minimum door widths etc. For web pages, therefore if you are building a personal site for your family to use, you are unlikely to be sued, however, if you are building a public site, you should ensure that your pages are accessible.

What sort of disabled people are there?

There are many ways of categorising users, one way of looking at it is like this:

  • Users who cannot access text – this could be because they are visually impaired, or have dyslexia or do not speak English as a first language
    Remember that as you get older, reading becomes increasingly difficult…
  • Users who have a cognitive problem – they find reading difficult, but, in addition, cannot understand the concepts even if the text is read to them.
    In some ways, the spiders of search engines come into this category – they can make lists of words, but, the ability of computers to understand more than very basic sentences is still a long way off.
  • Users who cannot understand images. This could be due to a visual difficulty, or due to some processing problem in the brain. Search engine spiders can’t understand images either, and those on dial up may well disable images to improve browsing speed.
  • Users who cannot understand sound. This could be due to a hearing problem, a language problem (if the sound is speech), or, again a search engine spider.
  • Users who have a physical problem – and can’t use the mouse.

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.

What do I need to do about it?

There are lots of things you can do to make your site accessible.

Images.

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.

E.g.:

<img src =”rover.jpg” alt=“A picture of my dog, Rover”>

NB. In the example above, you should ideally give the height and width of the image, as this allows the page to load faster.

Images that are hyperlinks

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.

E.g.

<a href=http://bbc.co.uk/><img src =”BBCLogo.jpg” alt=”Link to the BBC site”></a>

Images that are spacers/ purely decorative

Use an empty alt tag

E.g.

<img src=”spacer.gif” alt=” “>

Internet Explorer and alt tags

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

<img src =”rover.jgp” alt =”My dog” title =” ” >

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.

Complex Images

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.

Colours of images

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

Layout

There are number of options for layout, you may be using tables or frames to get a consistent look on each page.

Frames

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.

Tables

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:

Layout tables:

  • Ensure that the contents of the table make sense if it isn’t in a table
  • Don’t use TH for visual effects
  • Use proportional, rather than absolute sizing
  • Try to keep the design relatively simple.

A quick test for this is to test your pages in Opera – which will allow you to turn the tables off!

Data tables

·        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 (Cascading Style Sheets)

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 .

General

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:

http://www.boxesandarrows.com/archives/002695.php

Text

What it looks like (font)

There are a number of issues surrounding the choice of font on a web page.

  • Face:
    Most studies would suggest that a sans serif font is easier to read than a serif font – but which one?     There are a number of fonts that are generally considered more “readable”, but, studies have shown that there is no single one. What suits one person may not suit another.
  • Size:
    Don’t make the assumption that larger text is more accessible … some users may have tunnel vision, and find scanning a large area difficult.
  • Colour of text:
    Many users find the contrast of black on white too hard to cope with, while others find light text on a dark background easier to read.

CSS

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:

h1{
            font-size: 30px;
            color: #ff0000;
}

then simply using the standard <h1> in your page.

There are several advantages:

  • Many screen readers can create lists of the structure (i.e. all the headings). Search Engine spiders also use the content of text within the<h1> tags to determine what the page is about.
    Just having the large font indicates a heading to visual browsers, but not to other users.
  • It is relatively easy for end users to override your font settings with those that suit them the best.
  • If you change your mind about the formatting of your site, then you only have to change 1 file.

To learn more about CSS there are many sites, for example http://www.w3schools.com .

The Content (what it says)

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

One such tool is: (this one is actually Canadian)

http://www.eastendliteracy.on.ca/clearlanguageanddesign/readingeffectivenesstool/

Hyperlinks

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.

Forms

There are a number of points with regard to the use of forms, these are covered clearly on the webaim site:

http://www.webaim.org/howto/forms/

Multimedia: Flash, video, audio

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

What can the user do?

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.

Browser

Internet Explorer.

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?

Opera

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…)

http://www.opera.com

Windows

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?

Specialist Software

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.

Tools

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.

Text only site

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!)

Other sources of information.

As always, there is a wealth of information on the Internet about accessibility!

As a start I would recommend:

  • http://www.w3c.org A little hard to read, but has all the current information re. HTML, XHTML, CSS, as well as specific section on accessibility)
  • http://www.webaim.org A set of resources covering making sure that your site is accessible, and links to other tools etc. One of the most useful things here are some simulations of what it is like to access the web with a screen reader.
  • SNOW http://snow.utoronto.ca/access/index.html?showaccess=1 This is particularly aimed at ensuring accessibility in the school curriculum, but has useful links and resources.
  • http://www.techdis.ac.uk Particularly aimed at technology and disability in Further and Higher Education in the UK, but, again has useful links.
  • http://www.accessify.com/default.asp Quite a new resource, but with a number of interesting resources, such as examples of accessible sites, tutorials, and a discussion board.

And finally …

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
-- 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.