Accessible library websites: design for all

Written by Prof. Peter Brophy and Jenny Craven

Contents: Chapter 14

Skip to Navigation

14.1

What is 'Design for all'?

14.2

Accessible web page design techniques

   14.2.1

International standards

   14.2.2

Content and structure

   14.2.3

Layout

   14.2.4

Use of site maps

   14.2.5

Use of the ALT tag for images

   14.2.6

Provision of hypertext links

   14.2.7

Colours and background

   14.2.8

Fonts

   14.2.9

Use of tables

   14.2.10

Use of frames

   14.2.11

Online forms

   14.2.12

Refresh screens

   14.2.13

Audio

   14.2.14

Interactive elements

   14.2.15

Text alternative pages

   14.2.16

Provision of a contact name or email

   14.2.17

Testing of sites for accessibility

14.3

Accessibility evaluation programs

   14.3.1

World Wide Web Consortium guides

   14.3.2

Bobby

   14.3.3

Lynx View

   14.3.4

Web authoring and validation services

14.4

Examples of accessible websites

   14.4.1

RNIB

   14.4.2

NLB

   14.4.3

Standard Life Investments

   14.4.4

UK Online

   14.4.5

Public library authorities

   14.4.6

University library websites

14.5

Portability research

 

References

 

Useful URLs


14.1

What is 'Design for all'?

Basically it means that library IT systems and interfaces are designed in a way that can be easily read by all users of the library, be they physically visiting the library itself or accessing it remotely and regardless of any disability or access preference they may have. The RNIB describes design for all in relation to websites as “a single version of the website which is accessible to everyone, however they access the Internet” (RNIB, 2002).

Access to library and information resources for people with a visual impairment has been recognised in recent years as a key issue which must be tackled if social inclusion is to become a reality. At the Centre for Research in Library and Information Management (CERLIM) a programme of research into accessibility for people with visually-impairments has been established, and the Resource funded NoVA (Non-Visual Access to the Digital Library) project (see Useful URLs) has investigated the differences between sighted and visually-impaired users’ methods of accessing electronic information resources at a very detailed (mouse click and equivalent) level. The project is due to end in June 2002. A final report will be made available, the results of which will be of interest to designers of all kinds of electronic library services.

If Design for All principles are implemented across all library IT systems, including their websites, all users will be provided with an equitable level of access to information and services. Access to information can be defined in more than one way: firstly through the use of access technology; secondly through adopting good practice methods in interface design. Both are of equal importance: provision of assistive equipment (adaptive, enabling or access technology, see Chapter 13) will enable a visually impaired user to access on-screen information, ideally in a way that is most appropriate to their needs. However in addition to this, the information provided on screen must be designed in a way that can be interpreted by the access technology.

This chapter will consider the provision of accessible websites and provide advice on adopting accessible design techniques. Website addresses or URLs (Uniform Resource Locators) for websites mentioned have been listed at the end of this chapter under Useful URLs.

Back to Chapter index

14.2

Accessible web page design techniques

Awareness of the importance of creating accessible web pages has grown considerably over the last few years. Much advice and help is offered via books, articles, links to resources, charged services and courses. Guidelines have recently been developed for all government websites, and these include accessibility issues. This section will focus on recommendations adapted from the 20 Golden Rules for Web Page Design (Brophy and Craven, 1999) which modelled its framework on a number of documents available on this subject and with particular reference to the World Wide Web Consortium (W3C) and its Web Accessibility Initiative (WAI).

Back to Chapter index

14.2.1

International standards

Adhere to the official W3C HTML specifications: in 1997 the W3C launched the WAI which is funded jointly by industry and government bodies world-wide. The main focus of the WAI is to ensure the World Wide Web is made accessible to all people, with particular reference to people with disabilities. As a result of the WAI the W3C has produced the Web content accessibility guidelines (World Wide Web Consortium, 1999) which explain how to make web content accessible to people with disabilities. In fact, adherence to these principles of good design will make web pages more accessible for everyone. The guidelines are a very comprehensive guide to most aspects of accessible web design. In order to provide a more manageable set of recommendations the W3C has also produced a condensed checklist for producing accessible websites, which can be downloaded or ordered in a credit card size from its website.

