Accessible websites for all

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

Why is web accessibility important?

It is estimated that 20% of web users have some form of disability. For disabled people the Internet is a truly empowering medium. It is important to understand how these disabilities affect the way they access websites. For example most disabled people use the keyboard cursor keys, not the mouse, when browsing web pages. Blind people use a special browser that reads the content of a page out loud through a speaker. Website design and content management must take account of such issues. However a report by the Disability Rights Commission last year found that over 80% of websites tested did not meet basic accessibility guidelines and therefore failed to meet the requirements of the Disability Discrimination Act (DDA).

This article explains how and why you should make your website accessible to everyone.

There is an overview of how websites work; followed by details of some of the main, non-technical, issues you need to address as routine for any website These issues are addressed in order of the content, the style and the methods of navigation used on your website After each issue we include a reference to the relevant W3C Accessibility Initiative (WAI) priorities. Note that the DDA requires that you provide a "similar quality of service" to disabled clients therefore it is important to also check the effectiveness of your site. You will find a link to the WAI website and the DDA regulations at the end of the article, but don't go there yet, as they are very technical!

Because the Internet is based upon a set of clearly defined standards it is quite possible for any properly written website to be read and understood by almost anyone browsing the Internet. By constructing a correctly coded web page it also becomes much easier for disabled people to "read" your site. Properly written websites provide a much better experience for everyone. The first part of this article looks at the solutions that do not make any changes to the way your current site looks (unless you created the site in Flash ).

A. Understand the basics

Before undertaking any corrective surgery it is a good idea to have a clear idea of how websites, and web pages, work.

A website is a collection of inter-linked documents stored on an Internet computer (web-server). Each site consists of a series of web pages (called html documents) that contain your text plus a range of browser commands (called tags) that either

Format the style of your text (bold, italic, big, small, centered, colour etc.)
Import pictures, graphics and multimedia files to the page (including logos, graphics for your navigation buttons, animations, sound files etc.)
Links the page to other pages on your site, or documents that you provide for downloading.
Give background information about the page content such as its title, keywords and content abstracts for search engines, the version of HTML code used etc.)

If any of these commands (tags) fails to work properly the basic text document will still show on the user's browser, though it will not look exactly as you intended. This is particularly relevant when the user has a poor connection to the Internet, or the particular image file has been accidentally deleted or moved.

B. Non-Technical Issues

The following issues can be addressed by anyone with a basic working knowledge of your website authoring software. It does not require any knowledge of HTML code.

1. Content first ("Content is King")

1.1. Why have a website ?

The very first question is what is your website for? What you want to say, and whom do you want to say it to? Without very clear objectives it is impossible to create an effective website.

You will have a range of target users (business, residents, parking offenders, young people, senior citizens, ethnic minorities etc.) and a range of services to offer (Grants, Training, Leisure activities, Social Welfare, Community Actions, payment of bills, local history, details of council meetings etc.). Each target user may require a separate section with information relevant to them written in a slightly different format. For example business information can be presented in a more formal style than leisure and training information aimed at young people.

(WAI 14.1, 3.2)

1.2. Content versus navigation

All websites consist of content that the user finds by using your navigation tools (buttons and links). Every page should prioritise on or other of these elements (not both). A navigation page (or series of pages) should take the user as quickly as possible to the information they require. Once the user has found the information they should not be confused by extraneous links and navigation bars but be able to concentrate on reading your message.

It is most sensible therefore to provide only highlights and helpful tips on navigation pages aimed to help the user navigate quickly. Content pages can then concentrate on the message with most links to further content available at the bottom of the page, after the user has read your content.

(WAI 14.1)

1.3. Clear content

Any website needs clear, concise, readable content. Remember that most users will be reading your text with one hand on their mouse or tab key waiting to move to another page. Most home-based users will be paying for the time spent reading your text. Attention spans are short on the web, so a newspaper style is most appropriate - especially on the first pages where you need to capture the users attention.

This means having headlines at the top, followed by more information. It means putting the conclusion first and then supporting it. It means putting things in bite-sized chunks. Once you've got the reader's attention and they want to know more you can lead them to the full report. The key thing is getting them interested enough to want to read the detail.

Remember that the two mediums (paper and Internet) are totally different. If you do "cut & paste" text from a printed document to a web-page you will need to cut it down by 75% if you want a user to read it "on-line".

(WAI - 14.1, 3.2, 12.3)

1.4. Give your users the option to download documents

If your message is complex you should only provide a brief summary on the web-page with the option to go to the full article on a "printer-friendly" page or to download the article as a document for printing out in a suitable format. The use of printer-friendly web-pages is discussed more fully in section 2.3 below.

1.5. Keep your information relevant

Make sure that you provide all the information required. If a resident wants to find out on what day the refuse department empties the dustbins s/he will be a little upset if, after reading pages on your council's environmental policy s/he is told to "ring the department for local collection times".