Back to Chapter index

14.2.2

Content and structure

Maintain a clear distinction between content and structure, such that a user is able to access content without an imposed structure. W3C refers to this as ‘graceful transformation’, and emphases the need to ensure that pages can be read on a wide variety of hardware e.g. devices without mice, or using large font sizes, and are compatible with a variety of web browsers, including text only browsers such as Lynx. The use of Cascading Style Sheets (CSS) represents good practice in separating content from display structure.

The development and increasingly widespread deployment of XML will greatly enhance opportunities to restructure output by interpreting tagged content according to agreed Data Type Definitions (DTDs) thus enabling the client system to determine presentation according to personal preferences.

Back to Chapter index

14.2.3

Layout

Keep the layout of all pages as simple as possible and maintain consistency throughout the site, with particular attention paid to the order in which elements occur. Visually impaired users can then learn the layout from one page and apply it to subsequent pages. Similarly, keep the navigation structure simple, clear and consistent. However, it is important not to confuse simple with boring - developments in technology allow most advanced technology features to be incorporated into a page without compromising its accessibility.

As well as being consistent, the layout of the site needs to be relatively easy to navigate so that users do not have to click through a large number of links in order to get to the desired page. This is often referred to as the 'three click rule': which means that any page within a site should be no more than three clicks from the home page. However, the three click rule can be problematic when trying to navigate through a large site with many levels. It has also been found (Brazier and Jennings, 1999) that blind and visually impaired users find it difficult to scan a page that contains a large number of links as this can be a time consuming process. In cases where the three click rule is not practical it is better to use a larger number of pages containing less links, and to place more emphasis on ensuring clarity and consistency of layout and navigational links.

It is also helpful to provide a link back to the front or home page on all pages of the website. A user who becomes lost in the site then has a straightforward way back and can start again.

Back to Chapter index

14.2.4

Use of site maps

Offer a text index or site map with links so that users can navigate directly to pages rather than having to work through the whole site. This helps overcome problems of navigating through a large site, as mentioned in 14.2.3.

Back to Chapter index

14.2.5

Use of the ALT tag for images

Fully describe all images, video clips, audio files, etc. (using the alternative text ’ALT’ tag in the HTML code). This is especially important where a ‘clickable image’ is provided for the sighted user to select an area and establish a link by a mouse click - visually impaired users should be able to access an equivalent text list. Where the non-textual element needs an additional description to just one or two words then either a ‘d’ link should be placed next to the element, linking to a more detailed description, or the ‘LONGDESC’ tag should be used, for example to explain a video clip.

Try to provide a text alternative for all Java and JavaScript, and avoid their use for effects (like scrolling text) which can be difficult for partially-sighted users to access. (See also section 14.2.14).

Where images are used simply for ‘decorative’ purposes, rather than to provide information, use a null ALT tag (ALT= “”) which will enable the browser to skip the image. For example, this is useful when lines are used to split the screen: a visually impaired user does not need to hear a description of layout that has been placed between text.

Back to Chapter index

14.2.6

Provision of hypertext links

Provide a description of all links (using the ALT tag as described in 14.2.5) and if possible separate links by some non-link text. Place links one to a line and label them clearly. Avoid using 'click here' to indicate a link as users need to know where they will be taken to, so for example the ALT text for a link could read 'information on x', or 'link to y'. Use of an informative link 'TITLE' added to the HTML will also help clarify the nature of the information.

Back to Chapter index

14.2.7

Colours and background

Only use contrasting colours for text and background. Some users find it difficult to differentiate between certain colours; red and green for example usually appearing as a neutral shade such as grey when viewed by someone who is colour blind. Using two colours with a similar hue will be hard for some to read and also will fail to provide adequate contrast for anyone using a monochrome display. Colour combinations that may reduce clarity include pink and dark green, red and purple, yellow and white/light grey, lavender and pink. Always avoid using different shades of the same colour, such as dark orange text on a light orange background.

As a general rule, black and any light colour or white and any dark colour are a good contrasting combination. It is important to always ensure that colour schemes can be over-ridden by the browser settings. This is because users will have different preferences for colour settings depending on their level and type of sight loss. For example some people find it easier to read white text with a black background, i.e. in reverse, this way individuals can adjust the page where necessary. "Wallpaper" (i.e. a decorative background), shadowing and watermark images should also be avoided or used with special care as they mask content for partially-sighted readers.

Back to Chapter index

14.2.8

Fonts

Use a sans serif font where one is specified unless there are good reasons not to do so. The RNIB simply recommends that it is best to avoid fonts which are “obviously bizarre or indistinct.” (RNIB Clearprint guidelines). This view is mirrored by the NLB who state that “fancy fonts which are difficult to read (and) should be best avoided” (NLB Web accessibility guidelines).

Use a medium size font for the page. Text should be not less than 14 points in size, but as individual font size requirements are difficult to define it is best to allow users to adjust the size using the browser settings to suit their needs. It is best to set the font size to a percentage of the default font size as this will ensure the text adjusts according to the users preferences but still remain readable. Underlining of text should be avoided, as this can prove difficult to read, as is prolific use of capitalisation: bold is to be preferred to italics where emphasis is needed. If italics are to be used, check the font with care as some fonts which are eminently readable in clear text are difficult in their italic versions.

Back to Chapter index

14.2.9

Use of tables

Use tables with care and do not over-elaborate them. Try to avoid the use of tables to control displayed format. Where tables are used to display data (such as a list of services provided), care should be taken to provide appropriate headings in the HTML to describe each cell.

Back to Chapter index

14.2.10

Use of frames

Where pages use frames the home page should offer a NO-FRAMES alternative, which is applied consistently throughout the site with links to frames-free versions of the pages. It is also desirable to provide links from the home page or text index to each frame and to ensure each frame has a TITLE in the HTML. Frame titles should be brief but informative. For example, titles for a page with two frames could be: ‘Navigational frame’ and ‘Contents frame’.

Back to Chapter index

14.2.11

Online forms

Online forms should be designed in a way that enables them to be read by a screen reader. All fields should follow a logical order and appropriate HTML tags applied throughout.

Back to Chapter index

 

14.2.12

Refresh screens

Avoid automatic refresh or 'splash screens' (which some designers use to send users to a new page automatically after a predetermined time). With a typical refresh time of 5 to 10 seconds, refresh usually happens before a screen reader has had chance to read the first page!

Back to Chapter index

14.2.13

Audio

Avoid the use of audio alone for significant information content. A mixture of audio and text should be used with the appropriate text alternative descriptions (either the ‘ALT’, ‘d’ link or ‘LONGDESC’ attribute) as described in 14.2.5.

Back to Chapter index

14.2.14

Interactive elements

Always provide a text alternative for interactive elements. Interactive elements include Plug-ins and Java programmes and cannot always be interpreted by assistive technology. A text alternative could be a short ALT text tag or a more descriptive ‘d’ link or LONGDESC tag.

Back to Chapter index

14.2.15

Text alternative pages

If text alternative pages are used it is essential that they are updated at the same time as the non-text pages. There are occasions when such pages are necessary and appropriate, but they should not be allowed to become neglected and out-of-date. It is worth considering using something like BETSIE, produced in collaboration with the RNIB and BBC Online, which reformat pages into a text only version in real time, but this should not be used to simply avoid making the main site accessible.

Current recommendations from the RNIB however, promote the design of websites that are based on universal design. This refers to the creation of one site, which through the use of alternative delivery methods is made accessible to all. Alternative delivery methods could include a text alternative tag in the HTML to describe a graphic or an audio description (ie. for deaf person), again as described above.