(WAI - 14.1)

1.6. Do not rely on pictures

Charts and diagrams are often used to help explain your content. It is important to keep these simple, clear and relevant. Deciphering a complex diagram or detailed street map on a computer screen is extremely difficult at the best of times, but if the screen is old, or the sun shining, it is impossible. Simple sketch maps are preferable to imported copies of the local AtoZ. Although it is easy for you to make a link to a street finding site like Multimap, it is very hard for your user to decipher and return to your site. When you do include diagrams etc it is vital that you do so properly. See section 2.1 below. Remember that these images only help explain your content - do not rely on them. It should still be possible to understand your message without reference to the diagram.

(WAI - 1.1, 3.1)

1.7. Provide transcripts of audio and video files

If you include video or audio clips on your website you should also include a copy of the transcript. The Internet is not really conducive to attentive listening, even if the users' speakers are working properly. A transcript can be read on-line or printed out for reference. People who do not have speakers, or have audio impairment, can still benefit if they can read the transcript.

(WAI - 1.4)

2. Appeal (Style)

2.1. Provide alternative text and dimensions for images

To make your web-pages more interesting to the reader you will frequently include pictures or diagrams. You will probably even use images to make your navigation buttons more appealing. All these images are stored as separate files on the webserver. The Internet is not 100% reliable and they may not always appear, or the user may select not to see images if s/he has a slow connection or poor eyesight. It is vital therefore that you specify both the size and description of the image as you include it on your page. By specifying the size the users' browser will reserve the correct space for the image and so keep the rest of the page formatted as you intended if the image fails to arrive.

By providing alternative text (called alt tags) you tell the user what the picture would be if they could see it. Properly written alternative text also helps people who can see the image but can't make out what it is supposed to show. Most website authoring software includes the dimensions of an image for you automatically, but asks you to complete the alternative text tag yourself. There is usually a properties window or "pallet" that opens as you insert images to allow you to do this.

Images are frequently used for navigation buttons. Providing alternative text for these allows you to be more explicit about where the button will take the user (as the mouse hovers over the image the alternative text appears in a separate box). If the image does not arrive the user is still able to navigate your site by reading these alternative text tags.

(WAI - 1.1, 3.1)

2.2. Use a style sheet

There is a golden rule amongst publishing experts not to mix fonts on a page. Mixing different fonts on a website also causes confusion to the user and prevents people with visual impairment from changing your style to one that suits them better.

Many dyslexic people find that yellow text on a blue background, or black text on a green background, is easier to read. Such users can configure their browsers to convert your formatting by using a special style sheet. But this only works if you have not set font properties within the body of your text. In fact the font command in html is no longer recommended for use in web-pages.

Standard html includes a range of predefined styles that you can use in the body of your page. These styles (Body, Paragraph, Headings 1 to 6, Unordered List, Ordered List etc.) can easily be modified by you through your own style sheet. You can then use this style consistently on all the pages on your site, or you can even have different style sheets for different sections.

Most modern authoring software will create style sheets for you automatically. Some programmes need you to create an empty text file called a css file (use windows notepad to create a new file and save it, without any content, calling it something.css, where something is an easy name for you to remember). Each page is then "linked" by the software to this style sheet so that whenever you use a set format from your software the words will appear in the font and colour you desire. Although this sounds like a lot of hard work initially it will save you considerable time later and makes your web-page much simpler and faster to load as well as ensuring that you maintain a consistent style.

Effective style sheets are one of the keys to accessibility as they remove all the styling commands from the basic html page. This keeps the basic page simple and easy for assistive software to interpret properly. An added bonus is that you can have different style sheets for different media (screen, print, audio etc.)

(WAI 3.3, 3.5, 11.1, 11.2)

2.3. Printer-friendly pages

If the information on your website is really useful, it is likely that your user will want to print out the page for reference, or to pass on to someone. The introduction of computers has increased the use of paper not reduced it! "Printer friendly" pages are the closest thing a website gets to a published document.