Back to Chapter index

14.2.16

Provision of a contact name or email

Provide an email address on each page, or at least on the home page, so that users can send queries if there is something they cannot read or need explained. More generally, make the site hospitable to comments on accessibility and ensure the comments are considered!

Back to Chapter index

14.2.17

Testing of sites for accessibility

Test all pages for accessibility before they are launched, using a tool like ‘Bobby’ (see section 14.3.2) and also the users themselves who may pick up on problems which checking tools have overlooked. For example, Bobby is unable to check web pages for contrasting colours or font styles.

Back to Chapter index

 

14.3

Accessibility evaluation programs

The choice and variety of accessibility evaluation aids is an ever increasing one. Numerous articles have been written on the subject and a quick search on the Internet for ‘accessible web design’ will produce a huge amount of information and advice. This is undoubtedly a positive move towards informing web designers of the potential problems that may arise through inaccessible design practices and also providing solutions to the problems, such as those highlighted in 14.2. To avoid information overload in this area it may be useful to concentrate on just a few key resources and programs available, usually free of charge, which can be used to quickly and easily check the accessibility of web pages. The main resources and programs outlined in this section are guidelines produced by the W3C, Bobby, Lynx View, and a selection of web authoring and HTML validation services.

Back to Chapter index

14.3.1

World Wide Web Consortium guides

The W3C has produced a set of guidelines for Evaluating web sites for accessibility (World Wide Web Consortium, 2001). The guidelines explain how to do an initial evaluation of a site and then move on to more in-depth evaluation of web site accessibility. They have also produced a guide to HTML Techniques for Web Content Accessibility (World Wide Web Consortium, 2000) which includes examples of how to apply tags (such as the ALT tag) to your HTML document.

Back to Chapter index

 

14.3.2

Bobby

The Bobby Web Accessibility Checker was developed by the Center for Applied Technology (CAST). Bobby is used to check websites against a standard accessibility check-list developed by CAST, and is a widely recognised technique.

The software will analyse individual pages of a website and produce a textual report, which identifies whether there are any accessibility errors. These are given priority ratings that are in accordance with the Web Accessibility Initiative guidelines. The Bobby Approval rating is equal to Conformance Level A for the Web Content Guidelines and a website can only be awarded the Bobby Approved Logo if all its web pages have no priority 1 errors. A priority 1 rating indicates problems that seriously affect the page's usability and are depicted graphically as a policeman's hat with a wheelchair. A policeman's hat with a question mark on it indicates that there may be a priority 1 error that can only be checked manually, not by Bobby itself.

There are two more priority levels Bobby uses to identify problems. Priority 2 indicates problems, which should be fixed if possible and priority 3 indicates problems that should, if possible, be taken into consideration. Both levels usually recommend manual checking on certain items. Web pages that pass all items under priority 2 are equal to Conformance Level AA for the Web Content Guidelines and under priority 3 are equal to Conformance Level AAA.

Other issues that Bobby takes into consideration are browser compatibility and download time, both of which can impact on the accessibility of the site.

Bobby reports can be difficult to read, particularly for anyone unused to HTML terminology, and despite guidelines on how to read the Bobby reports it can still be hard to decipher which error refers to which HTML string. One recommendation is, in the initial stages, to concentrate on the priority 1 errors only and ensure they are fixed.

It is also worth bearing in mind that Bobby cannot guarantee total accessibility. It sometimes picks up errors that in reality are not too problematic or misses errors such as inadequate alternative text or poorly contrasting colours. As a starting point Bobby is an extremely useful tool, but for best results it should always be used in conjunction with other checking methods.

Back to Chapter index

14.3.3

Lynx View

Lynx View will display the page as text only, as it would appear to a text browser such as Lynx, indicating how a screen reader may interpret the page. Viewing a page through Lynx View will identify any images for which ALT text has not been applied and will also show whether the page layout is in a clear and logical order, whether links are separated clearly and how tidily the HTML has been applied.

Back to Chapter index

14.3.4

Web authoring and validation services

Many web authoring tools now include accessibility ‘prompts’ for the author. Microsoft FrontPage, for example, allows authors to include accessibility features to the main interface and provides software to verify pages for W3C priority one accessibility checks. SoftQuad International have produced the AdaptAbility Toolkit which includes an automatic prompt which suggests adding certain features which will make a page more accessible (Murtha, 1997) and Macromedia now provide ‘Accessibility Kits’ for their Flash and Dreamweaver software. Other web content developers are beginning to take accessibility issues into account. For example, creators of e-learning software packages such as Blackboard and WebCT are working to increase the accessibility of their software through dialogue with leaders in the accessibility arena.

Another useful technique for checking websites is through HTML Validation services. Most web designers will be familiar with validation services to check for the consistent and proper use of HTML according to standard recommendations such as those offered by the W3C.

Anyone new to HTML may find the reports a little daunting, as it is necessary to have at least a basic understanding of web authoring. One of the better validation services offered is the W3C Validator (W3C, 2002) which provides tags to show where an error has occurred rather than leaving this for the user to decipher. The W3C Validator will check the HTML code in your pages against the version of HTML used, and will highlight any errors which may make the site less accessible such as missing ALT Text tags.

Back to Chapter index

14.4

Examples of accessible websites

This section includes websites that demonstrate how an accessible website can also be interesting in design. Examples include websites that have been approved by the RNIB See it Right Accessible Website Scheme and sites that have been awarded the Bobby Approved Icon.

The RNIB Digital Access Campaign promotes the development of dynamic, multimedia websites from which all visitors are able to extract information, with the same ease, regardless of their disability. This may mean providing an alternative delivery method for some areas of your site, but as described in the above sections, this can be achieved by following the help and guidelines available. URLs for all the sites mentioned in this section have been included in the list of Useful URLs.

Back to Chapter index

14.4.1

RNIB

The RNIB is an extensive site with a comprehensive range of information covering all aspects of visual impairment. The site has been designed with clarity and ease of navigation in mind, however this does not mean that the site consists simply of plain text as images have been included as well as interesting layout of information.

Back to Chapter index

14.4.2

NLB

The National Library for the Blind website is displayed in a distinctive yellow background and black text. Like the RNIB, the NLB website is very large; information is displayed in a fairly simple way with linked lists or menus that then lead on to further information or to external resources. Where links take the user to an external link, the NLB creators have included useful hints such as alerting users that the site uses images without text alternatives.

Back to Chapter index

14.4.3

Standard Life Investments

The RNIB has awarded this a See it Right logo as an example of a site that is both innovative and accessible.

Back to Chapter index

14.4.4

UK Online

The government’s UK Online developers have worked with the RNIB to create a website that is quick and easy to use. At present the site offers a Graphics and an Easy Access version, both of which are accessible.

Back to Chapter index

14.4.5

Public library authorities

Hampshire County Council is a large and complex website that has been carefully designed so that it is fully accessible to everyone. North Lincolnshire Libraries and Information Services site and the City of Leeds site are both visually exiting sites which also include accessibility features such as ALT text.

These two sites have been awarded under the EARL Best of the Web Awards. This award includes in its Judging Criteria (Earl, 1999), under the Design and Usability section, that consideration has been taken of sites which are "accessible to people using assisted technologies such as screen readers, and to those using older browsers or navigating with images turned off".

Back to Chapter index

14.4.6

University library websites

Good examples of university websites include the University of Central Lancashire and the University of Edinburgh. These websites demonstrate how good design techniques can be adopted to produce a fully accessible website that is interesting to look at and easy to navigate. Both of these sites have been awarded the Bobby Approved Icon for accessibility. Another good example is the University of the West of England, Bristol, also Bobby Approved and which provides a text index of the library site at the top of the library front page.

Back to Chapter index

14.5

Portability research