Producing "printer-friendly" pages is not hard if it is done as the site is built, remember that most of your site starts off as printed documents! So why not start by converting all these documents into a series of printer-friendly pages with minimal links at the top of the page (don't forget to put more links at the bottom of the page too). The web-designer can then work from these pages to create your multimedia website with all the stylistic additions you want; leaving a sound foundation of printer-friendly pages for users that want paper versions of your content. Your webdesigner will use two separate style sheets, one for printing and one for screen viewing. As s/he adds effects that are for screen use only s/he will use a class within the print style sheet to hide the element from the printer. If you are reading this on a computer screen now click on the File menu (top left corner) and select the "Print Preview" option. You will see that all the navigation buttons and banners have been hidden and a new logo inserted at the top of the page. This is all managed by the style sheets (see above).

If you do not use a print media style sheet you must remember that as new content is added it must be put into a simple printer-friendly template first and then copied over to more complex, stylistic templates if required.

(WAI 6.3, 11.4)

2.4. Avoid frames

Frames work by loading a main page (main_frame) first, which then loads a series of sub-pages (sub-frames). Individual frames can be scrolled (moved up, or across, the screen) independently. There are very few occasions where this technique is useful, and, as it is a very unreliable method of presenting web-pages, it should be avoided if at all possible. If you must use frames then ensure that you have a no-frames version available and properly linked.

(WAI 12.1, 12.2)

2.5. Colour contrast

The contrast of colour between the text and the background of your page is important. Remember that most users will not have the most recent high definition screen. If in doubt about the colours to use it is best to stick to black text on a white background as set in your style sheet.

Be careful not to use colour as an important element on your pages. Asking many users to look at the "green" section, or press the "yellow" button is like asking them to watch snooker on a black and white TV set. If the user's monitor is old, or the sun is shinning, they will not be able to tell which colour is which. Use shapes or locations for direction instead of colour.

It is also wise to avoid flickering or scrolling text as these merely distract the user from the rest of your message. Flickering images and text are distracting for all users, but can have serious effects upon people who suffer from epilepsy. Scrolling "ticker tape" boxes also cause annoyance as the user has to wait for the text to scroll as they read. People read at different speeds so that most users would find that your pre-set rate was either too slow or too fast.

Discussions about the precise shade of colour in a picture or logo are fruitless. You have no control over the quality of the end-user's monitor, and printouts from the screen will be mostly in black and white. Save yourself many hours "in committee" by sticking to the "web-safe" colours provided by your authoring software.

(WAI - 2.1, 2.2, 7.1, 7.2)

2.6. Check your site

Finally check that the site really does look how you expect it to. Ask someone else to have a look too! Style is a very personal thing and no two people are ever going to agree totally on what is best. Your target should be that everyone feels that the site is clear, intelligible and easy to use. By involving non-technical staff in this testing process you will get useful feedback as to how it will perform in the real world, you will also help engender a feeling of ownership within the council!

3. Navigation

3.1. Site Index

A site index is absolutely vital to any websites with more than a dozen or so pages.

A website is not like a book where you can stick a piece of paper between pages whilst you look up a reference in the index. It is extremely easy to get lost in a large website and never be able to find the original information again without pressing the browser "back" button many, many times.

A site index, listing all relevant keywords in alphabetic order provides, in one place, not just the links, but also suggestive keywords that help the user select the correct page. A "free text" search tool can be useful, but it should not replace the need for an index.

Many users will not use the same terminology as you, for example are refuse collectors "binmen", "dustmen", "waste collectors", domestic refuse" etc?, in addition the user's spelling may not be quite correct, all of which makes search tools very frustrating for many users.

A list of keywords is much more intuitive than a search tool, as the user only has to select the "nearest fit" to their personal target.

(WAI 13.3)

3.2. Consistent navigation

Navigation toolbars should be consistent and relevant. This means that they should always be in the same area of the page, and only contain links that the user might find useful at that particular point of the site.

Once the user has "learnt" your particular style of navigation from the front pages the site becomes easier to use and they are free to concentrate upon your content. If you suddenly introduce a new method of navigation the user will spend more time working out how to move on than reading your content.

Pages that contain more than one screen-full of text should have the absolute minimum number of navigation buttons at the top. Most navigation buttons should be at the bottom of the page ready for the user when s/he has finished reading your article. These links should also be relevant to the section of the site the user is in. If the user wishes to go to a different topic or department they will ether return to the home page or site index (links at top and bottom) to start afresh.

(WAI 13.4)

3.3. Links to external files

Links to PDF files and other non-html files should be clearly marked as such. The user expects all links to go to other web-pages. If the link suddenly opens up a new application such as Adobe Acrobat or Outlook they will get a surprise (also the browser might freeze up). It is important that you warn users if a link is not to another webpage. If you make PDF files available then include a link to the free download of the reader, if the link is a video then provide a link to RealPlayer download etc.

(WAI 13.1)

4. Conclusion

This article is based upon our audit team's experience and only covers the most frequent issues that we come across. Our overall conclusion is that most websites work best when they are kept simple, stick to standard html code, and are tested by "real" users prior to publication. Most problems occur when website publishers try to stretch the technology and forget the fundamental principles of the Internet.

Userite can prepare individual Accessibility and Usability reports for your website during development or when published. Reports are written in Plain English with helpful tips and suggestions regarding each issue identified as a potential problem.
Click here for a free quotation for a report on your website

The link to WAI website is - http://www.w3.org/WAI/

The DDA regulations can be found at - http://www.disability.gov.uk/

Userite can prepare you an individual Accessibility and Usability report for your website during development or when published. Reports are written in Plain English with helpful tips and suggestions regarding each issue identified as a potential problem.