In the future it may be possible to enable blind and visually impaired users to set up a workstation desktop to suit their own particular needs, and then to transport the set-up to any other workstation. To achieve this it will be necessary for libraries to accept some minimum equipment standards, although these are unlikely to be more onerous than requirements for connectivity to national network services. A greater problem arises from incompatibility of software and from security concerns, which sometimes place major limitations on even temporary modifications to a standard set-up. Some libraries may be willing to allow users to store a profile locally, although at the time of writing the authors were not aware of any examples. In 2000 the Museums, Libraries and Archives Council funded research to explore the feasibility of enabling blind and visually-impaired users to set up the workstation desktop screen to suit their own particular needs, and then to transport the set-up to any other workstation. Recommendations from the report (HumanITy, Report 3, 2000) are included at Appendix A3.

Back to Chapter index

References

Brazier, H. and Jennings, S. (1999). Accessible website design. Library Technology, 4 (1), February.

Brophy, P. and Craven, J. (1999). The integrated accessible library: a model of service development for the 21st century. Final report of the REVIEL (Resources for Visually Impaired Users of the Electronic Library) project. British Library Research and Innovation Report 168. Manchester: CERLIM, Manchester Metropolitan University.

Guidelines for UK government websites. (Section 4.4. Accessibility).
www.e-envoy.gov.uk/publications/guidelines/webguidelines/websites/index.htm
(accessed January 2002).

HumanITy. (2000). Enhancing access to library based ICT services for visually impaired people 3. Library and Information Commission Research Report 64. STV/LIC Programme Report 3.

Murtha, C. (1997). Web access for the disabled: HOTmetalPRO helps bring access to the Web. Ariadne, Issue 9.

RNIB. (2002). Hints for designing accessible websites. www.rnib.org.uk/digital/hints.htm (accessed January 2002)

World Wide Web Consortium. (1999). Web content accessibility guidelines 1.0. http://www.w3.org/TR/WCAG10 (accessed January 2002).

World Wide Web Consortium. (2000). HTML Techniques for Web Content Accessibility 1.0. http://www.w3.org/TR/WCAG10-HTML-TECHS (accessed February 2002).

World Wide Web Consortium. (2001). Evaluating web sites for accessibility. http://www.w3.org/WAI/eval (accessed February 2002)

Back to Chapter index

Useful URLs

General

CAST: http://www.cast.org/

NLB website accessibility guidelines:
www.nlbuk.org/access/nlbguidelines.html

NoVA project details are at:
http://www.cerlim.ac.uk/projects/nova.htm

RNIB Clearprint guidelines:
www.rnib.org.uk/wesupply/fctsheet/clearp.htm

RNIB Digital Access Campaign: www.rnib.org.uk/digital/welcome.htm

WAI: http://www.w3.org/WAI

W3C: http://www.w3.org/

Web accessibility checkers:

BETSIE: www.bbc.co.uk

Bobby: www.cast.org/bobby

Lynx View: www.delorie.com/web/lynxview.html

Web authoring and validation services:

W3C HTML Validator: http://validator.w3.org/

Examples of accessible websites:

City of Leeds Library Information: http://www.leeds.gov.uk/

Hampshire County Council: http://www.hants.gov.uk/

North Lincolnshire Libraries and Information Services: http://www.northlincs.gov.uk/

Standard Life Investments: http://www.sli.co.uk/

UK Online: http://www.ukonline.gov.uk/

University of Central Lancashire: www.uclan.ac.uk/library/libhom1.htm

University of Edinburgh: http://www.ed.ac.uk/

University of the West of England, Bristol: www.uwe.ac.uk/library

Back to Chapter index

< Previous Chapter

Next Chapter >


Navigation:

Contents

Index

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Chapter 5

Chapter 6

Chapter 7

Chapter 8

Chapter 9

Chapter 10

Chapter 11

Chapter 12

Chapter 13

Chapter 14

Chapter 15

Chapter 16

Chapter 17

Appendix 1

Appendix 2

Appendix 3

Appendix 4

Appendix 5

Appendix 6