Creating Accessible
Web Sites:
A Prescriptive Approach
for Web Developers
Mick Wood
Multimedia Development Officer
Learning Development Unit
University of Central Lancashire
Preston PR1 2HE
mawood@uclan.ac.uk
+44 (0) 1772 892763
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
1
Table of Contents
1.0 Introduction………..................................................................................................7
2.0 Disability Legislation.............................................................................................10
2.1 Disability Discrimination Act 1995...................................................................11
2.2 Special Educational Needs & Disability Act 2001............................................14
2.2.1 DRC Code of Practice.................................................................................16
2.3 Human Rights Act 1998.....................................................................................17
2.4 European Union Law .........................................................................................18
2.5 Sydney Olympic Games Legal Case..................................................................18
2.6 Legal Summary…..............................................................................................20
3.0 What is an Accessible Web Site?...........................................................................21
3.1 Definitions………..............................................................................................22
3.1.1 ‘Anyone’….. ...............................................................................................22
3.1.2 ‘Any Web Browsing Technology’..............................................................22
3.1.3 ‘Any Site’…................................................................................................23
3.1.4 ‘Full and Complete Understanding’............................................................23
3.1.5 ‘Full and Complete Ability to Interact’ ......................................................24
3.2 Definition Summary...........................................................................................24
4.0 Compliance of Existing University Web Sites ......................................................25
4.1 University of Central Lancashire.......................................................................25
4.2 UCLAN Web Site Audit....................................................................................26
5.0 Incidence of Disability...........................................................................................27
5.1 General Disability Statistics...............................................................................27
5.2 Disabled Students in HE ....................................................................................27
6.0 Barriers to Access… ..............................................................................................28
6.1 Visual Barriers to Access...................................................................................28
6.2 Aural Barriers to Access ....................................................................................30
6.3 Physical Barriers to Access................................................................................31
6.4 Cognitive Barriers to Access..............................................................................32
6.5 Summary………................................................................................................34
7.0 Learning Theories, Styles & AFA Course Strategy...............................................34
7.1 Learning Theories ..............................................................................................34
7.1.1 Internet Based Learning..............................................................................35
7.1.2 Open Learning ............................................................................................36
7.1.3 Situated Learning........................................................................................37
7.1.4 Constructivism............................................................................................37
7.2 Learning Styles… ..............................................................................................37
7.2.1 The Myers-Briggs Type Indicator (MBTI).................................................38
7.2.2 Kolb's Learning Style Model ......................................................................38
7.2.3 Felder-Silverman Learning Style Model ....................................................39
7.3 AFA Course Strategy.........................................................................................40
7.4 Summary………................................................................................................41
8.0 Accessible Web Site Resources.............................................................................41
8.1 Books…………… .............................................................................................42
8.2 Web Sites………. ..............................................................................................42
8.3 Summary………................................................................................................45
9.0 User Needs Analysis..............................................................................................45
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
2
9.1 AFA Course Participants ...................................................................................46
9.1.1 User Groups. ...............................................................................................46
9.1.2 Primary User...............................................................................................46
9.1.3 Environment................................................................................................47
9.1.4 Hardware….................................................................................................48
9.1.5 User Tasks / Learning Objectives...............................................................48
9.2 AFA Retro-fitted Web Site ................................................................................49
9.2.1 Users Tasks / Learning Objectives .............................................................50
10.0 Web Site Project Management.............................................................................50
10.1 Waterfall……… ..............................................................................................50
10.2 System Assembly from Reusable Components ...............................................51
10.3 The Dynamic Systems Development Method .................................................51
10.4 Prototyping……...............................................................................................51
10.5 Summary………..............................................................................................52
11.0 Comparison of Web Authoring Tools..................................................................52
11.1 Macromedia Dreamweaver MX.......................................................................53
11.2 Microsoft FrontPage 2002 ...............................................................................54
11.3 Adobe GoLive…..............................................................................................55
11.4 Software Chosen ..............................................................................................56
12.0 AFA Web Site Guidelines ...................................................................................57
12.1 HTML………… ..............................................................................................57
12.1.1 The World Wide Web Consortium...........................................................58
12.1.2 The Web Accessibility Initiative (WAI)...................................................58
12.1.3 Web Content Accessibility Guidelines (WCAG) .....................................59
12.1.4 WCAG Priorities.......................................................................................60
12.1.4.1 Priority 1 ............................................................................................60
12.1.4.2 Priority 2 ............................................................................................60
12.1.4.3 Priority 3 ............................................................................................60
12.1.5 WCAG Conformance................................................................................60
12.1.6 Browser Specifications .............................................................................61
12.1.7 Dept of Physics, Astronomy & Mathematics ...........................................61
12.1.8 Summary…...............................................................................................62
12.2 Colour………… ..............................................................................................62
12.3 Content……….................................................................................................64
12.3.1 The screen layout will be consistently formatted .....................................65
12.3.2 Page sizes will be limited to 30K..............................................................65
12.3.3 Frames will not be used ............................................................................65
12.3.4 Paragraphs and sentences will be kept short.............................................65
12.3.5 Each page will have a descriptive and different title, a clear heading and
logical structure…................................................................................................66
12.3.6 Font Guidelines.........................................................................................66
12.3.7 Links will be clearly identified .................................................................66
12.3.8 Pages will be fluid/flexible .......................................................................67
12.3.9 Pages will be device independent .............................................................67
12.3.10 Content will comply with Plain English Guidelines...............................67
13.0 Creating the AFA Evolutionary Prototype ..........................................................67
13.1 Splash Screen – index.htm...............................................................................68
13.2 Template – Main.dwt.......................................................................................70
13.3 Home Page – home.htm (index.htm)...............................................................75
13.4 Accessible Tables – table.htm..........................................................................76
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
3
13.5 Accessible Forms – forms.htm ........................................................................77
13.6 Images – image.htm…………………………………………………………. 79
13.7 Image Map – imagemap.htm ...........................................................................81
13.8 countries.htm…................................................................................................81
13.9 Summary………..............................................................................................82
14.0 Evaluation of the AFA Evolutionary Prototype...................................................82
15.0 Working Prototype...............................................................................................84
15.1 Site Definition…..............................................................................................84
15.2 Meta Data…….................................................................................................84
15.2.1 Keywords…..............................................................................................84
15.2.2 Description................................................................................................85
15.3 Tabindex and Accesskeys ................................................................................85
15.4 Status Bar Messages ........................................................................................87
15.5 Changing the default Dreamweaver template..................................................87
15.6 User Manual….................................................................................................87
16.0 Evaluation & Feedback........................................................................................88
16.1 Comments…….. ..............................................................................................89
16.2 Usability Testing..............................................................................................91
16.2.1 Lack of Tag Line.......................................................................................92
16.2.2 Homepage Link to Homepage ..................................................................92
16.2.3 ‘Pop-up’ Windows....................................................................................92
16.2.4 ‘Last Updated’ Information ......................................................................93
17.0 Conclusion………. ..............................................................................................93
17.1 Economic Reasons...........................................................................................94
17.2 Selfish Reasons. ...............................................................................................94
17.3 Altruistic Reasons ............................................................................................94
17.4 Design Reasons................................................................................................95
18.0 Further Reflections...............................................................................................95
Appendix A: Student Disability Tables 2000/2001.....................................................98
Appendix B: UCLAN Web Site Structure..................................................................99
Appendix C: WCAG Guidelines ..............................................................................101
Appendix C1: Guideline 1 ....................................................................................101
Appendix C2: Guideline 2 ....................................................................................102
Appendix C3: Guideline 3 ....................................................................................102
Appendix C4: Guideline 4 ....................................................................................102
Appendix C5: Guideline 5 ....................................................................................103
Appendix C6: Guideline 6 ....................................................................................103
Appendix C7: Guideline 7 ....................................................................................104
Appendix C8: Guideline 8 ....................................................................................104
Appendix C9: Guideline 9 ....................................................................................104
Appendix C10: Guideline 10 ................................................................................105
Appendix C11: Guideline 11 ................................................................................105
Appendix C12: Guideline 12 ................................................................................106
Appendix C13: Guideline 13 ................................................................................106
Appendix C14: Guideline 14 ................................................................................106
Appendix D: HTML Code Comparison ....................................................................107
Appendix E: Internet Trends.....................................................................................108
Appendix E1: Demographics (users shown in millions) ......................................108
Appendix E2: User Web Browser Settings (April 2003)......................................108
Appendix E3: User Screen Resolution Settings (April 2003)...............................109
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
4
Appendix E4: User Operating Systems (April 2003) ...........................................109
Appendix E5: Internet Connection Speeds (December 2001)..............................110
Appendix E6: User Colour Settings (April 2003).................................................110
Appendix F: Department of Physics, Astronomy and Mathematics..........................111
Appendix F1: Origin of Web Site Visitors ...........................................................111
Appendix F2: Browser Used by Web Site Visitors ..............................................111
Appendix F3: Operating System Used by Web Site Visitors...............................111
Appendix G1: Customising Internet Explorer ..........................................................112
Applying font and colour changes .........................................................................112
Changing the font…...............................................................................................112
Altering text size……............................................................................................112
Changing text and background colour ...................................................................112
Turning off images….............................................................................................113
Other Options……….............................................................................................113
Macintosh Users…….............................................................................................113
Appendix G2: Customising Netscape 4.x.................................................................114
Changing font size…. ............................................................................................114
Changing font settings ...........................................................................................114
Changing the colour of the background and text...................................................114
Turning images off….............................................................................................115
Turning off style sheets or JavaScript....................................................................115
Appendix G3: Customising Netscape 6....................................................................115
Appendix G4: Customising Opera 6.........................................................................116
Font size…………….............................................................................................116
Font, colour and link settings.................................................................................116
Other style settings….............................................................................................117
Switching between styles.......................................................................................117
Turning images off….............................................................................................117
Appendix G5: Setting Up Internet Explorer for Supernova .....................................117
Appendix H: FONT Tags...........................................................................................118
Appendix I: AFA Training Evaluation Form.............................................................120
Appendix J: AFA Usability Tests.............................................................................121
Appendix K: PROJECT OUTLINE FORM ..............................................................123
Appendix L: PROJECT COMPLETION FORM ......................................................124
References……………..............................................................................................125
Access for All Manual……………...………………………………………..Appended
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
5
Abstract
The Special Educational Needs and Disability Act 2001 (SENDA) received royal
assent on 11th
May 2001 and subsequently came into force on September 1st 2002.
Although many Higher Education (HE) and Further Education (FE) provisions were
already covered by the Disability Discrimination Act 1995 (DDA), education per se
was exempt. SENDA removes the exemption and has become the catalyst for many
HE and FE institutions to seriously consider disability issues.
This project considers one aspect of SENDA, namely the provision of electronic
information, whether general in nature or course specific, via the World Wide Web.
The ‘Access for All’ project involves training Web developers to retrofit, or convert,
an inaccessible Web site (and therefore illegal under SENDA) into an accessible one.
This is achieved by the creation of a ‘bad’ site using text, images, image maps, tables,
forms, and hyperlinks to highlight the majority of problems faced by disabled Web
site visitors. A comprehensive user manual explains the problems and how to rectify
them.
Upon completion of the course Web developers will be able to design and create
legal, SENDA compliant, Web sites.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
6
Acknowledgements
Thanks to Helen Campbell, Principal Lecturer, Department of Computing, University
of Central Lancashire (UCLAN), for her help, support, advice, and general project
supervision.
Thanks to Peggy Gregory, Senior Lecturer, Department of Computing, UCLAN, for
her help support and advice.
Thanks to Pam Houghton, Head of Learning Development Unit, UCLAN, for her
help, support, and advice.
Thanks to Fraser McMillan, Internet Co-coordinator, Media and Promotion Office,
UCLAN for providing the UCLAN Web site statistics.
Thanks to Zylpha Thomson, Head of Marketing Support, Marketing Services,
Department of Advancement, UCLAN, for providing access to the facts@uclan
document.
Thanks to Professor Mike Holmes, Department of Physics, Astronomy and
Mathematics, UCLAN for providing Department Web site statistics.
Finally, thanks to all those who undertook the ‘Access for All’ training course and
provided useful feedback and encouragement.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
7
1.0 Introduction
This document describes the creation of the ‘Access for All’ (AFA) project. AFA
tackles one aspect of student life, namely access to Web based information. This
information may be general in nature or specific to a particular course. In order to
comply with disability legislation, such information must be accessible to all students.
It would be very unlikely that the AFA project would ever have been developed if
there was no legal reason to do so. There are many supplementary benefits to creating
accessible Web sites but the perceived costs involved would probably have prevented
academic institutions from implementing a Web accessibility policy.
AFA sets out to train university Web developers to create accessible Web sites. This
is achieved by showing the developers, using both Web and printed material, how to
retrofit a pre-built inaccessible site.
Many university staff responsible for the creation and maintenance of Web sites are
not dedicated Web developers. They may be office administrators with numerous
other roles and responsibilities or they may be university lecturers who are being
encouraged to provide e-learning materials, perhaps in an effort to attract distance
learners.
Many of these staff developers will not understand nor be able to write Hyper Text
Markup Language (HTML), Cascading Style Sheets (CSS) or Extensible Hyper Text
Markup Language (XHTML). Instead they will rely on ‘What You See Is What You
Get’ (WYSIWYG) editors such as Macromedia Dreamweaver or Microsoft
FrontPage. In order to create accessible Web sites it is vital that the Web developers
know and understand these ‘Web-based’ languages, at least to a basic level. Users
also need to understand the concept of usability. It is perfectly possible to create a
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
8
Web site that is technically correct yet it is still inaccessible. The AFA project
addresses these issues.
I will begin by considering whether academic institutions are legally bound to provide
or create accessible Web sites. I will then define what an accessible Web site actually
is. As we shall see, the definition is extremely wide reaching and inclusive.
I will then consider the incidence of disability worldwide, including the UK, and
specifically within HE. I will then identify and examine the problems faced by four
generalised categories of disabled people as they ‘surf’ the World Wide Web. It is
only by understanding these ‘barriers to access’ that accessible Web sites can be
created.
Learning theories and styles are then considered followed by a discussion of existing
Web resources. From that, two User Needs Analysis’ (UNA’s) are constructed
followed by a discussion of Web site design methodology. A comparison of Web site
authoring programs follows before the actual implementation of the AFA project is
detailed.
An evolutionary prototype was constructed and, following positive feedback, a fully
functional course developed. I conclude with a number of observations and
recommendations.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
9
The final project can be seen online at the following URL’s.
Initial ‘Bad’ Web site
http://www.uclan.ac.uk/ldu/resources/accessibility/afa/bad/
Retrofitted ‘Good’ Web site
http://www.uclan.ac.uk/ldu/resources/accessibility/afa/good
Training Course (Word - 519KB)
http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.doc
Training Course (RTF - 8.28 MB)
http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.rtf
Training Course (PDF - 556 KB)
http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.pdf
All Files (ZIP - 2.69 MB)
http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.zip
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
10
2.0 Disability Legislation
This section will outline the disability legislation applicable to the UK as understood
by the author at the time of writing (April 2003) and provides a justification for
developing the AFA project.
The number of students with, and declaring that they have, a disability is equivalent to
the number of students in a large university (see Appendix A). The passing of the
Special Educational Needs and Disability Act 2001 (SENDA) [1] has conferred upon
these students’ new rights, rights which pervade every area of academic life.
SENDA came into force on September 1st 2002 and introduced the right for disabled
students not to be discriminated against in education, training, and any other services
provided wholly or mainly for students, or those enrolled on courses.
SENDA places educational institutions in the same position as other service
providers; breaches of the SENDA legislation can result in civil proceedings and
potentially high awards against governing bodies.
SENDA requires that educational institutions consider the provision they make for
disabled students and prospective students generally. The duties cover all aspects of
student life including academic activities and wider services such as accommodation
and leisure facilities, examinations and assessments, library and learning resources,
and Web sites.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
11
2.1 Disability Discrimination Act 1995
The Disability Discrimination Act (DDA) [2] was passed in 1995 to introduce new
measures aimed at ending the discrimination faced by many disabled people.
Education was exempted from the DDA at that time although the exemption was
expected to be removed in 2004. In fact the introduction of SENDA removed the
exemption in 2002.
Part II of the DDA makes discriminatory treatment illegal in relation to employment;
part III of the Act makes discriminatory treatment illegal in relation to access to
goods, facilities and services, and the selling, letting or managing of land or premises.
For employers these measures came into force on December 2nd 1996, for service
providers (e.g. businesses and organisations) the measures were introduced over a
period of time.
Since December 1996 it has been unlawful to treat disabled people less favourably
than other people for a reason related to their disability. Since October 1999 service
providers have had to make reasonable adjustments for disabled people, such as
providing extra help or making changes to the way they provide their services. From
2004 they may have to make reasonable adjustments to the physical features of their
premises to overcome physical barriers to access.
In addition, the DDA requires schools, colleges and universities to provide
information for disabled people and allows the Government to set minimum standards
to assist disabled people to use public transport easily. Many people, both with and
without disabilities, are affected by the Act.
The DDA gives new rights to people who have or have had a disability which makes
it difficult for them to carry out normal day-to-day activities. The disability could be
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
12
physical, sensory, or mental and must also be substantial and have a long-term effect
(the disability must last or be expected to last for 12 months). Conditions which have
a slight effect on day-to-day activities, but are expected to become substantial, are
covered. Severe disfigurement is also classed as a disability.
Employers and people who provide goods and services to the public will have to take
reasonable measures to make sure that they are not discriminating against disabled
people. Some people will have to take measures both as an employer and as someone
who provides goods and services to the public.
People who sell or let property will have to ensure that they do not unreasonably
discriminate against disabled people.
It will be against the law for an employer to treat a disabled person less favourably
than someone else because of their disability, unless there is good reason. This applies
to all employment matters (including recruitment, training, promotion and dismissal).
In order to help a disabled person to do the job, employers will have to look at what
changes they could make to the workplace or to the way the work is done, and make
any changes which are reasonable. Employers will be able to take into account how
much the changes would cost, and how much they would help, when considering what
is reasonable.
In the same way, it will be against the law for trade associations, trade unions and
professional bodies to treat a disabled person less favourably than someone else.
Employers will still be able to recruit or promote the best person for the job and they
will not be expected to make any changes which would break health and safety laws.
The employment part of the DDA does not apply to employers who employ fewer
than 20 people. However, they are encouraged to follow good practice guidelines.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
13
It also does not apply to operational staff employed in the armed forces, the police, the
prison service, the fire service, or to anyone employed on board ships, hovercrafts or
aeroplanes.
The Act will affect anyone who provides goods, facilities or services to members of
the public, whether paid for or free. This could range from buying bread in a
supermarket, using the facilities in a launderette, or borrowing a book from a public
library. Private clubs are not included.
It will be against the law to refuse to serve someone who is disabled. Likewise, it will
be against the law to offer a disabled person a service which is not as good as the
service being offered to other people. It will also be against the law to provide a
service to a disabled person on different terms to those offered to other people.
If the health or safety of the disabled person, or other people, would be in danger, it
would not be against the law to refuse to provide the service to a disabled person or to
provide it on different terms.
Other exceptions would arise if a disabled customer was not capable of understanding
the terms of a contract or if providing the service, or the same standard of service,
would deny service to other customers.
It will be against the law for someone to run a service, or provide goods or facilities,
in a way which makes it impossible or unreasonably difficult for a disabled person to
use the service or goods. It will not be against the law, however, if the way the
service is run is fundamental to the business.
People will have to provide equipment or other helpful items which will make it
easier for disabled people to use their service, if it is reasonable to do so. People will
have to remove physical obstructions (for example, widening entrance doors) or
provide other ways of letting disabled people use their services.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
14
Service providers will not be able to charge a disabled person more to meet the cost of
making it easier for them to use their service.
It will be against the law for anyone who sells or lets land or property (and their
agents) to unreasonably discriminate against disabled people. A landlord who rents 6
or fewer rooms in his home would not be affected. People selling or renting
properties do not have to make adjustments to the property to make it accessible.
The Government will be able to set minimum standards for new public transport
vehicles (taxis, buses, coaches, trains and trams) so that disabled people, including
people who use a wheelchair, can use them. For example, disabled people who use
wheelchairs will eventually be able to hire taxis in the street or at a taxi rank.
The DDA ensures recognition of the needs of disabled people wishing to study and
the provision of better information for parents, pupils and students. Schools will have
to explain their arrangements for the admission of disabled pupils, how they will help
these pupils gain access, and what they will do to ensure they are treated fairly.
FE & HE institutions funded by the Further and Higher Education Funding Councils
will have to publish disability statements containing information about facilities for
disabled people. Local Education Authorities will have to provide information on
their further education facilities for disabled people.
As can be seen, the implications of the DDA are far reaching and pervasive.
2.2 Special Educational Needs & Disability Act 2001
SENDA became law on 11th
May 2001. As a result, discrimination against disabled
students in the provision of education, training and other related services became
unlawful. The legislation applies to England, Wales and Scotland but not Northern
Ireland and covers both FE and HE educational institutions.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
15
SENDA is an amendment to the 1995 DDA and is, in effect, DDA Part IV. SENDA
only protects people who are defined as disabled according to that legislation. The
definition of disability is based on an individual’s ability to carry out ‘normal day-to-
day’ activities.
(An interesting aside concerns the sitting of examinations. A typical examination
might involve writing four essays in three hours. This is NOT considered to be a
normal day-to-day activity and is therefore not covered under SENDA.)
The law affects all education and training provided by HE and FE institutions and also
includes admissions to courses, exclusions, and the provision of other student
services. ‘Student services’ is an all inclusive term, and includes services of any
description provided wholly or mainly for students or those enrolled on courses. This
includes not only education, but residential accommodation, leisure facilities, catering
and library facilities, careers and welfare services, and services already covered by
Part III of the existing DDA.
It is now unlawful for institutions or other education providers to treat a disabled
person ‘less favourably’ than they treat, or would treat, non-disabled people for a
reason which relates to the person’s disability. For example, it would be unlawful for
an institution to turn a disabled person away from a course, or mark them down in an
assessment, because they had dyslexia or were deaf.
Part of not discriminating is making ‘adjustments’. If a disabled person is at a
‘substantial disadvantage’, the education provider is required to take such steps as are
reasonable to prevent that disadvantage. This might include changes to policies and
practices, course requirements, work placements or physical features of a building. It
may also be necessary to provide interpreters or other support workers, deliver
courses in alternative ways, or provide course materials in other formats.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
16
The duty to make reasonable adjustments is a duty to disabled people generally, not
just particular individuals. This ‘anticipatory’ aspect effectively means that providers
must consider what sort of adjustments may be necessary for disabled people in the
future and, where appropriate, make adjustments in advance. There is a responsibility
on education providers to find out whether individuals have disability-related needs.
SENDA legislation came into force on 1st September 2002 with two important
exceptions; reasonable adjustments involving the provision of auxiliary aids and
services (such as interpreters etc) come into force on 1st September 2003; the
requirement to make physical adjustments to buildings comes into force on the 1st
September 2005.
2.2.1 DRC Code of Practice
Having established that HE & FE institution Web sites are covered under DDA and
SENDA legislation I will now consider how this works in practice.
The Disability Rights Commission (DRC) [3] is an independent body, established by
Act of Parliament to eliminate discrimination against disabled people and promote
equality of opportunity.
On 26 February 2002, the DRC published a new, revised Code of Practice on the
rights of access to goods, facilities, services and premises for disabled people.[4] This
statutory Code, agreed by Parliament, provides detailed advice on the way the law
should work. It also provides practical examples and tips.
‘The Code's primary function is to provide guidance for both service
providers and disabled people and whilst not an authoritative statement of
the law, there is a requirement that the court consider any part of the Code
which seems relevant.’ [5]
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
17
The May 2002 Guidelines for UK Government Web sites [6] refers to the Code four
times.
With regard to providing services Paragraph 2.14 of the Code lists numerous services
which are covered. In paragraph 2.17 a Web related example is given, clearly
establishing that Web sites are classed as a service and therefore covered under the
DDA.
‘An airline company provides a flight reservation and booking service to the
public on its Web site. This is a provision of a service and is subject to the
Act.’
Accessible Web sites are clearly stated as examples of reasonable adjustments in
Paragraph 5.23, provision for people with a hearing disability, and paragraph 5.26,
provision for people with a visual impairment.
2.3 Human Rights Act 1998
The Human Rights Act came into force on 2nd
October 2000 [7], bringing some of the
European Convention on Human Rights into UK law. The rights are binding on public
bodies.
Article 2 of the First Protocol of the Convention provides a right ‘not to be denied
access to education’. European case law has defined the right to education as
including a right to the ‘full benefit of that education’.
Article 14 of the Convention provides a right not to be discriminated against in the
enjoyment of Convention rights on 'any ground such as sex, race, colour, language,
religion, political or other opinion, national or social origin, association with a
national minority, property, birth or ‘other status'.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
18
Disability is not specifically mentioned but is probably covered by the phrase 'other
status'.
2.4 European Union Law
The European Union (EU) recently passed EU Law Parliament Resolution
(2002)0325 regarding the Accessibility of Public Web Sites. This was adopted on
13th June 2002. [8]
In note 31 of the resolution the EU has stressed that, for Web sites to be accessible, it
is essential that they are ‘WCAG AA’ compliant. In other words priority 2 of the Web
Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG)
guidelines must be fully implemented. A full discussion of the WCAG guidelines can
be found in Section #.#.
EU legislation is legally binding on UK courts and therefore should be taken as the
legal definition of Web Accessibility.
2.5 Sydney Olympic Games Legal Case
At the time of writing there have been very few legal cases relating to accessible Web
sites. The majority of potential cases tend to be settled out of court because the
defendants wish to avoid negative publicity. AOL, Barnes & Noble, and Claire’s
Stores [9] have already settled potential cases out of court without admitting liability.
The University of Kentucky has a list of University related disability legal cases, [10]
most of which have ended with the Universities agreeing to put things right –
‘voluntary resolution’.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
19
There has been one key legal action which was brought under the Commonwealth
Disability Discrimination Act 1992, namely Bruce Lindsay Maguire v Sydney
Organising Committee for the Olympic Games (SOCOG) [11]
This case is not legally binding on UK courts but it is likely to be regarded as highly
persuasive. It is common for the UK courts to consider cases in other courts when
dealing with ‘new technology’ issues.
Bruce Maguire was born blind and uses a refreshable Braille display. He complained
that the Sydney Olympic Games Web site was not accessible to him as a blind person.
In particular, alternative text was not provided on all of the site images and
imagemaps. Furthermore Maguire could not access the Index of Sports or the Results
Tables.
The Human Rights & Equal Opportunities Commission (HREOC) delivered a
landmark ruling on 24th
August 2000 when they found that SOCOG were in breach of
Australia's DDA. SOCOG ignored the ruling and were fined A$20,000.
The HREOC dismissed defence arguments presented by SOCOG and IBM (who built
the site). The defendants argued that it would be excessively expensive to retrofit the
site to remove accessibility barriers and (over) estimated retrofit costs to be in the
region of A$2.2 million. This defence was rejected by the HREOC.
SOCOG did not actively cooperate with the HREOC. The defendants withheld site
information from Maguire arguing that ‘it was commercially sensitive’ although this
argument was rejected by the HREOC. Moreover, the defendants did not return
telephone calls or reply to correspondence. They also refused to provide a list of
witnesses as directed by the HREOC.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
20
SOCOG never seriously considered disability issues and attempted to ‘bully’ their
way out of their obligations under the law. This case highlights the fact that
compliance with Web accessibility legislation is not optional. FE and HE institutions
need to consider the implications of this landmark case.
2.6 Legal Summary
Disability legislation regarding Web accessibility has been passed in many countries
around the world [12]. The vast majority of these countries cite ‘WCAG AA’ as the
benchmark in their definition of Web accessibility, the one main exception being the
United States which has provided its’ own guidelines, namely Section 508 of the
Rehabilitation Act of 1973 [13].
A discussion of Section 508 is not relevant because the AFA project is aimed at UK
universities. However, sites which comply with UK legislation would automatically
comply with American legislation; Section 508 criteria is not as rigorous as
elsewhere.
This section has clearly demonstrated that UK FE and HE institutions are legally
bound under SENDA legislation, in effect DDA Part IV, to create accessible Web
sites. The potential consequences for non-compliance can be seen in the Maguire v.
SOCOG legal case. If an organisation as big as SOCOG, in partnership with IBM,
can be prosecuted through the courts, UK universities must face the fact that they are
not above the law.
The aim of the AFA project is to prevent FE and HE institutions from falling foul of
disability legislation.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
21
3.0 What is an Accessible Web Site?
In order to train Web developers to design and create accessible Web sites it would be
useful to define what an accessible Web site actually is. This will provide a number of
useful guidelines and constraints.
There are numerous definitions of Web accessibility including the above mentioned
‘WCAG AA’ legal recommendation. The Open Training and Education Network
(OTEN), the largest provider of distance education and training in Australia with
more than 35 000 students enrolled in 660 fully accredited subjects and modules, [14]
defines an accessible Web site as one in which ‘all users can easily enter and navigate
the site, access all of the information and use all the interactive features provided.’ [15]
(Emphasis mine)
Section 508 of the US Rehabilitation Act 1973 states that a Web site is accessible
when ‘individuals with disabilities can access and use them as effectively as people
who don’t have disabilities’.[16]
The Making Connections Unit (MCU), based in Glasgow Caledonian University,
consider four definitions although they actually recommend number 4. [17] An
Accessible Web site is one that will be: -
1. accessible to everyone
2. accessible to the intended audience - though perhaps not accessible to
other groups
3. accessible to disabled people
4. accessible to machines first, and people second
The definition with perhaps the most authority was written by Chuck Letourneau
[18], the man who co-chaired the working group that developed the W3C's Web
Content Accessibility Guideline Recommendation 1.0 [19], the de facto international
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
22
standard for the design of accessible Web sites [20], and also co-authored the online
training Curriculum for the Web Content Accessibility Guidelines 1.0 [21].
Letourneau describes Web accessibility thus: - ‘anyone using any kind of Web
browsing technology must be able to visit any site and get a full and complete
understanding of the information contained there, as well as have the full and
complete ability to interact with the site.’ [22] (Emphasis mine)
3.1 Definitions
3.1.1 ‘Anyone’
‘Anyone’ means every person regardless of their sex, race, nationality or ability -
from people having the full range of visual, aural, physical and cognitive skills and
abilities to those who are limited in any, or all, of them.
3.1.2 ‘Any Web Browsing Technology’
There are more than 100 different Web browsers, many of which have numerous
versions [23]. This figure includes text-only browsers such as Lynx [24], speech
browsers such as the IBM Homepage Reader [25] and the Cast E-Reader [26], as well as
the more popular browsers such as Internet Explorer [27], Netscape [28] and Opera [29].
Web pages can also be viewed by various other devices including screen readers such
as Dolphin Supernova [30], Personal Digital Assistants (PDA’s), Java and WAP
(Wireless Application Protocol) phones, Web and interactive TV and there is even an
Internet fridge [31]. An excellent source of information on dozens of accessibility
related products is the TECHDIS Accessibility Database [32].
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
23
To comply with our accessible Web site definition, pages should be viewable on all of
these devices.
3.1.3 ‘Any Site’
‘Any site’ means literally any and all sites.
Some Web developers may argue that their site has been created for a specific group
of people and therefore it is not necessary for their site to comply with our Web
accessibility definition. This argument fails on three counts, not counting any legal
ramifications. Firstly, any member of the intended audience may become disabled at
a future time, secondly, disabled users wishing to join this selected group are
prevented from doing so, and thirdly, users who may be interested in the subject
matter are prevented from accessing the information.
3.1.4 ‘Full and Complete Understanding’
There are approximately 6,800 spoken languages with a further 41,000 distinct
dialects. [33] Unfortunately the content of the vast majority of Web sites is written in
just one language. In the case of UCLAN that language is obviously English.
For many students English is not their first language yet, to comply with our
definition, all Web pages must be fully and completely understandable to them.
Some sites now use automatic language translation programs. For example, Google
now offer their search engine Web site in 53 languages and users can set their user
interface preference in one of 88 different languages. Google also offer a Web page
translation service in 12 languages. [34] Unfortunately the resulting translations are not
totally accurate and can confuse students.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
24
Even assuming a visitor is viewing a page written in their native language there is no
guarantee that full understanding will follow. Academics tend to write using lots of
jargon. The words may be English, but the concepts are difficult to follow. The
author needs to ensure that the content is as understandable as possible.
3.1.5 ‘Full and Complete Ability to Interact’
Many Web pages include elements which the user is expected to interact with. In an
educational setting this could include elements such as an online quiz, an application
form or a drag and drop exercise. In order to comply with our accessible Web site
definition, all users should be able to fully complete these activities.
For example, a drag and drop exercise may involve the user dragging various items
from one side of the computer screen and placing them in selected locations in
another part of the screen. This assumes that the user can actually see the screen and
can use a mouse. In order to comply with disability legislation the exercise must be
created so that a visually or physically disabled user can complete it using alternative
methods.
3.2 Definition Summary
Letourneau’s definition of Web accessibility is the one chosen as the working
definition in the ‘Access for All’ project.
‘anyone using any kind of Web browsing technology must be able to visit
any site and get a full and complete understanding of the information
contained there, as well as have the full and complete ability to interact with
the site.’
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
25
The following groups of people would benefit from having access to accessible Web
sites which comply with this definition. [35]
1. People who may not be able to see, hear, or move.
2. People who may not be able to process some types of information easily,
or at all.
3. People who have difficulty reading or understanding text.
4. People who do not have, or are not able to use, a keyboard or mouse.
5. People who have a text-only screen, a small screen, or a slow Internet
connection.
6. People who do not speak or understand the language in which the
document is written.
7. People who are in a situation where their eyes, ears, or hands are busy (e.g.
driving to work, working in a noisy / loud environment).
8. People who have an old version of a browser, a different browser entirely,
a voice browser, or a different operating system.
9. People who do not have access to audio speakers.
4.0 Compliance of Existing University Web Sites
4.1 University of Central Lancashire
UCLAN is assumed to be a typical UK University. It is also assumed that the
accessibility / inaccessibility of the UCLAN Web site will be fairly representative of
the vast majority of FE and HE institutions.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
26
UCLAN is the sixth largest university in England with more than 26,000 students and
2000 staff. [36] Students can enrol on more than 550 courses with a further 3600
possible subject combinations - students can effectively design their own course.
UCLAN has 21 Partner Colleges and is also partnered with 120 institutions
worldwide. UCLAN currently has more than 2000 international students enrolled on
courses.
UCLAN has set a target of attracting 50,000 students by 2010. This doubling of
student numbers will necessitate a large increase in distance learning - the current
campus could not physically accommodate such an influx of students. Distance
learning, via the World Wide Web, will therefore be the main way of attracting new
students and is becoming a central part of the delivery of both on and off campus
learning programmes. Distance Learning programmes must be accessible to disabled
students.
4.2 UCLAN Web Site Audit
A brief audit of the UCLAN Web site in March 2003 identified more than 13000
corporate Web pages [37] as shown in Appendix B. These figures do not include
individual staff pages. A brief assessment of the site in September 2001, using
‘Bobby’ [38], highlighted the fact that more than 80% of the Web pages did not meet
the requirements of ‘WCAG A’, never mind the preferred ‘WCAG AA’ benchmark.
This situation has now largely been rectified and UCLAN aims to be fully ‘WCAG
AA’ compliant by September 2003.
This audit confirms Paciello’s assertion that the vast majority of Web pages were
technically illegal prior to SENDA. (See Section 5.1)
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
27
5.0 Incidence of Disability
5.1 General Disability Statistics
It is very difficult to obtain accurate statistics regarding the incidence of disability.
According to Paciello [39]
there are approximately: -
1. 500 million disabled people worldwide
2. 8.5 million disabled people in UK
3. 52.6 million disabled people in USA
4. 37 million disabled people in EU
5. 4.2 million disabled people in Canada
6. 3.7 million disabled people in Australia
Temporary disabilities are NOT included in these statistics. Additionally, Paciello
estimates that between 95% and 99% of all Web sites are inaccessible.
5.2 Disabled Students in HE
According to the Higher Education Statistics Agency more than 30,000 students with
a disability started programmes of study in UK higher education institutions during
the 2000-01 academic year, representing over 4% of all new students. Of those
students with a disability, approximately 34% were dyslexic, 3% blind or partially
sighted, 7% deaf or hearing impaired, 5% were wheelchair users or had mobility
problems, 4% had mental health difficulties, 27% had an unseen disability, 6% had
multiple disabilities and 13% had some other disability. [40] These numbers probably
underestimate the total number of students who consider themselves to have a
disability, the numbers actually with a disability, and the numbers covered by
SENDA.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
28
The official Higher Education Student Disability Tables for 2000/2001 can be seen in
Appendix A.
6.0 Barriers to Access
Users with disabilities face many different problems when they try to access the
Internet. The AFA course needs to take account of these difficulties.
There are numerous types (and sub-types) of disability. For the purposes of the AFA
project these types have been separated into four generic groups. These groups, in no
particular order, include users with the following disabilities.
1. visual
2. aural
3. physical (motor)
4. cognitive
It is noted that certain individuals may suffer from multiple disabilities.
For each disability group I will consider the ‘barriers to access’ faced by that group
and the Assistive Technology (AT) available to them. AT enables users who are
affected by these various barriers to access the Web (provided the pages are coded
correctly).
6.1 Visual Barriers to Access
This category includes people with little or no vision, people with colour blindness,
people who use Screen Readers and people who use screen magnifiers.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
29
According to the Royal National Institute of the Blind (RNIB) [41] there are more than
350,000 people in the UK who are blind or partially sighted, that is 1 person in 60 of
the whole population. Moreover, 6 out of 10 visually impaired adults have another
illness or disability.
Many people assume that visually disabled means total blindness. In fact only 18% of
the visually impaired are totally blind. Likewise, people assume that the visually
disabled can read Braille and have a guide dog. According to the RNIB only 19,000
people can read Braille and only about 4,000 people have a guide dog.
Users with visual disabilities will, to varying degrees, have difficulty seeing the
computer screen. This can range from total blindness where the user cannot see
anything, to somebody who is near or far sighted and therefore able to read the text
with the aid of spectacles or perhaps a screen magnifier. Some dyslexics have
problems with certain colour combinations, as do people with colour blindness.
There is a range of AT designed to help people who have trouble seeing the screen
including:
• Screen readers
o Dolphin Supernova
o Jaws
• Web browsers
o Cast E-Reader
o IBM Homepage Reader
• Refreshable Braille displays
• Voice recognition software
• Screen magnification software
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
30
In effect all of these AT solutions perform the same function; namely they convert on-
screen text into a format which can be understood by the disabled person.
Web developers can also code special ‘skip navigation’ links which provide a means
for visually disabled users to avoid the main navigation controls of a Web page and
jump straight to the main content of the page. This means that the visually disabled
user does not have to listen to the screen reader reading out the navigation links on
every page.
6.2 Aural Barriers to Access
This category includes people who have been deaf from birth, deafened people, and
those who have partial hearing. A deafened person is someone who was born with
hearing but then developed a hearing impairment later in life, perhaps as a result of an
illness or an accident.
According to the Royal National Institute of the Deaf (RNID) [42] 8.7 million people in
the UK have a hearing impairment, that is 1 in 7 of the whole population. This
number is rising as the number of people aged over 60 increases. About 698,000 of
these are severely or profoundly deaf, a high proportion of which have other
disabilities as well. There are an estimated 123,000 deafened people in the UK aged
16 and over.
4.7 million people, 1 person in 10, suffer from tinnitus [43] and 55% of all people over
60 years of age are deaf or hard of hearing. 25,000 children in the UK under the age
of 15 are permanently deaf or hard of hearing. There are also 23,000 deafblind people
in the UK. In the UK there are approximately 50,000 British Sign Language (BSL)
users. [44]
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
31
The barriers to access faced by users with hearing difficulties depends, to a certain
extent, on whether the user has been deaf from birth or deafened later in life. It is
important from a Web developer’s perspective to differentiate between the two
groups.
Users who are deaf from birth communicate using BSL. BSL is a language in its own
right and has different grammar and structure to English. BSL users must learn
English in the same way that others may learn French or German. Web developers
cannot assume that BSL users can read and understand the content of their Web
pages.
There is an assumption that users who become deaf later in life can read and
understand English. It may be true in some cases but many of these users
communicate using Sign Supported English (SSE); a combination of BSL and
English.
Users with hearing difficulties require visual representation of auditory information
such as a transcript or captions. MAGpie [45] is a free piece of software enabling the
creation of captions and subtitles for, and integrating audio descriptions with, digital
multimedia such as video.
6.3 Physical Barriers to Access
This is a wide ranging category and includes people with a range of physical
disabilities including amputees, people who may have suffered a stroke, have spinal
cord injuries, lost the use of limbs or digits, and people with manual dexterity or
physical co-ordination problems.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
32
According to the United Medical and Dental Schools of Guy's and St Thomas'
Hospitals (UMDS) [46], Myalgic Encephalomyelitis (ME) is thought to affect about
2% of the UK population at any one time, one in 100 people over the age of 65 have
Parkinson's disease, and eight in 100 over the age of 65 are affected by Alzheimer’s
disease.
Most Web sites are created assuming that the user can see the screen and use a mouse.
Many physically disabled users cannot use a mouse. Many Web sites include links
which are extremely small. Again many physically disabled users, even if they can
use a mouse, cannot hold the mouse pointer steady for a long enough period of time to
enable them to select the link.
There are a number of AT devices available to help users with physical disabilities
including Retinal scanning devices and Voice Recognition software such as Dragon
Naturally Speaking [47] . In addition the Windows operating system has a number of
built-in accessibility features such as ‘sticky keys’. Sticky Keys allow users to select
keyboard combinations one key at a time.
In addition Web developers can add special code to their Web pages to allow
physically disabled users to navigate their site. This special code allows physically
disabled users to navigate via their keyboard using special access keys. Access keys
enable users to quickly visit key links within a site.
6.4 Cognitive Barriers to Access
‘Cognitive disability’ is any disability that affects mental processes including mental
retardation, attention deficit disorder, brain damage, dementia and other psychiatric
and behavioural disorders. This category also includes people with learning
difficulties and dyslexia / dyscalculia. People with learning difficulties may have
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
33
problems with literacy, information technology, and understanding information
generally. Dyslexia includes people who have problems reading, writing and spelling.
Dyscalculia describes people who have problems with mathematical calculations.
‘Mental load’ is also a factor; that is, the demands placed upon a person's cognitive
abilities when performing a task. This is a problem for all people, and especially for
users of AT. For persons with cognitive and/or behavioural disorders the problem is
magnified. Web designers should avoid using background images and music and
should use a consistent design layout. These measures will not only reduce mental
load for the cognitively disabled but will help all users to access their Web site.
There are over 200,000 people with severe learning disabilities in the UK and about 1
in 100 people suffer from dyslexia (boys are three times more likely to be affected
than girls).[48]
There is no specific AT available for people with cognitive disabilities although much
can be done to increase accessibility when designing the content of a Web site. For
example, users with learning difficulties may struggle to read long paragraphs or
certain fonts. This problem can be minimized by keeping paragraphs short and using
CSS. It is also difficult for some users with cognitive disabilities to read justified text
so text should be left justified. Flashing text should also be avoided as this can cause
certain people to have epileptic seizures.
The Plain English Campaign has produced a number of free guides [49] to help Web
developers produce accessible content for the cognitively disabled. Page content tips
include keeping the average sentence to between 15 and 20 words, using active rather
than passive verbs, using clear and helpful headings, and leaving plenty of
‘whitespace’ on the screen.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
34
6.5 Summary
The AFA project seeks to train Web developers to create Web sites which can cater
for the diverse needs of all users. Web developers must be aware of the various user
needs and the AT available to help such users.
It is relatively easy to create an accessible Web site for a user with a specific
disability. The problem is that Web sites must be accessible for all users, including
users with multiple disabilities.
It is also worth mentioning that this section has only covered user needs in a general
sense. Each user is an individual and may have very specific requirements. This
demonstrates how difficult it is to fully comply with the SENDA legislation.
7.0 Learning Theories, Styles & AFA Course Strategy
Students undertaking the AFA course must have a clear understanding of what it is
they are trying to learn. According to Tough [50] the most common motivation for
learning is that there is ‘an anticipated use or application for the skills learned’.
The original AFA course was delivered in an IT training lab, primarily in order to
evaluate the course and obtain feedback from participants. Future versions can easily
be incorporated into WebCT, the chosen virtual learning environment (VLE) at
UCLAN.
7.1 Learning Theories
There are numerous learning theories. The ‘Theory Into Practice Database’ lists
dozens of such theories. [51]
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
35
7.1.1 Internet Based Learning
There are many benefits to Internet based learning [52]. It is flexible, students can learn
at times convenient to them and travel costs are substantially reduced. The student
can progress at his or her own speed and can complete the course material in any
order of their choosing.
However, not all students are suited for Internet-based education. Lack of motivation
can lead students to drop out, often because they feel isolated and lonely - they may
miss the personal interaction with other people. They may be worried about using
computer technology. The cost of computer equipment may also be a factor as will the
lack of technical support in the home.
The academic institution, and the course leader, may benefit from Internet-based
courses although there are problems as well.
Electronic information is cheap and easy to distribute; the cost of printing is
transferred to the student should they prefer printed materials. Accessible course
material can be viewed by students using a diverse range of computers and Internet
browsers. Material can be reused, re-packaged or archived.
Larger number of students can simultaneously take courses, a potential source of
revenue for the academic institution, and they are not limited by geographical
location. Electronic marking and evaluation is now possible substantially reducing the
course leaders’ workload.
On the other hand, many of the costs of setting up and developing online learning
courses are ’front loaded’; they need to be incurred before any income is generated.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
36
Many academic staff do not have the time, or incentive, to learn new technologies.
Problems with computer networks and unreliable equipment can prevent access to
course material.
Slow Internet connections can make some interactive multimedia applications too
slow for effective learning.
Internet-based technology allows students to learn according to their own learning
style. The use of images, multimedia, graphs, charts, audio, new programming
languages such as Mathematical Mark-Up Language (MML), Java applets etc. can be
combined to facilitate visual, aural, and kinesthetic learning styles.
NB. Visual learners learn by seeing, aural learners learn by hearing, kinesthetic
learners learn by touching and doing.
7.1.2 Open Learning
Maxwell has defined Open Learning as ‘a student centred approach to education
which removes all barriers to access while providing a high degree of learner
autonomy’. [53]
Internet-based learning supports the open learning concept by providing students with
the ability to connect to educational resources when it is convenient for them, and
allowing students to explore the educational resources in an order that suits their
needs. In an open learning environment the teacher acts as a tutor, facilitator, and
resource to assist in the student's learning process. [54]
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
37
7.1.3 Situated Learning
Internet based learning encourages Situated Learning [55]. Situated Learning Theories
argue that learning is a function of the activity, context and culture in which it occurs.
This contrasts with much classroom learning activities which involve knowledge
which is abstract and out of context. Social interaction is a critical component of
situated learning because learning requires social interaction and collaboration. In the
AFA course users will actually build a real Website using real tools and real software.
Social interaction will occur naturally as students help each other. Ultimately users
will be able to rely on the help of the course leader.
7.1.4 Constructivism
The Constructivist Principles of Bruner [56] will also be embedded within the course.
A major theme in the theoretical framework of Bruner is that learning is an active
process in which learners construct new ideas or concepts based upon their current
and past knowledge. The learner selects and considers information from various
viewpoints, constructs hypotheses, and then makes decisions whilst relying on mental
models to do so. Constructivism allows users to experiment and learn without the fear
of failure. AFA users will be encouraged to employ constructivist principles
throughout the course.
7.2 Learning Styles
Students have different learning styles depending on their characteristics, strengths
and personality. Some students learn visually, others by hearing, still others
kinesthetically. The AFA project aims to take account of the different student needs
and approaches to learning. The goal is to ‘teach around the cycle’, that is, ensure
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
38
that the learning materials in the AFA project cater for the needs of each type of
learning style.
Felder [57] considers various learning style models and concludes that, whichever
model is chosen, the learning needs of each student can be met if the correct teaching
strategy is followed. I will consider three models.
7.2.1 The Myers-Briggs Type Indicator (MBTI)
According to the MBTI model students may be:
1. extraverts who try things out or introverts who think things through;
2. sensors who are practical and focus on details and facts or intuitors who are
imaginative;
3. thinkers who are logical or feelers who tend to make intuitive decisions;
4. judgers who make and follow lists or perceivers who adapt to changing
circumstances.
These ‘types’ can be combined to form 16 different learning styles. For example, one
student may be an introverted sensor who feels and perceives; another may be an
extraverted intuitor who thinks and judges.
7.2.2 Kolb's Learning Style Model
This model classifies students as preferring to take information in via concrete
experience or abstract conceptualization, and then apply the information via active
experimentation or reflective observation. The four types of learners form a matrix as
follows.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
39
1. Type 1’s are concrete reflectives. Type 1’s want to know ‘why’ things are as
they are and want explanations of how course material relates to them.
2. Type 2’s are abstract reflectives. Type 2’s enjoy reflecting on clearly
presented, logical information.
3. Type 3’s are abstract actives. Type 3’s prefer a hands-on approach to
learning.
4. Type 4’s are concrete actives. Type 4’s prefer to apply information in new
ways to solve real problems.
7.2.3 Felder-Silverman Learning Style Model
This model takes a similar approach to the MBTI model and classifies students as
either:
1. sensing learners who prefer facts, or intuitive learners who are innovative;
2. visual learners who prefer diagrams and charts or verbal learners who prefer
textual explanations;
3. inductive learners who prefer specific content to be presented before general
background information or deductive learners who prefer background
information first and then specific information;
4. active learners who learn by trying things out, often in groups, or reflective
learners who learn by thinking things through and may prefer to work alone;
5. sequential learners who prefer to work through material in a linear fashion or
global learners who take a ‘big picture’ view.
These types can be combined as in the MBTI model.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
40
7.3 AFA Course Strategy
The AFA course material should be presented using the following strategy. This
strategy is based on the Felder-Silverman Learning Style Model.
Each accessibility problem should be described before providing coded examples.
The same material should be presented in various ways to meet the needs of intuitive
and sensing learners. For example, images, charts and other diagrams should be used
as well as textual explanations of accessibility problems.
When problems are numeric, for example when dealing with browser window sizes or
download speeds, a written example should be provided rather than just the theory.
Real-life or real world examples should be used rather than abstract models whenever
possible. Occasionally students should be challenged to find the solution to a problem
before the definitive answer is provided.
The course leader should encourage the students to think about alternative solutions or
new problems created by the solving of the original problem. Students should be
encouraged to question the course leader. The course leader should always be in a
position to justify his answers and should also be open to new solutions.
A number of group-work activities should also be incorporated into the course.
The AFA course will be constructed in such a way that the users can complete the
course in a linear fashion. However, the advantage of Internet based learning is the
concept of hyper-linking. Students can complete the course in a non-linear fashion
and indeed, depending on the WCAG compliance level they are aiming for may
choose to skip parts of the course.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
41
7.4 Summary
The AFA course is an ideal subject for an Internet based course. The diverse learning
styles of users can easily be accommodated via the Internet. The concept of open
learning using situated learning and constructivist principles is well suited to AFA.
To cater for all types of learners, the AFA course should explain the relevance of each
new accessibility topic, present the basic information and coding methods associated
with the topic in a variety of ways, provide opportunities for individual and group
practice in the methods, and then encourage users to explore the topic for themselves.
8.0 Accessible Web Site Resources
I have ascertained that FE and HE institutions have a legal obligation to produce
accessible online material and have defined precisely what an accessible Web site is.
I have also identified various groups of disabled users and the problems faced by
these groups when attempting to browse the Internet.
I will now consider what other learning resources are available to help Web
developers to create accessible Web sites.
There are literally thousands of Web sites with Web accessibility related information -
a search for ‘Web Accessibility’ on Google produced 425,000 results [58].
Unfortunately there are only a few books on the subject, perhaps because this subject
has only recently come into the public eye. Consequently, and perhaps surprisingly,
there are very few good Web accessibility resources which deal with the actual
creation of accessible Web sites. The majority of the sources are heavily slanted
towards compliance with Section 508 of the US Rehabilitation Act 1973.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
42
8.1 Books
Web Accessibility for People with Disabilities [59] was probably the first book on the
subject following the launch of the Web Accessibility Initiative (WAI). The book
contains tips, tools, guidelines and HTML coding techniques to help make Web sites
accessible. The book also contains lots of useful accessibility related links from Web
sites all over the world.
Constructing Accessible Web Sites [60] has been written to enable Web developers to
create and retrofit accessible Websites quickly and easily. Whilst the objectives are
laudable the reality may not be quite so simple.
The book discusses the technologies and techniques that are used to access Websites
and many disability related legal guidelines, both in the US and around the world.
The main body of the book is concerned with making Web sites and their content
accessible. Sections include testing methods, development tools, and advanced coding
techniques. The book also contains a useful checklist for creating accessible Web
sites.
Maximum Accessibility [61] is another excellent book, similar to the above mentioned
books. One of the authors, John Slatin, writes from personal experience as he is
legally blind.
8.2 Web Sites
The ‘Curriculum for Web Content Accessibility Guidelines 1.0’ [62] compiled by the
W3C WAI, comprises 4 main sections known as ‘sets’.
1. An Introductory section - "The Introduction Set";
2. Guidelines for Web Content Accessibility - "The Guideline Set";
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
43
3. Checkpoints for meeting the Guideline requirements - "The Checkpoint Set";
4. Examples for implementing the Checkpoints - "The Example Set".
This course comprehensively deals with each of the 14 WCAG guidelines and 65
checkpoints. However, the course is written in HTML rather than XHTML and
contains some poorly written code.
For example, the mark-up example for Checkpoint 5.1: the use of the ‘TH' element in
a TABLE uses the following code as an example. [63] The table contains several errors
and omissions. (The lines are numbered to aid my comments)
1. <TABLE border=1>
2. <CAPTION>Example of a simple data table created using HTML
markup. </CAPTION>
3. <TR>
4. <TD></TD>
5. <TH>Col. 1 header</TH>
6. <TH>Col. 2 header</TH>
7. </TR>
8. <TR>
9. <TH>Row 1 header</TH>
10. <TD>C1R1</TD>
11. <TD>C1R2</TD>
12. </TR>
13. <TR>
14. <TH>Row 2 header</TH>
15. <TD>C2R1</TD>
16. <TD>C2R2</TD>
17. </TR>
18. </TABLE>
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
44
The first error is found on line 1. The code border=1 is missing quotation marks – it
should read border=”1”. The second error is found on line 4. Line 4 contains an
empty table cell which can cause problems when viewed using Netscape browsers.
The table does not contain the <thead> or <tbody> tags. These tags aid non-visual
users by providing structural information about the table.
The table tags are all in UPPERCASE which means that the page will not validate in
XHTML – tags should be lowercase.
Technically speaking this page would work in most modern browsers – they are
forgiving of errors and generally present the page OK. However, many of the new
browsing technologies would have problems with this code.
Jim Thatcher, one of the authors of Constructing Accessible Web Sites, has produced
an online Web accessibility course entitled ‘Web Accessibility for Section 508’. [64]
As the course title suggests this resource is heavily slanted towards American
legislation. As previously mentioned, compliance with American legislation would
not meet the needs of SENDA. (See Section 2.6) This course explains the problems
faced by disable Web users and provides contains numerous HTML code examples
for developers to follow.
The JISC funded Techdis service has produced a learning resource entitled ‘Seven
precepts of Usability and Accessibility’ [65]. The seven precepts cover a range of
usability and accessibility issues and each is accompanied by a short description. Each
precept is linked to detailed information about the concepts and coded examples are
provided to show Web developers how to apply the concepts to their Web site.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
45
The seven precepts concern: -
1. Navigation and page layout
2. Visual presentation and customisation
3. Text descriptions for images
4. Accessible mark-up: forms, lists, scripts and tables
5. Use and presentation of written language
6. Accessible issues for other media types
7. Help, searches, errors and documentation
The precepts are NOT mapped to the WCAG guidelines and deal with accessibility
issues in isolation.
8.3 Summary
All of the six Web accessibility resources mentioned are excellent and deal with Web
accessibility in depth. However, they tend to deal with accessibility problems in
isolation taking a ‘example and guideline approach’.
It is my submission that the AFA project is unique in terms of creating accessible
Web sites. The primary aim of the AFA project is to provide a total Web accessibility
solution within the context of a single site rather than using examples from different
sources to highlight particular problems. No other learning resource fulfils this aim.
9.0 User Needs Analysis
It was decided to perform two user needs analysis (UNA). The AFA project consists
of two distinct parts. Part 1 is the actual training course; part 2 contains the ‘bad’
Web site and the retro-fitted accessible site. The training course and the retro-fitted
Web site require the users to be able to perform quite distinct tasks. A UNA is not
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
46
required for the ‘bad’ Web site. The whole point of the bad site is that it is not
accessible to users and therefore the needs of the users are not material.
9.1 AFA Course Participants
9.1.1 User Groups
The primary user group consists of Web developers based in FE and HE institutions
as well as administrative staff with a responsibility for Web development.
Secondary user groups include managers or accountants based at the academic
institutions of the primary users who may wish to purchase the course, should it be
made available for sale. Other groups will consist of Web developers based in
commercial organisations.
9.1.2 Primary User
Age: 18+ years of age
Language: Basic English – English may not be the participant’s first language but it
is still the main (only) language used for teaching in British universities.
Education: Assumed that the participants have been educated up to age 16. Many
academic institutions insist that staff are educated to degree level but Web developers
are often employed for their skills rather than their academic qualifications. It is
assumed that participants can read, although the completed course could be read out
to the participant using AT.
Culture: We live in a multicultural society. Participants are likely to be from a wide
variety of cultures and backgrounds.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
47
Disability: Paradoxically, disability is not a factor because it is envisaged that the
course material will be available in various forms. Participants will be able to choose
from an online version, a printed version and an electronic version in various file
formats.
Computer Experience: The participants will not need any computer experience per
se to read the course material. In order to complete the course, it is assumed that
participants will be familiar with using a mouse and keyboard and have previous
experience of using computer software. It is also assumed that participants will have
a basic understanding of HTML including the use of tags and attributes.
Motivation: As previously mentioned in Section 7.0, the most common motivation
for learning is that there is ‘an anticipated use or application for the skills learned’.
Participants may also be motivated by the fact that they could potentially command
higher salaries due to their increased skill-set. Participants may also be concerned
with the potential implications of SENDA; in particular whether they are personally
liable should they build an inaccessible site. Completion of the course may well
provide peace of mind.
9.1.3 Environment
The course will primarily be designed to be delivered on the UCLAN network in the
Learning Development Unit (LDU) training suite. The LDU training suite consists of
twenty high specification computers and can become quite noisy at times. The
maximum duration of the course should be one day.
It is envisaged that participants may wish to complete the course in their own home
via distance learning. Distance learners can complete the course according to their
own time frame.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
48
9.1.4 Hardware
The minimum hardware requirements are based on the configuration of a typical
home computer user and the standard system requirements for Macromedia
Dreamweaver. [66] (see Section 11.4)
• Intel Pentium II processor or equivalent 300+ MHz
• 128 MB Ram
• 2GB Hard Drive
• 8 x CD Rom Drive
• Floppy Disc Drive
• 15” Colour Monitor capable of 800 x 600 resolution
• Windows 98 operating system or better
• Netscape Navigator or Internet Explorer 4.0 or greater
• Colour Printer
• Keyboard and Mouse
9.1.5 User Tasks / Learning Objectives
1. Understand the problems faced by disabled people using the Internet, these are
known as ‘barriers to access’.
2. Understand how Web developers can code their Web pages to remove these
barriers to access. Specifically users will learn about:
1. Templates
2. Cascading Style Sheets
3. Document type definitions
4. Non-textual content
5. Tables
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
49
6. Forms
7. Page structure
8. Meta data
9. Keyboard controls
10. Accessible content
11. Identifying the language of a document, or changes in the natural
language
12. The benefits of relative size units rather than absolute sizes
3. Have an understanding of usability issues.
4. Have an understanding of Web design issues.
5. Understand how Web pages can be validated to check for compliance with
disability legislation using automated software.
6. Perform a series of tests and checks to identify potential problems not
highlighted by automated checkers.
7. Have an understanding of the WAI and WCAG.
8. Learn how to use a WYSIWYG Web editor.
9.2 AFA Retro-fitted Web Site
According to our definition of an accessible Web site in Section 3.0, the retro-fitted
site must be accessible to ‘anyone using any kind of Web browsing technology...’
Our primary user group is therefore anyone and everyone. The primary user is
anyone regardless of age, language, education, culture, disability, computer
experience or motivation.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
50
The user should be able to access the course from any environment, the only computer
requirements are that the user has Internet access and some form of Web browser.
9.2.1 Users Tasks / Learning Objectives
Again, according to our definition of Web accessibility in Section 3.0 our user, that is
anyone and everyone, should be able to get a ‘…full and complete understanding of
the information contained there, as well as have the full and complete ability to
interact with the site.’
10.0 Web Site Project Management
As mentioned in Section 8.3 the AFA project is unique and does not fit in with
traditional software engineering models. However, traditional models are tried and
tested and provide useful guidelines which may be applied in a Web-based project
setting.
10.1 Waterfall
The Waterfall model is a highly structured approach to project development.
Conventional software engineering is based on the assumption of a more or less
sequential development process [67]. The developer plans a number of project
development stages which are completed in a linear fashion. Upon completion of one
stage, the designer moves on to the next stage without having the opportunity to return
to previous stages. This method assumes that the developer is able to specify the
whole project in its entirety before commencing.
The uniqueness of the AFA project precludes the use of the Waterfall method. There
are no other Web sites which can be used as a template for the AFA project.
Additionally, there is not a definitive way of creating an accessible Web site. The
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
51
AFA project will evolve by a series of ‘trial and error’ prototypes which will be
refined following user testing and feedback.
10.2 System Assembly from Reusable Components
This method utilises the fact that many systems consist of a number of pre-existing
components which can be reused. This has the benefit of increasing productivity,
quality, reliability and, in the long-term, decreasing software development costs [68].
The principles outlined in this method can be implemented in the AFA project. The
main navigation and footer information could be included in a reusable template. The
developer can make the template fully accessible; pages based on the template will be
automatically accessible as well.
10.3 The Dynamic Systems Development Method
A fundamental assumption of DSDM is that nothing is built perfectly first time, but
that a usable and useful 80% of the proposed system can be produced in 20% of the
time it would take to produce the total system [69].
DSDM combines iterative prototyping and user participation. Unlike the Waterfall
method, DSDM allows previously completed sections to be changed in response to
user input. In terms of the AFA project, the users may not fully understand the
accessibility issues but they can provide useful feedback on the actual training
material.
10.4 Prototyping
A prototype is ‘a preliminary type, form, or instance of a system that serves as a
model for later stages or for the final, complete version of the system’ [70].
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
52
There are basically two types of prototype used when developing Web-based projects
although the terminology can be confusing. One approach is to produce a ‘proof of
concept’ [71] throwaway prototype. This prototype is quickly constructed without the
developer needing to worry about coding problems, download times, image
optimisation and so on. A throwaway prototype is a non-functional mock-up that is
used to illustrate how a fully functional system will look or operate but which is not
intended to evolve into a fully working system.
The second option is to create a beta version of the final site including many of the
final design specifications, an ‘evolutionary prototype’. This prototype is intended to
form the basis of a fully functional working system and is a low quality version of the
final product.
10.5 Summary
Elements of each of the methods discussed, with the exception of the Waterfall
method, were used in the creation of the AFA project. Reusable components were
used in the creation of an evolutionary prototype, user feedback was then sought and a
further prototype built and tested. The final AFA version was then constructed.
11.0 Comparison of Web Authoring Tools
There are a numerous Web authoring tools for constructing Web sites. These range
from simple Text Editors such as Notepad [72] or BBEdit [73] to WYSIWYG editors
such as Macromedia Dreamweaver MX [74], Microsoft FrontPage 2002 [75] or Adobe
GoLive 6 [76].
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
53
The final choice of software to create the AFA project is dependent on a number of
factors including the availability of the software on the UCLAN network, the
suitability of the software for the task in hand, and resources available in the event of
problems.
The text editors were quickly discounted for two main reasons. Firstly, many of the
prospective course participants would not be ‘fluent’ HTML coders; secondly the
time taken to hand-code a complete Web site would be prohibitive. Participants
should be able to complete the AFA course in one day.
A brief comparison of the three WYSIWYG Web authoring tools now follows. It is
interesting to note how the three software developers argue how their product is
superior to the others using selective feature comparisons and case studies. [77]
11.1 Macromedia Dreamweaver MX
Dreamweaver MX is one of the Macromedia Studio MX products. It is tightly
integrated with Fireworks, Flash and Freehand; each program uses the same panel
management system and user interface. The whole user interface is XML based and
therefore customisable.
Dreamweaver MX is the result of combining Dreamweaver and UltraDev. This means
that it is easy to create dynamic, database driven, Web sites using ASP, ASP.NET,
JSP, PHP or Cold Fusion. This ability is better than the same feature in GoLive 6,
where the application installs the dynamic application on the server itself.
Dreamweaver connects to the server faster than GoLive 6.
Dreamweaver now has a number of sample designs and pieces of reusable code called
snippets. This is in response to GoLive which has had these features for some time.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
54
Dreamweaver allows designers to create conditional nested design templates.
Incidentally, GoLive Web design templates are compatible with Dreamweaver,
The site definition wizard is OK for beginners but it is better to set up Web sites
manually.
Code Hints are an excellent new feature, especially for new HTML coders and those
developers who prefer to work in code view. Bradsoft TopStyle [78] can also be
integrated with Dreamweaver enabling designers to see the affects of CSS changes in
real time. Dreamweaver allows designers to easily code XHTML and includes an
automatic HTML to XHTML converter.
A major new feature is the built-in Web Accessibility checker. Accessibility code
prompts when inserting images, forms, frames and tables also aid developers.
In terms of help Dreamweaver is excellent. A number of reference libraries are
integrated within the product including HTML, CSS and JavaScript. Additional
support can be obtained via a newsgroup, [79] which has more than 395,000 messages,
and a plethora of online tutorials.
Dreamweaver can be extended using extensions. An extension is a piece of software
that can be added to Dreamweaver to enhance the application’s capabilities. There are
hundred’s of predominantly free extensions available. Developers can also write their
own extensions if necessary.
11.2 Microsoft FrontPage 2002
FrontPage 2002 uses the WYSIWYG simplicity of the word processor to creating
Web pages. Each new release becomes more and more like the other Microsoft Office
products.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
55
Its’ primary market is users who do not know much about HTML. Web developers
can create quite sophisticated sites without any HTML coding knowledge. For
example users can easily add discussion board or e-commerce functionality. In order
to take advantage of many of the features of FrontPage the Web server must support
FrontPage Server extensions.
New collaboration features make it easy for groups of people to work together on a
site.
FrontPage keeps track of the relationship of the files on your computer and those on
the server allowing easy site synchronisation. Usage Analysis Reports interrogate
server log information to create a variety of visitor reports using charts and graphs if
required.
FrontPage 2002 has several tools, similar to PowerPoint’s drawing tools, which can
generate shapes, word art, etc using Vector Markup Language (VML).
The Automatic Web Content adds dynamic content, such as news headlines from
MSN, to your site.
The main complaint about FrontPage is the actual proliferation of non-accessible
HTML code generated by the program. It is extremely difficult to edit, especially for
non-HTML coders, and will not validate properly.
Web developers with basic requirements who do not wish to learn HTML will find
FrontPage a useful program but it is not suitable for the AFA project.
11.3 Adobe GoLive
GoLive looks like other Adobe products making it easy to switch between
applications. In particular Adobe has integrated GoLive more closely with Photoshop
and Illustrator. The main editing windows float on the GoLive worktop, with palettes
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
56
of functions controlling the tools. Users can now drag and place individual palette
tabs at the edge of the screen.
GoLive users have access to approximately seventy extensions. Unlike Dreamweaver,
if the program cannot do something, developers cannot write their own extensions.
The site management features are good. In particular the revision list gives details of
changes made to files in the site.
The Web Workgroup Server site management and collaboration tool lets multiple
users share and manage files and track changes. The version control and side-by-side
comparison capabilities include the ability to roll back to previous versions a la
Macromedia Contribute.
Other features include a QuickTime 5.0 editing environment, with streaming
conversion and optimisation capabilities, and the ability to deliver database-driven
content. However, this support is not integrated as in Dreamweaver but is a simple
text editor. GoLive does not include integration with BBEdit which may be
inconvenient for Apple Mac users.
GoLive will not preview external style sheets and cannot process Server Side
Includes.
11.4 Software Chosen
Dreamweaver was an easy choice of software for the AFA project. GoLive is not even
on the UCLAN network whilst FrontPage generates inaccessible HTML code.
The sheer volume of online Dreamweaver tutorials, a fully searchable newsgroup, and
the built-in reference manuals, provide the answer to virtually any Web-related
question or problem. The ability to create extensions and customise the user interface
adds to the functionality of Dreamweaver.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
57
The code created by Dreamweaver is clean and validates well. The only proprietary
code created by Dreamweaver is when the built-in JavaScript functions are used.
In a comparison between Dreamweaver, FrontPage and GoLive, Dreamweaver was
the only program which created valid XHTML markup. (See Appendix D)
12.0 AFA Web Site Guidelines
To a certain extent the following guidelines for the AFA Web site are irrelevant. The
underlying principle is that a disabled user can customise a Web site to suit their own
specific needs. In effect, it is irrelevant if the font is Arial or Times New Roman, blue
or green, large or small, etc. The user, using their chosen Web browsers’ preferences,
can select their own font settings. See Appendix G for full details on how to
customise the main Web browsers.
One of the goals of the AFA project is to train developers to create both accessible
and usable Web sites. Therefore it is important that design guidelines are followed in
order to teach good practice. It is irrelevant if users choose to customise their Web
browsing experience, the underlying Web site must still be created properly.
The following guidelines refer to how the retrofitted site should look after the bad site
has been corrected.
12.1 HTML
As has been previously mentioned, compliance with SENDA necessitates that Web
pages comply with the WCAG Guidelines. The prototype would include numerous
examples of incorrectly coded page elements or objects. Each element would
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
58
therefore break the WCAG guidelines. A full discussion of the WCAG guidelines
follows.
12.1.1 The World Wide Web Consortium
The World Wide Web Consortium (W3C) is an international industry consortium
jointly hosted by the MIT Laboratory for Computer Science in the USA, the National
Institute for Research in Computer Science and Control in France, and Keio
University in Japan. There are 450 member organizations of the Consortium. [80]
The W3C was created to lead the Web to its full potential by developing common
protocols (standards) that promote its evolution and ensure its interoperability
between WWW products.
The W3C provides a number of services including a collection of World Wide Web
resources for developers and users, reference code examples to represent and promote
standards and various prototype and sample applications to demonstrate use of new
technology.
12.1.2 The Web Accessibility Initiative (WAI)
The W3C are committed to the disabled and formed the WAI to promote Web
accessibility. The WAI is pursuing accessibility of the Web through five primary
areas of work:
1. addressing accessibility issues in the technology of the Web;
2. creating guidelines for browsers, authoring tools, and content creation;
3. developing evaluation and validation tools for accessibility;
4. conducting education and outreach;
5. tracking research and development.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
59
12.1.3 Web Content Accessibility Guidelines (WCAG)
There are two versions of WCAG. WCAG 1[81] contains a total of 65 guidelines;
WCAG 2 has reorganised and combined many of the WCAG 1 guidelines to create 21
new ones.
There are 14 main WCAG guidelines as follows: -
1. Provide equivalent alternatives to auditory and visual content.
2. Don't rely on colour alone.
3. Use mark-up and style sheets and do so properly.
4. Clarify natural language usage
5. Create tables that transform gracefully.
6. Ensure that pages featuring new technologies transform gracefully.
7. Ensure user control of time-sensitive content changes.
8. Ensure direct accessibility of embedded user interfaces.
9. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.
More detailed information is given in Appendix C. Each guideline has a one or more
‘checkpoints’ that developers need to consider to ensure the accessibility of a Web
page. Each checkpoint has a priority level based on its impact on accessibility.
The WCAG provides a number of examples and techniques to help developers to
implement the guidelines.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
60
12.1.4 WCAG Priorities
There are 3 WCAG priority levels. [82] Compliance with the recommendations of each
level ensures greater accessibility of Web pages. The ‘Access for All’ project aims to
enable Web developers to produce WCAG AAA compliant sites.
12.1.4.1 Priority 1
Web developers MUST satisfy these checkpoints or some groups of people will find it
impossible to access information on their site. This is considered to be the absolute
minimum level of compliance.
12.1.4.2 Priority 2
Web developers should satisfy these checkpoints or some groups of people will find it
difficult to access information on their site. This is considered to be the preferred level
of compliance.
12.1.4.3 Priority 3
If Web developers satisfy these checkpoints the majority of users will be able to
access ALL of the information on their site. This is considered to be the optimum
level of compliance.
12.1.5 WCAG Conformance
The WCAG guidelines have three levels of conformance. [83]
1. Conformance Level "A": all Priority 1 checkpoints are satisfied. This is
known as WCAG A compliant.
2. Conformance Level "Double-A": all Priority 1 and 2 checkpoints are
satisfied. This is known as WCAG AA compliant.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
61
3. Conformance Level "Triple-A": all Priority 1, 2, and 3 checkpoints are
satisfied. This is known as WCAG AAA compliant.
12.1.6 Browser Specifications
Normally when creating a design specification Web server logs are examined to
ascertain the types of browser equipment and configuration used by site visitors. As
mentioned previously, the AFA project must cater for the needs of all users using all
types of browser software.
For the sake of completeness Appendix E contains the latest browser statistics. In
summary, there are more than 300 million Internet users worldwide. Over 90% of
them use Internet Explorer 5.x or better; 96% use a screen resolution of 800x600
pixels or larger; over 90% use Windows 98 or better; 64% now use a 56K modem or
better to connect to the Internet, and 90% use a monitor with a colour depth of 16-bit
or better.
12.1.7 Dept of Physics, Astronomy & Mathematics
It is perhaps more relevant to consider the types of users who visit the UCLAN Web
site. A survey of the Department of Physics, Astronomy and Mathematics (DPAM)
Web site was undertaken on behalf of the UCLAN Web Strategy Group in September
2001 and updated in March 2003. A summary of the findings are shown in Appendix
F. A typical visitor to the DPAM Web site originates from the United Kingdom, uses
Windows 98 or better, and browses using Internet Explorer 5.x or better. This is based
on an average hit rate of approximately 200 per week although there are clear
seasonal fluctuations [84]. These findings are consistent with the worldwide statistics
mentioned in Section 12.1.6.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
62
12.1.8 Summary
The AFA retro-fitted Web site will be coded to comply with WCAG 1 and have a
‘Triple-A’ conformance level. The course notes will provide a step-by-step guide,
enabling Web developers to produce technically accessible sites. Each developer can
choose to create Web sites compliant with any of the three conformance levels.
12.2 Colour [85]
Colour vision deficiency reduces the user’s ability to discriminate between colours on
the basis of three attributes; hue, lightness and saturation. Designers can help to
compensate for these deficits by making colours differ dramatically in all three
attributes.
Partial sight and congenital colour defects produce changes in perception that reduce
the visual effectiveness of certain colour combinations. Two colours that contrast
sharply to someone with normal vision may be far less distinguishable to someone
with a visual disorder.
The differences between the background and foreground colours must be exaggerated
and colours of similar lightness must be avoided, even if they differ in saturation or
hue.
Figure 1: Background Contrast
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
63
It is safe to assume that people with vision problems will see less contrast between
colours than a normally sighted person. The greater the difference between the light
and dark colours the more accessible will be the finished design.
Dark colours from the bottom half of the hue circle should be contrasted against light
colors from the top half of the circle. However adjacent colours should be avoided,
especially if the colours do not contrast sharply in lightness. For example, orange/red
or blue-green/blue should be avoided.
Figures 2–5: Hue Circles and Background Contrasts
Based on the above analysis the choice boils down to using violet/yellow,
orange/blue, red/blue-green or green/purple, being opposites in the hue circle.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
64
Red/blue-green or green/purple were discounted because of the incidence of red/green
colour blindness.
It should also be remembered that many users still use monochrome monitors. The
following images show how difficult it is to distinguish between orange and blue
when they are converted to grayscale.
Violet and yellow are an effective combination, even with monochrome monitors but
even this combination causes a problem for some dyslexics.
Figure 6: Greyscale Contrast
The final combination chosen was black text on a white background. White and black
are at the opposite ends of the colour spectrum although technically they are not
colours. As already mentioned, users with various vision difficulties could easily
customise the colour scheme to suit their needs.
12.3 Content
In Section 6.0 I considered the barriers to access faced by various groups of users. The
following guidelines will be implemented to cater for these users.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
65
12.3.1 The screen layout will be consistently formatted
According to Detweiler and Omanson [86], the more consistent a Web site is in its
design, the easier it will be for users to navigate. Users, particularly older users, tend
to learn and remember the location of key functions and controls.
Screen layout includes logos, navigation buttons and footer information. Putting the
logo in a consistent place on every page ensures that users are fully aware that they
are on the same site.
12.3.2 Page sizes will be limited to 30K
As Appendix E5 shows, 36% of Internet users still use modems with connection
speeds of 33K or less. Pages will therefore be kept to a maximum of 30K ensuring
download times of less than ten seconds for these users. Visitors may not wait for
pages to load if they take too long to download [87].
12.3.3 Frames will not be used
Frame-based sites can be confusing for the visually disabled, particularly those using
screen readers or speech browsers - users can easily become disorientated.
Additionally, users cannot easily bookmark individual pages within a frame-based
site.
12.3.4 Paragraphs and sentences will be kept short
Readability improves when sentences and paragraphs are kept relatively short. Users
tend to scan Web pages and will often skip over large chunks of text [88].
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
66
12.3.5 Each page will have a descriptive and different
title, a clear heading and logical structure
Titles are used by search engines to identify Web pages, if two or more pages have the
same title, they cannot be differentiated by users. Each page will also have clear and
helpful headings. Pages will be structured logically.
12.3.6 Font Guidelines
Font tags will not be used; instead Cascading Style Sheets will format the Web pages.
Fonts will be the equivalent of size 12pts to enhance reading performance [89].
Research has shown that there is no noticeable difference in reading speed or user
preferences between Times New Roman, Georgia or other serif fonts and Helvetica,
Verdana or other sans-serif fonts [90].
12.3.7 Links will be clearly identified
Blue underlined text will be used for all links. Some users miss links because the text
is not underlined. Research shows that users can easily find links which include
visual cues, that is, links that are underlined, rather than having to move the mouse to
see when the pointer changes to a hand (this is known as mine sweeping). Links will
not be designated with the text click here. Some screen readers can be set to read out
a list of links on a particular page; a list of click here links is not helpful [91]. Visited
links will be designated using a different colour. Many users use link colours to
identify which parts of a site they have already visited [92].
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
67
12.3.8 Pages will be fluid/flexible
As shown in Appendix E3 users browse the Internet using a variety of screen
resolutions. Pages will be designed to expand or contract according to the user’s
settings, thus preventing horizontal scrolling. Horizontal scrolling is a particular
problem for screen reader users because the screen reader does not automatically
scroll horizontally – users may miss important content.
12.3.9 Pages will be device independent
Not all users navigate Web sites using a mouse - many disabled users use AT. All
users will be able to navigate the site using the input device of their choice.
12.3.10 Content will comply with Plain English
Guidelines
As discussed in Section 6.4, all text will be left-justified, active verbs will be used
rather than passive verbs and there will be no flashing or moving text. Everyday
English will be used instead of terminology and there will be no background images
or music.
13.0 Creating the AFA Evolutionary Prototype
It was decided to produce an evolutionary prototype. The prototype would confirm
that the underlying project concept was viable, that is, produce and then retro-fit a
fundamentally bad Web site. Upon completion of the course participants should be
able to create an accessible Web site.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
68
The author was scheduled to undertake two weeks training at California State
University, Fresno, in January 2002. The AFA prototype was developed in order that
it could be tested by volunteers from Fresno. Recommendations and evaluations
would be considered and iterative prototyping, including the use of reusable parts
(templates), would commence.
The aim was to create a sufficient number of pages to cover each of the fourteen main
WCAG guidelines.
13.1 Splash Screen – index.htm
A flash-based splash screen was created to demonstrate the total inaccessibility of
such pages to the visually disabled. The animation is a very simple introduction to the
work of the Learning Development Unit (LDU), the sponsors of the AFA project. The
animation contains a skip movie link which is embedded within the movie. The
visitors are invited to press the red button to enter the site.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
69
Flash is classed as multimedia. As such, an audio transcript of the animation and a
text alternative should be provided (WCAG 1.3 - Priority 1) - the actual animation
contains neither. The invitation to press the red button violates the principle that key
information is not colour based (WCAG 2.1 – Priority 1). Visitors with colour
blindness may not be able to identify the red button.
The main problem with Flash is that screen readers cannot automatically read the text
contained within the animation. In fact the text is not text at all – it is actually a
graphic of some text. In effect the animation consists of a totally blank page as far as
the visually disabled are concerned.
The normal way to cater for the visually disabled is to create a ‘skip movie’ link. In
effect the visually disabled are prevented from enjoying the same experience as other
visitors.
In the corrected version of the site this page is simply deleted – it adds nothing to the
Web site and actually prevents the visually disabled from entering the site at all. Other
users who choose not to install the Flash plugin are also prevented from entering the
site – there are no alternative text links.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
70
13.2 Template – Main.dwt
Template based sites allow web developers to quickly and easily create new Web
pages. A template consists of page content which is on every page in a site, thus
ensuring that the navigation system is consistent (WCAG 13.4 – Priority 2). This
content will generally include the main navigation system, logos and footer
information.
If the template is accessible then pages based on the template will also be accessible
as far as the navigation system is concerned. Of course the actual page content will
also need to be made accessible.
The ‘bad’ site is based on a template although the template is not very good. As a by-
product of learning to create accessible Web sites the course participants are taught to
create and use templates within the Dreamweaver authoring environment. This
significantly increases productivity and teaches the Web developer to ‘work smart’.
The template contains a background image which prevents users from reading the
text. There is insufficient contrast between the text and the image (WCAG 2.2 –
Priority 2). Paradoxically, the visually disabled would be able to get a better
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
71
understanding of this page than sighted visitors because a screen reader or speech
browser would read out the text. The background image should be removed.
The next stage was to create a link to an external style sheet. Style sheets separate the
presentation (or format) of a document from its content (or structure). The visual
presentation of a Web page can be formatted with style sheets while the structure of
the document is based on HTML (WCAG 14.3 – Priority 3). Site-wide formatting
alterations can easily be made by altering the style sheet – again working smart. It is
easy to remove the link to the style sheet so that developers can view how Web pages
look when not formatted (WCAG 6.1 – Priority 1). The FONT styles were set in the
style sheet using relative rather than absolute sizes (WCAG 3.4 – Priority 2). This
ensured that users could resize text within the site to suit their own preferences.
A Document Type Definition (DTD) was next to be added to the template. A DTD is
a document that defines a formal, machine-readable standard for HTML. It determines
exactly what is, or is not, allowed in HTML and tells the validator how to check (or
parse) an HTML document for errors (WCAG 3.2 – Priority 2).
Next, the language of the document was added (WCAG 4.3 – Priority 3). The LANG
attribute specifies the language of the actual page content. The LANG attribute is not
widely supported at the moment although the IBM Homepage Reader has special
speech synthesizers which allow foreign language text to be read out according to the
pronunciation rules of the particular language. This opens up wonderful possibilities
for visually disabled visitors whose first language is not English and, perhaps, wishes
to learn a foreign language.
Although the LANG attribute is not widely supported at the moment adding it has the
benefit of future proofing pages to a certain extent. Future versions of browsers will
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
72
be able to recognise the attribute and process the content accordingly. Non-supporting
browsers will simply ignore the attribute.
The single most important thing Web developers can do to do to make Web pages
accessible is to include alternative text for all non-textual page content, especially
images (WCAG 1.1 – Priority 1). Alternative text benefits the many people who use
talking browsers, screen readers, text browsers or small handheld devices as well as
those users who prefer to browse without images.
The ALT text provides alternative or substitute text for use when the image is not
being displayed. The most common mistake (apart from not using it at all) is to
provide a description of the image, without considering what the image is doing on
the page. The ALT text should be an appropriate text alternative to the image;
sometimes this may be a description of the image, at other times this will be a
description of the images’ function.
The requirement for alternative text also applies to images that carry no information
like ‘spacer.gif’ (assuming that the spacer.gif is used just to fill in some space). Alt
tags should be kept to a maximum of 5 words. This prevents horizontal scrolling for
users of screen readers, which in turn prevents sentences from being truncated.
Certain images convey vital information that is an integral part of a page, for example,
a graph. Such images require a more detailed description than can be provided in 5
words. These images require the use of the LONGDESC attribute, which is covered
later in the course.
In the AFA site the layout was designed using tables. Whilst not the recommended
method of the W3C, it is possible, by adding a summary=’layout table’ (WCAG 5.5 –
Priority 3) to the <table> tag, to help users know that the table is merely used for
layout purposes (WCAG 5.3 – Priority 2). The layout table must be checked to ensure
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
73
that it linearises correctly. No structural tags were used for visual purposes (WCAG
5.4 – Priority 2).
Screen readers will eventually be able to read the table summary and this information
will enable the visually disabled to decide whether they want to access the table
contents. Table summaries can also help a person to interpret a particularly complex
or difficult table.
Some versions of Netscape contain a bug that may cause Web pages to display
incorrectly when the window is resized. Dreamweaver includes a piece of JavaScript
that automatically reloads the page whenever the window is resized. This is known as
the ’Netscape Resize Fix’. The fix was added to the page. In addition the following
code was manually added to the template in order for the page to validate properly:-
<script language="JavaScript" type="text/javascript">
The next stage was to add a 'skip navigation' text link immediately to the right of the
AFA logo. This allows users with a screen reader to jump straight to the page content
without having to listen to the navigation links being read out to them on each page
(WCAG 13.6 – Priority 3). The link will take them to a named anchor tag just before
the start of the main page content.
As the AFA logo is a link back to the home page this would mean that there are two
links immediately next to each other. This can cause problems to some screen readers
as they have a tendency to concatenate the links and they can become confusing.
Therefore the links need to be separated from each other by something other than
white space. The WCAG curriculum recommends the | symbol (WCAG 10.5 –
Priority 3). [93]
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
74
The named anchor was then added to the main body of the page. There are two
possible methods of doing this.
<A name="content"></A> or <A name="content">content</A>
The first option is to create a blank named anchor but some browsers will not
recognise them. If the second method is used, the word content will be visible on
screen. In the end the second method was used but the text was made invisible by
creating a special class which made the text the same colour as the page background.
A duplicate set of hidden text links were added to the bottom of the page to assist
screen reader users. This does not apply to the WCAG guidelines per se but it is a
useful additional help for visually disabled users. When a screen reader reaches the
end of the main content of the page these hidden links are a useful reminder of the
main navigational options. Each link was separated by a ‘|’ to prevent link
concatenation.
Next, the title attribute was added to each of the text links. This provides the
equivalent of a tooltip for text links (including email links) - rather like the tooltip
generated by the alt tag on an image. Again, this does not apply to the WCAG
guidelines per se but it is a useful additional visual prompt for users.
The final alteration to the template was the application of the ‘invisilinks’ class to
hide the skip navigation link, the content named anchor, and the duplicate navigation
links. Although the text is invisible to sighted users the screen reader will read out the
text in the same manner as any other text.
The template was then saved and the updates propagated throughout the rest of the
Web site.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
75
13.3 Home Page – home.htm (index.htm)
After clicking the red button on the splash screen animation visitors are taken to the
main home page. This page weighs in at 311K (including background image) which
would take 87 seconds to download with a 28.8K modem.
As a concession to the time limitations of the course this page is not as bad as it could
be. There are no FONT tags or attributes. It would take too long to go through the site
and remove dozens of font tags. For a discussion of the FONT tag see Appendix H.
This page also contains scrolling text using the deprecated marquee tag. Scrolling text
creates problems for many visitors. For example, users with cognitive difficulties or
people for whom English is not their first language may not be able to read the text
quickly enough. Screen reader users may end up in a sort of loop because the screen
reader repeatedly reads the text. Web pages should not include moving content
(WCAG 7.3 – Priority 2). The marquee should be deleted.
This same principle covers the four animated gifs on the page. Rapid movement can
cause some users to suffer epileptic seizures (WCAG 7.1 – Priority 1). It is unlikely
that the animated gifs are moving quickly enough to cause seizures but they do not
add anything to the page. For example they are not showing a process or theory. The
animated gifs can, and should, be removed from the page.
The large UCLAN logo serves no purpose; in fact it is duplicated as there is a smaller
version in the footer of the page. The logo should be removed.
By removing the background image (in the template), the large UCLAN logo, and the
animated gifs the page is now only 28K. This equates to a download time of less than
10 seconds.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
76
Finally, the page contains misused header tags. In HTML there are six levels of
header tags ranging from <h1> to <h6>. The text gets progressively smaller as the
header value increases. Many Web developers use the header tags as text modifiers
when they should be used to structure the document. The headers in the index page
were correctly formatted.
Following the deletion of the splash screen home.htm was renamed index.htm, the
default name for a homepage on the UCLAN server.
13.4 Accessible Tables – table.htm
In addition to those learned on other pages table.htm contains a number of new
techniques.
Clear writing aids all site visitors regardless of cognitive ability. Sentences should be
clear and concise because people with dyslexia have difficulty understanding complex
passages (WCAG 14.1 – Priority 1). Three examples of poorly written sentences were
copied from the Campaign for Plain English Web site [94]. Participants will be invited
to re-write the sentences, either individually or in groups, to produce more
meaningful, user-friendly content.
There are no specific guidelines for creating and wording links. It makes sense to have
clearly worded text links, particularly for users of AT. Links should make sense out of
context because most screen readers and talking browsers scan a Web page for all the
links and create a list of the links for their users. Links such as ‘click here’ are
meaningless in a list of links. AT’s inform the user that text is a link, either by
changing pitch or voice, or by prefacing or following the text with the word ‘link’.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
77
Participants will be invited to create a link to the Macromedia Web site by selecting
the appropriate text.
Three tables are included in table.htm. HTML tables are either layout tables or data
tables with the vast majority being layout tables used to arrange the visual appearance
of a webpage. It is important that tables make sense when linearised although newer
versions of screen readers can handle tables very effectively. Generally, layout tables
linearise quite well and data tables do not.
A number of table tags and attributes can be used to help improve the accessibility of
tables including TR, TD, TH, ID, SCOPE, ABBR, SUMMARY and CAPTION. Each
tag was introduced together with its intended use and examples (WCAG 5.1 & 5.2 –
both Priority 1).
Many of these tags and attributes are not functional yet. Part of making a website
accessible includes future proofing. In other words, as new browsers are released,
Web pages are already constructed to take advantage of the new features.
13.5 Accessible Forms – forms.htm
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
78
The main accessibility issue for forms is whether or not users with disabilities,
especially those who are blind or visually impaired, can determine the purpose of a
specific input element and interact with it. For example, a user may be aware that a
text entry field has focus, but may not know what information to type there. One
technique is to provide helpful hints actually in the text box as shown in the diagram
above (WCAG 10.4 – Priority 3).
The original form is extremely disorganised and it was decided to teach participants to
construct a new form rather than retrofit the bad one. A number of techniques were
suggested including the following: -
1. Give clear instructions: ‘Please provide your details and then click on Submit.
If you wish to clear all fields then click Reset.’
2. Only ask information that is really needed.
3. Organise the form logically: group contact and occupation details, interests, etc.
4. Place buttons at the end of the form. Include a submit and a reset button
5. Put labels adjacent to their controls (WCAG 12.4 - Priority 2).
6. Use HTML mark-up to associate controls explicitly with their labels.
A number of additional form elements, tags and attributes were also explained in the
accompanying course notes. These included LABEL, LEGEND and FIELDSET as
well as instructions on how to make every potential form element accessible. The
inaccessibility of JavaScript Jump Menus was also pointed out.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
79
13.6 Images – image.htm
The photographs on this page are quite large. The Mona Lisa is over 50KB and the
Monet over 20KB. In total the whole page is 108 KB meaning it would take about 30
seconds to download on a 28.8 KB modem. Pages should be no larger than 30KB in
total but it is important to remember that the navigation images will be cached the first
time the page loads. Users will be shown how to calculate the maximum weight of a
Web page. For example, the AFA template measures 26K which means that
additional pages should be no larger than 56KB including the template.
Users with slow modems or the visually disabled may not want to sit and wait for
large images to download. Participants will be shown how to insert thumbnail images
which will be linked to full-size versions of the images. If the visitor wishes to see the
larger image they can do so – other users are not forced to wait 30 seconds for the
page to download.
On this page we have images of two very famous paintings - surely we could just put
their titles as alt tags and that would suffice? Well yes, and no. The alt tag must be
used to name the image and also use a long description page created to describe the
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
80
paintings in more detail (WCAG 1.1 – Priority 1). The LONGDESC attribute is
unsupported in Dreamweaver so the HTML code must be edited directly.
Long descriptions are extremely difficult to write and time consuming. If you take the
Mona Lisa as an example, how can we describe this picture in words? To a certain
extent the answer to this question is dependent on the purpose of the image on the
page. If the image is decorative the visually disabled are not really disadvantaged by
not seeing the image. On the other hand, the image may be a fundamental part of a
particular page and therefore require a detailed description. In the case of Monet’s
Waterlilies how can we describe a predominantly blue picture? Will a visually
disabled person understand the concept of blue? How do you describe the colour
blue?
The author has not really got a definitive answer to this problem. Technically it is
quite easy to create a link to a long description page. In the case of the paintings it
would probably require the input of a subject expert to provide a meaningful long
description. The participants are asked to try and write a long description of these
paintings as a way of highlighting the problems.
This page also includes a number of foreign language quotations. Changes in the
natural language of a document must be highlighted by using the LANG attribute
(WCAG 4.1 – Priority1).
Current browsers are not known to support the language attribute but w3c.org
recommends placing foreign language quotes within <span> tags [95]. For example
<span lang="fr">Bonjour</span> [96].
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
81
13.7 Image Map – imagemap.htm
Client-side image maps have a number of regions within an image. Each region has its
own link and therefore can have alt text. The regions in a server-side image map only
display coordinates. Therefore, browsers cannot indicate the destinations of the
various links to the user.
A series of redundant text links are recommended whichever type of image map is
used because the ALT text is not displayed when users choose to browse with images
turned off (WCAG 1.2 – Priority 1). The AFA site uses a client side image map
(WCAG 9.1 – Priority 1) of Europe. Visitors can click on either the national flag of a
particular country or a text link to obtain further information about that country. This
information is contained on a separate page called countries.htm.
13.8 countries.htm
This page contains various acronyms, for example EU and UK. By using the
acronym tag, together with the title attribute, developers can provide a ‘long version’
of the acronym via a tooltip (WCAG 4.2 – Priority 3). The acronym tag can also be
used to provide definitions of technical/difficult words in the form of a tooltip.
This page also contains text displayed in columns a la newspaper style. Using
columns in a table to display text can make text difficult to read, especially if one
column is longer than the other (WCAG 10.3 – Priority 3). A screen reader usually
reads the screen from left to right and top to bottom, regardless of layout. This can
mean that the two top lines of the columns will be read together, followed by the
second lines and so on. This is obviously confusing. The columnar text was therefore
linearised.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
82
13.9 Summary
This evolutionary prototype validates to WCAG AAA, Bobby Level 3, and American
Section 508, but not to strict HTML 4.01 because one minor attribute has been
deprecated. This is the ‘width’ attribute that should not be used within the ‘td’ tag.
This error is not considered to be important as it is only used for layout purposes. The
‘align’ attribute is also deprecated in HTML 4.01 in favour of using style sheets.
A web-based help guide was also produced to enable participants to complete the
course.
14.0 Evaluation of the AFA Evolutionary Prototype
Initial testing was undertaken using 12 inexperienced Dreamweaver users in Fresno
State University, California during January 2002. None of the participants had
detailed knowledge of Web Accessibility issues although they were all aware of the
‘big picture’.
The majority of this group did not understand basic HTML and had been using
Microsoft FrontPage to create their Web sites. This meant that the participants were
not in a position to offer detailed comments on the accuracy of the HTML coding.
Evaluation was therefore undertaken via informal discussion followed by a general
question and answer session.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
83
Overall, everyone was extremely pleased with the course and a number of cogent
observations were made.
Firstly, everyone disliked the web-based course notes and requested a printed version
of the notes. Secondly, detailed instructions in how to set up a site in Dreamweaver
were requested.
Time was a major constraint and no-one completed the course in one day. The sheer
volume of material in the course means that there was very little time for deviation
from the course material. This issue can be partly overcome by providing more
detailed, step-by-step instructions.
Web accessibility covers many issues and a number of discussions took place during
the course of the day. Some of these discussions tended to focus on quite esoteric
issues. For example, many physically disabled users use Dragon Naturally Speaking
to browse the Internet. In order to easily and quickly select links it is helpful if the alt
text is the same as the actual text on graphical buttons.
In the AFA site the ‘table’ image is a link to the table page. The alt text should simply
say ‘table’ rather than, for example, ‘link to table page’. This suggestion was
incorporated into the AFA site and course materials to help Dragon users easily
navigate Web sites.
Participants also requested help with regard to Search Engine optimisation and the use
of metadata.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
84
15.0 Working Prototype
Following the training session based on the evolutionary prototype, and the feedback
received from the training, a working prototype was constructed. The evolutionary
prototype was used in its entirety together with the following additional elements.
15.1 Site Definition
In response to user requests a section was added to the beginning of the course
explaining how a site is defined in Dreamweaver. Site definition is an important first
stage in the creation of a Web site. The program automatically creates and updates
links as well as providing warnings when links are created to objects outside of the
site.
15.2 Meta Data
Meta data is information contained in the head of a html document containing
information about the current page (WCAG 13.2 – Priority 2). Meta data consists of a
number of tags containing two attributes. The NAME attribute specifies the type of
information being supplied and the CONTENT attribute contains the actual
information. Participants are asked to think about the keywords and description
appropriate for a Web site about accessibility and to add the meta information to their
template.
15.2.1 Keywords
Many search-engines read the contents of the ‘Keywords’ META tag and use the
information to index Web pages in their databases. Some search engines put a limit on
the number of keywords or characters they will index, and some ignore all keywords
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
85
beyond the limit. For this reason it is a good idea to limit keywords to a few well-
chosen words, separated by commas.
15.2.2 Description
Many search-engines read the contents of the ‘Description’ META tag. Some use the
information to index Web pages in their databases, some also display the information
below the link to a page in the search results instead of the first few lines of the page
content. Some search engines put a limit on the number of characters they will index.
15.3 Tabindex and Accesskeys
The TABINDEX attribute of the <A> and <INPUT> tags provide a means of
specifying the way non-mouse users tab between the various links and form elements
in a Web page (WCAG 9.4 – priority 3).
Web developers don't usually need to worry about specifying the tab order because
well designed pages and/or forms usually have a logical, built-in, tab order. At times
though, a page - especially a page with forms - can benefit by assigning the tab order
to form controls and/or links.
Participants are invited to specify the tab order of the various links in the AFA site
and reminded that the tabindex needs to be assigned in both the template and in the
individual pages. There is not a right or wrong way to do this, participants are asked
to put themselves in the position of a visually disabled person and think about how
they would like to navigate a Web page.
Accesskey is another attribute of the <A> tag and is rarely used. Accesskey shortcuts
are specific to each individual Web page or site and enable users to quickly visit key
links within a Web site (WCAG 9.5 – Priority 3).
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
86
When browsing with Internet Explorer users press the ALT key combined with the
relevant alphanumeric key to highlight a hyperlink. By pressing the ENTER or
RETURN key the link is followed.
When using Netscape 6 users simply need to select ALT + the alphanumeric key and
they will be immediately taken to the relevant page.
Accesskeys do not work in Opera 6.
On Macintosh systems, users press CONTROL + the relevant access key to highlight
a hyperlink. Pressing ENTER or RETURN will then take users to the linked page.
It is fine to use the same accesskey more than once. In such cases the user will simply
tab through the links until they highlight the required link and the press ENTER key.
Most users do not expect a page to have keyboard shortcuts and there is no standard
method of alerting users to the presence of the shortcuts. One method is to add the
information to the alt or title attributes but this can cause problems for users of
Dragon Naturally Speaking software, as mentioned in Section 14.0.
The normal convention for non-Internet Windows programs is to underline the letter
of the shortcut key – for example, ALT+H usually opens the HELP menu. This
convention would not be appropriate on the Web because underlined text usually
indicates a link.
Another potential drawback of keyboard shortcuts is that they may interfere with the
shortcuts of the particular browser or screenreader that is being used. For this reason
numbers are recommended rather than letters as shortcut keys.
Despite these problems keyboard shortcuts allow users to quickly access key pages
within a site.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
87
15.4 Status Bar Messages
JavaScript status bar messages provide a visual clue for visitors. The status bar is
located in the bottom left of the browser. When a user moves their mouse over a link
an onMouseOver event triggers a status bar message; when the user moves their
mouse away from the link, an onMouseOut event removes the message. For users
who do not use a mouse and tab through links an onFocus event is used to trigger the
message and an onBlur event makes the message disappear (WCAG 9.3 – Priority2).
The status bar message should display the purpose of the link and can include
accesskey information. Participants are advised that onMouseOver and
onMouseOut status bar messages do not work within image maps although onFocus
and onBlur messages do.
15.5 Changing the default Dreamweaver template
As previously mentioned, one of the intentions of the author was to train Web
developers to work smart. Whenever a new document is created within Dreamweaver
the program loads a default blank page, this page is not inaccessible per se, but it is
incomplete as far as valid HTML is concerned.
Users are shown how to edit the default page although users on the UCLAN network
do not have access to the required folder and therefore cannot change the default
template.
15.6 User Manual
A comprehensive 30-page user manual was written to accompany the AFA course. A
copy of the second draft is appended to this document.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
88
Each stage in the retro-fitting process is given a step-by-step treatment and includes
examples of accessible html code, useful keyboard shortcuts, and explanations as to
why changes have been made.
The manual concludes with a list of useful related Web links.
16.0 Evaluation & Feedback
Fifty Web developers from both HE and FE institutions around the UK, split into four
groups, undertook a 1 day training course using the AFA material between March and
May 2002.
Each participant was asked to fill in a course evaluation form (see Appendix I). The
main questions of interest related to the actual course content and the overall benefit
of the course to the participant. The answers to those two questions are summarised
below.
Very Good Good Satisfactory Unsatisfactory Poor
5 4 3 2 1
Content 34 16
Overall 37 13
On a scale of 1 (poor) to 5 (very good) the mean score for the course content was
4.68. No-one rated the course content at less than 4 (good). The mean score for the
overall benefit was 4.74 – again no-one rated the overall benefit at less than good.
As in the case of the Fresno participants, the majority of the UK participants were
technically inexperienced in terms of accessible html coding. However, the
evaluation forms produced a number of excellent suggestions and comments, many of
which will be incorporated into future versions of the course.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
89
16.1 Comments
Many of the participants complained that one day was insufficient time to fully digest
the wealth of material in the AFA course and complete the exercises. In particular,
participants would have liked more time to experiment with screen readers. Many
participants felt that a two-day course would have been better. Whilst this is a valid
comment, the cost constraints of providing a two-day course may well be prohibitive.
The intention is that the course will eventually be fully Web-based, perhaps housed
within the WebCT virtual learning environment. This would mean that participants
could complete the course in their own time.
Several comments related to the actual course manual. One person in particular
commented that the manual assumed too much prior knowledge; another person
suggested that the instructions and code examples should be clearly distinguished.
This is a fair comment and future versions of the course manual will take these
comments into account. Another person said that he was dyslexic and that the black
text on a white background was quite difficult to read. Manuals printed on different
coloured paper will be provided at future training courses.
One person suggested that the examples should be linked to the guidelines and
prioritised. The author fundamentally rejects this suggestion. The whole basis of the
AFA course is that people create an actual Web site. As mentioned in Section 8.3, the
majority of existing accessibility resources takes the example and guideline approach.
Another person complained that they used FrontPage rather than Dreamweaver and
that the step-by-step examples would not work in FrontPage. There are three replies
to this complaint. Firstly, the actual subtitle of the AFA course is ‘Creating
Accessible Websites using Macromedia Dreamweaver’ and this was clearly pointed
out in both the course promotional material and booking form. Secondly, as discussed
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
90
in Section 11.4 FrontPage does not create accessible html code, the author sees no
benefit in creating material for a software program that is inappropriate for the task in
hand. Finally, the fundamental principles outlined in the course material can be
applied to any Web page regardless of how it was originally created. This assumes
that the Web developer can understand the propriety code written by some Web
authoring programs.
One person thought that the bad pages were actually too bad. The author agrees with
this comment to a certain extent however, people tend to find extreme examples easier
to remember than ‘normal’ pages. Future versions of the course may take this
comment into account, perhaps as a way of reducing the time needed to complete the
course.
Whilst delivering the course the author observed a number of potential problems with
the Web pages.
Firstly, the advice to separate links using the | symbol (given in Section 13.2) - whilst
technically correct - could cause irritation to screen reader and speech browser users.
The problem is that the screen reader reads out the word bar every time it encounters
the | symbol.
Secondly, the advice to make the named anchor text invisible, again in Section 13.2,
could result in some Search Engines refusing to index a site. The problem is that some
Web sites deliberately repeat keywords in their pages, using invisible text, to try and
fool Search Engine robots and obtain a higher page ranking. The solution to both
these problems is to use a transparent gif.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
91
Thirdly, the text navigation links in the footer of the page are separated by a bar and
invisible text. The bar should be replaced by a transparent gif; the text should be made
visible.
These three ‘errors’ will be rectified in future versions of the AFA course.
16.2 Usability Testing
The official definition of Usability, according to the International Organization for
Standardization (ISO), is: ‘The effectiveness, efficiency, and satisfaction with which
specified users achieve specified goals in particular environments.’ [97]
Web site usability is not just about ensuring that everything on a Web site works but
is also concerned with how quickly and easily visitors are able to make use of the site
and complete their tasks/objectives. Obviously it is important for organisations to
meet accessibility guidelines but it is also important to ensure that the Web site is
attractive, intuitive and meets its aims and objectives.
Appendix J contains a list of 54 usability tests carried out on the AFA retro-fitted
Web site. The usability tests were derived from a list of 113 usability tests outlined by
Jakob Neilsen and Marie Tahir [98]. The remaining 59 tests were not applicable to the
AFA site.
Usability tests reflect best practice and current Internet conventions. For example, it
is generally accepted that the best position for a corporate logo is the top left of the
screen and that the logo should provide a link back to the homepage. This convention
will not be found in any accessibility guidelines but users expect logos to behave in
this fashion.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
92
The AFA site successfully passed 50 of the 54 tests; four of the tests were failed
(designated by red text in the Appendix). We will now consider the four failed
usability tests.
16.2.1 Lack of Tag Line
The tag line is a brief summary of what a Web site is all about. For example,
CNET.com’s tag line reads ‘the source for computing and technology’ [99]. The
AFA site does not have a tag line and this is an oversight and will be rectified in the
next version of the course.
16.2.2 Homepage Link to Homepage
An active link to the homepage on the homepage can confuse some visitors. When a
user clicks on a link they expect the page content to change. The AFA Web site fails
this test on three counts. Firstly, the AFA logo is a link to the homepage. This link
should be removed on the homepage itself but remain on all other site pages.
Secondly and thirdly, the main navigation bar, which as a text version in the footer,
includes a home button. This button, and the duplicate text link, should be removed
in future versions of the course.
16.2.3 ‘Pop-up’ Windows
‘Pop-up’ windows can confuse visually disabled users. When the window pops up it
takes the focus away from the main site content. I have included this error because all
the external links within the AFA site open up in a new browser window.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
93
16.2.4 ‘Last Updated’ Information
The AFA site does not include ‘last updated’ information. This is a serious oversight
because many of the AFA course participants have indicated that they would like to
be notified when future versions of the course are available. The last updated
information would obviously be helpful and will be added to the template on the next
version of the course.
17.0 Conclusion
When the author was asked to develop the AFA course in October 2001 (see
Appendix K), little did he realise what a massive subject Web accessibility was. This
whole topic is very much in its infancy. Developers have not even asked all the
questions - never mind identified the answers and their solutions. Future versions of
the course will include new accessibility techniques as they evolve. It has been said
that problems lead to innovation (source: unknown); many accessibility related
problems certainly require imaginative solutions.
The AFA course provides Web developers with the means to create SENDA
compliant accessible Web sites. The AFA course was ‘signed-off’ in June 2002 (see
Appendix L). The author will be the first to admit that there is still much to do.
As outlined in Section 5, accessible Web sites prevent academic institutions from
falling foul of the various domestic, European and worldwide disability related laws.
In addition to the obvious legal benefits for complying with SENDA, there are a
number of additional, compelling reasons for creating accessible Web sites.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
94
17.1 Economic Reasons
It makes sense for owners of e-business and commercial Web sites to design a Web
site which can be accessed by the widest possible range of people. An accessible Web
site ensures that the potential customer base is as large as possible.
The customer base will also include more affluent visitors, perhaps using the very
latest Internet browsing technology, because they will also be able to access the Web
site using their latest ‘gadget’.
Accessible Web sites will also make distance learning courses more saleable to
overseas markets. For example, WCAG AA compliant Web sites will also comply
with American Section 508 guidelines. [100]
17.2 Selfish Reasons
Good accessibility techniques help search engines to better index Web sites. For
example, alternative text for graphics can be optimised for search engines by well
thought-out and relevant keywords.
The Web skills of the developer will be drastically improved if they know how to
write good HTML - a key skill needed to create accessible Web sites. This makes the
developer more employable and able to command a higher salary.
Academic institutions benefit from having highly skilled staff that may well be more
motivated, effective, and productive. Staff retention may be a factor.
17.3 Altruistic Reasons
Accessible Web sites improve the quality of life for millions of disabled users around
the world - they can enjoy the benefits of the Web along with everyone else.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
95
The Web is the best way yet of providing equal opportunities for all but many Web
designers simply do not consider the needs of disabled users when designing and
creating Web sites.
17.4 Design Reasons
‘Designing for disabled users in ordinary environments is the same as designing for
non-disabled users in extraordinary environments.’ [101]
Designers should therefore design for extraordinary users. The result is a Web site
which is accessible to a non-disabled user working with a non-standard browser and
using non-standard hardware.
This principal supports the original vision of Tim Berners-Lee, the director of the
World Wide Web Consortium and inventor of the World Wide Web who said: ‘The
power of the Web is in its universality. Access by everyone regardless of disability is
an essential aspect.’ [102]
Accessible design benefits everyone. Web sites are easier to navigate, information is
easier to locate, and Web pages download quickly. This will attract repeat visitors to
the site. These visitors will also tell their friends and colleagues so increasing the
sites’ popularity.
18.0 Further Reflections
Reflecting about the AFA project I am convinced that the fundamental objective is
impossible to meet. Is it really possible to create a Web site that is truly accessible to
all?
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
96
The working definition of Web accessibility used in the AFA project was ‘anyone
using any kind of Web browsing technology must be able to visit any site and get a
full and complete understanding of the information contained there, as well as have
the full and complete ability to interact with the site.’
Is it really possible to create a site that anyone can use using any kind of Web
browsing technology and get a full and complete understanding of the site? In my
opinion, the answer is no. There are simply too many variables. For example, there
are 41,000 different languages (Section 3.1.4) and more than 100 different Internet
browsers (Section 3.1.2). Are we seriously expecting Web developers to create
41,000 different versions of every page and to then test those pages in every
conceivable browser at every conceivable screen resolution? If we add another
variable, the numbers lose meaning. For example, it is impossible to estimate the
number of different disabilities that people may have and some people suffer from
multiple disabilities.
The implications of SENDA are that any one individual could sue an academic
institution because they could not access a particular Web site, despite the best efforts
of the Web developer.
In my opinion, the Web developer has a better chance of complying with SENDA if
they take a different approach to the problem. The clue to the solution lies in the
fourth definition of Web accessibility put forward by the Making Connections Unit
(MCU), based in Glasgow Caledonian University, namely, that an accessible Web site
is one which is ‘accessible to machines first, and people second’.
The one thing that all Internet users have in common is that they must use some form
of Web browser, whether that be an old version of Internet Explorer, a PDA, or the
latest Java enabled telephone. If Web pages could be constructed in such a way that
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
97
they would work on all browsers, the Web developer can reduce the variables
considerably.
In the author’s opinion, the answer lies in coding pages in XHTML using a strict
DTD. Strict XHTML is intended to work on all browsers and is fully backwards, and
forwards, compatible.
Strict XHTML does not allow deprecated tags or elements. Pages must be marked-up
correctly resulting in ‘well formed’ documents. The latest Web browsing
technologies require documents to be well formed because they cannot interpret badly
marked-up documents.
Almost by definition a Web page which is validated to XHTML 1.0 Strict will display
correctly on any and all Web browsers. If Web pages are coded using XHTML, in
conjunction with CSS, the user can format the Web pages to suit their own
preferences. The Web developer therefore need only worry about the actual page
content.
This approach must give the Web developer a fighting chance in the quest to create
accessible Web pages. The next version of AFA will be constructed using these
principles.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
98
Appendix A: Student Disability Tables 2000/2001
Total
Total
known to
have a
disability
Dyslexia
Blind/
Partially
sighted
Deaf/Hearing
impairment
Wheelchair
user/Mobility
difficulties
Personal
care
support
Mental health
difficulties
An unseen
disability
Multiple
disabilities
Other
disability
No Known
disability
Not
known/sought
Research for a higher degree 16090 620 150 30 45 40 0 15 255 25 60 14810 660
Full-time 10315 405 105 15 25 15 0 10 185 15 35 9480 430
Female 4650 165 35 5 10 5 0 0 80 5 15 4285 200
Male 5665 240 65 10 15 10 0 10 105 10 20 5195 230
Part-time 5775 215 45 10 20 25 0 5 65 15 25 5330 235
Female 2740 115 25 5 10 15 0 0 35 5 15 2525 100
Male 3035 100 20 5 10 10 0 5 30 5 10 2800 135
Taught course for a higher degree 62055 2230 665 70 165 135 10 95 740 90 270 57785 2040
Full-time 25125 1145 410 20 70 55 0 50 370 50 125 23205 775
Female 12095 535 165 10 30 30 0 25 185 25 70 11200 365
Male 13030 610 245 10 35 25 0 25 185 25 55 12005 410
Part-time 36930 1085 255 45 100 80 5 45 370 45 145 34580 1265
Female 20305 615 145 20 45 50 5 20 215 25 90 19075 615
Male 16625 470 110 25 55 25 5 20 155 15 55 15505 650
Other postgraduate 81790 2165 585 80 150 105 10 65 750 140 275 76325 3305
Full-time 31960 1130 345 40 55 55 5 35 430 30 130 29740 1095
Female 20900 690 200 20 40 30 0 15 280 20 80 19490 720
Male 11060 440 145 15 15 25 5 20 155 10 45 10250 375
Part-time 49830 1035 240 45 90 45 5 30 320 110 145 46585 2210
Female 31475 675 155 15 60 30 5 20 225 75 90 29265 1540
Male 18355 360 85 25 30 20 0 15 95 40 55 17320 675
First degree 320105 16365 6840 510 840 590 40 480 4470 600 1990 297535 6205
Full-time 287325 15080 6570 470 750 475 25 395 4085 515 1795 267585 4660
Female 154110 7600 2965 195 415 270 15 220 2330 245 945 144050 2460
Male 133215 7485 3605 280 335 205 10 175 1755 270 850 123530 2205
Part-time 32780 1280 270 35 90 115 15 90 390 85 195 29955 1545
Female 21275 775 150 20 55 75 5 45 250 50 125 19495 1005
Male 11505 505 120 15 35 40 5 45 140 35 70 10460 540
Other undergraduate 275050 9595 2185 335 860 680 45 635 2215 1155 1490 247915 17540
Full-time 51510 2375 1030 80 145 90 10 55 630 75 260 47825 1305
Female 31250 1180 430 35 90 35 10 25 415 25 115 29150 920
Male 20255 1195 600 45 55 55 0 30 215 50 145 18675 385
Part-time 223545 7215 1155 255 715 590 30 580 1585 1075 1230 200090 16235
Female 146130 4460 675 130 450 375 10 315 1075 675 750 130805 10865
Male 77415 2760 475 125 265 215 20 265 510 405 480 69285 5370
Total - Postgraduate 159935 5015 1400 175 360 280 20 175 1740 260 600 148920 6005
Total - Undergraduate 595155 25955 9025 840 1700 1270 80 1115 6690 1755 3480 545455 23745
Total - All levels 755095 30970 10430 1020 2060 1550 100 1290 8430 2015 4080 694370 29750
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
99
Appendix B: UCLAN Web Site Structure
Department / Faculty HTML Files
Art & Fashion 178
Arts Centre 9
Band 20
Biology (approx) 550
Bridge 31
Built Environment Approx 200
Class (Faculty) 1232
Clearing 57
Computing 110
Cumbria 92
D&T Office 10
Design 5
Directorate 72
ECTS 150
Environmental (approx) 300
Facilities Management 67
Finance 124
Harris Knowledge Park 41
Health (Faculty) 1024
Hospitality Services 47
Human Resources 294
ISS 160
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
100
IVI2000 28
Jobs 5
Keyskills 51
LBS (Faculty) 1165
Library 817
News Archive 877
Physics (approx) 400
Planning 450
Psychology (approx) 1000
Quality 29
Registry 319
Research 102
Science Office 5
Secretariat 88
Student Services 1395
Technology Approx 250
UCLan Main 1200
Working Together 77
Total HTML Pages 13031
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
101
Appendix C: WCAG Guidelines
Appendix C1: Guideline 1
‘Provide equivalent alternatives to auditory and visual content.’
The aim is to provide content that, when presented to the user, conveys essentially the same function or
purpose as auditory or visual content. Although some people cannot use images, movies, sounds, applets,
etc. they may still use pages that include equivalent information to the visual or auditory content but that
information must serve the same purpose.
This guideline emphasizes the importance of providing text equivalents of non-text content. The beauty of
a text equivalent lies in the fact that it can be rendered in ways that are accessible to people with various
disabilities using a variety of assistive technologies. Text can be readily output to speech synthesizers
and Braille displays, and can be presented visually on computer displays and paper.
Synthesized speech is critical for individuals who are blind and for many people with the reading
difficulties that often accompany cognitive disabilities, learning disabilities, and deafness.
Braille is essential for individuals who are both deaf and blind, as well as many individuals whose only
sensory disability is blindness.
Text displayed visually benefits users who are deaf as well as the majority of Web users.
Non-text content benefits some users, especially non-readers or people who have difficulty reading. In
video or other visual presentations, visual action such as body language or other visual cues may not be
accompanied by enough audio information to convey the same information. Unless verbal descriptions of
this visual information are provided, people who cannot see (or look at) the visual content will not be able
to perceive it.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
102
Appendix C2: Guideline 2
‘Don't rely on colour alone.’
It is vital to ensure that text and graphics are understandable when viewed without colour. If colour alone
is used to convey information, people who cannot differentiate between certain colours and users with
devices that have non-colour or non-visual displays will not receive the information.
When foreground and background colours are too close to the same hue, they may not provide sufficient
contrast when viewed using monochrome displays or by people with different types of colour deficits.
Appendix C3: Guideline 3
‘Use mark-up and style sheets and do so properly.’
Documents must be structured correctly. Content should be presented using style sheets rather than with
presentation elements and attributes. Improper use of mark-up hinders accessibility.
Misusing mark-up for a presentation effect, for example using a header to change font size, makes it
difficult for users with specialized software to understand the organization of a page.
Content developers must not sacrifice appropriate mark-up because a certain browser or assistive
technology does not process it correctly. For example, it is appropriate to use the TABLE element in
HTML to mark up tabular information provided that the table is coded correctly.
Appendix C4: Guideline 4
‘Clarify natural language usage.’
HTML allows developers to mark-up their documents in a way that facilitates pronunciation or
interpretation of abbreviated or foreign text. When content developers mark up natural language changes
in a document, speech synthesizers and Braille devices can automatically switch to the new language,
making the document more accessible to multilingual users.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
103
Content developers should identify the predominant natural language of a document's content (through
mark-up or HTTP headers). Content developers should also provide explanations of abbreviations and
acronyms.
In addition to helping assistive technologies, natural language mark-up allows search engines to find key
words and identify documents in a desired language. Natural language mark-up also improves readability
of the Web for all people, including those with learning disabilities, cognitive disabilities, or people who
are deaf.
When abbreviations and natural language changes are not identified, they may be indecipherable when
machine-spoken or Brailled.
Appendix C5: Guideline 5
‘Create tables that transform gracefully.’
Tables often present problems to users of screen readers irrespective of their purpose. It is important that
tables are coded so that they linearise correctly.
Tables should primarily be used to mark up tabular information although many content developers use
tables to lay out pages; this is a contentious issue.
Appendix C6: Guideline 6
‘Ensure that pages featuring new technologies transform gracefully.’
Designers should ensure that pages are accessible even when newer technologies are not supported or are
turned off. Although content developers are encouraged to use new technologies that solve problems
raised by existing technologies, they should know how to make their pages still work with older browsers
and people who choose to turn off features.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
104
Appendix C7: Guideline 7
‘Ensure user control of time-sensitive content changes.’
Developers should ensure that moving, blinking, scrolling, or auto-updating objects or pages can be
paused or stopped. The BLINK and MARQUEE elements are not defined in any W3C HTML
specification and should never be used.
Some people with cognitive or visual disabilities are unable to read moving text quickly enough or at all.
Moreover, screen readers are unable to read moving text.
Movement can also cause such a distraction that the rest of the page becomes unreadable for people with
cognitive disabilities.
People with physical disabilities might not be able to move quickly or accurately enough to interact with
moving objects.
Appendix C8: Guideline 8
‘Ensure direct accessibility of embedded user interfaces.’
Embedded objects, including items such as Windows Media files or QuickTime movies, are often
presented within their own interface. These interfaces must be accessible. If the interface of the
embedded object cannot be made accessible, an alternative accessible solution must be provided.
Appendix C9: Guideline 9
‘Design for device-independence.’
Developers should create pages that allow users access via a variety of input devices.
Device-independence means that the user may interact with a Web site with their preferred input or
output device. Examples of such devices include; mouse, keyboard, voice and head wand.
Generally, pages that allow keyboard access are also accessible through other speech input devices.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
105
Appendix C10: Guideline 10
‘Use interim solutions.’
Pages should be constructed so that assistive technologies and older browsers will operate correctly.
For example, older screen readers read lists of consecutive links as one link. These active elements are
therefore difficult or impossible to access unless the links are separated by something other than white
space, for example a transparent gif.
Appendix C11: Guideline 11
‘Use W3C technologies and guidelines.’
Web sites should be constructed using W3C technologies and guidelines. When this is not possible, or
doing so results in material that does not transform gracefully, an alternative accessible version of the
content should be provided.
Many non-W3C formats (e.g., PDF, Shockwave, etc.) require viewing with either plug-ins or stand-alone
applications. Often, these formats cannot be viewed or navigated with standard Web access or screen
reading tools. Non-W3C formats should be converted to HTML/XHTML although this does not always
create an accessible document. Therefore, each page should be validated for accessibility and usability
after the conversion process.
Avoiding non-W3C and non-standard features (proprietary elements, attributes, properties, and
extensions) will tend to make pages more accessible to more people using a wider variety of hardware
and software. When proprietary or inaccessible technologies must be used, equivalent accessible pages
must be provided.
Even when W3C technologies are used, they must be used in accordance with accessibility guidelines.
If a page does not easily convert, developers should either revise the page until its original representation
converts appropriately or provide an HTML or plain text version.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
106
Appendix C12: Guideline 12
‘Provide context and orientation information.’
Complex relationships between different parts of a page may be difficult for people with cognitive
disabilities and people with visual disabilities to understand. Therefore, developers should provide
context and orientation information to help users understand complex pages. This information is useful
for all users.
Appendix C13: Guideline 13
‘Provide clear navigation mechanisms.’
Clear and consistent navigation systems are important to people with cognitive disabilities or blindness,
and benefit all users. Developers should provide a clear and consistent navigation system. This will
ensure that users will be able to find the information they are seeking easily.
Appendix C14: Guideline 14
‘Ensure that documents are clear and simple.’
Consistent page layout, recognizable graphics, and easy to understand language benefits all users. In
particular, they help people with cognitive disabilities or those who have difficulty reading. It is important
to ensure that images have text equivalents for people who are blind or have low vision, and for any user
who cannot or has chosen not to view graphics.
Using clear and simple language promotes effective communication and is particularly important for
those users whose first language is not English.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
107
Appendix D: HTML Code Comparison
The goal was to produce a simple Web page containing just a single linked image that rolled over to
another image. The following table shows the number of lines of code generated by each program. [103]
The test was carried out in November 2002.
Macromedia Dreamweaver MX Adobe GoLive 6 Microsoft FrontPage 2002
Lines of Code 49 55 730
Characters 1,773 1,453 16,380
Good JavaScript? No No No
W3C valid XHTML? Yes No No
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
108
Appendix E: Internet Trends
Appendix E1: Demographics (users shown in millions)
Appendix E2: User Web Browser Settings (April 2003)
57.00%
36.00%
1.00% 2.00% 1.00%1.00%
2.00%
IE6.x
IE5.x
IE4.x
NN6.x
NN4.x
Opera
Other
2.58
68.90
83.35
1.90
136.86
10.74
World Total - March 2000
304.36 million
Africa
Asia & Pacific
Europe
Middle East
USA & Canada
South America
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
109
Appendix E3: User Screen Resolution Settings (April 2003)
Appendix E4: User Operating Systems (April 2003)
2.00% 2.00%
46.00%
50.00%
585x386 or less
640x480
800x600
1024x768 or above
31.00%
8.00%
27.00%
2.00% 2.00%
1.00%
27.00%
2.00%
Windows 98
Windows NT
Windows 2000
Windows 95
Mac (PPC)
Linux
Windows XP
Other
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
110
Appendix E5: Internet Connection Speeds (December 2001)
Appendix E6: User Colour Settings (April 2003)
3.00%
17.00% 16.00%
24.00%
14.00%
26.00%
14.4K
28K
33.6K
56K
56K - 1MB
1MB+
3.00%
5.00%
41.00%
51.00%
8-bit (256 colours)
AOL 8-bit (256
colours)
16-bit (65,536 colours)
24-bit and above
(16,777,216 colours +)
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
111
Appendix F: Department of Physics, Astronomy and Mathematics
Appendix F1: Origin of Web Site Visitors
Country of Origin % of hits
United Kingdom 79.8%
United States 6.3%
China 3.1%
Netherlands 1.8%
Japan 1.3%
Total 100.0%
Appendix F2: Browser Used by Web Site Visitors
Browsers
Internet Explorer 5.x 76.5%
Netscape 4.x 11.8%
Internet Explorer 6.x 5.9%
Netscape 6.x 5.9%
Total 100.0%
Appendix F3: Operating System Used by Web Site Visitors
Operating Systems
Windows 98 38.2%
Windows NT 26.5%
Windows 95 8.8%
Windows ME 8.8%
Sun OS 5.9%
Windows 2000 5.9%
Linux 2.9%
Unknown 2.9%
Total 100.0%
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
112
Appendix G1: Customising Internet Explorer
Applying font and colour changes
1. On the Tools menu, click Internet Options
2. On the General tab, select Accessibility
3. Click the three boxes to show ticks.
Changing the font
Using a sans-serif font (such as Arial), rather than a serif font (such as Times New Roman), can make text
easier to read on a computer screen.
1. On the Tools menu, click Internet Options
2. On the General tab, click Fonts
3. In the Proportional and Fixed-width font lists, select the fonts you would like to use.
Altering text size
1. On the Tools menu, click Text Size
2. Select the font size you would like.
Changing text and background colour
Web site authors and designers often specify particular fonts, typefaces and background colours for their
pages. Some combinations can sometimes make the text difficult to read. You can override these settings
by choosing your own preferred colour scheme.
1. On the Tools menu, click Internet Options
2. On the General tab, click Colors
3. Click on the tick box labelled Use Windows Colors
4. Click Text, and select the colour you want
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
113
5. Click OK
6. Click Background, and select the colour you want to use
7. Click OK.
Turning off images
1. On the Tools menu, click Internet Options
2. On the Advanced tab, scroll down to Multimedia
3. Click on Show pictures to remove the tick
4. Click on Apply
5. Click on OK.
Other Options
There are more options to make Web sites easier to read, such as removing animation and expanding text.
To look at the other options:
1. On the Tools menu, click Internet Options
2. Select the Advanced tab
3. Choose the options you would like.
Macintosh Users
Macintosh Users of IE5 can find the above settings in EDIT » PREFERENCES. Under "Web Content"
you can set colours and select or deselect the following:
1. Show pictures.
2. Show style sheets.
3. Show frames.
4. Enable scripting.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
114
Appendix G2: Customising Netscape 4.x
To change the settings on your browser go to the EDIT menu, and click on PREFERENCES. From here
you can make the following changes.
Changing font size
1. Click on View
2. Select Increase Font or Decrease Font
3. You can also change the font size by using the following keyboard shortcuts.
4. Ctrl + ] to enlarge the font size
5. Ctrl + [ to reduce the font size.
Changing font settings
1. Click on Edit
2. Click Preferences
3. Click on Appearance
4. Click Font;
5. Change the Variable Width Font and the Fixed Width Font to the type you prefer.
(To use these fonts when you visit all Web sites in future, click on "Use my default fonts" overriding
document specified fonts.)
Changing the colour of the background and text
1. Click on Edit
2. Click Preferences
3. Click on Appearance
4. Click Colors
5. Select Text, and choose the colour you would like to use
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
115
6. Click OK
7. Select Background, and choose a colour
8. Click OK
9. Click OK to close Preferences.
(To use these settings in future, click on "Always use my colours", overriding all documents.)
Turning images off
1. Click on Edit
2. Click Preferences
3. Select Advanced
4. Remove the tick from the box marked "Automatically load images"
5. Click OK.
Turning off style sheets or JavaScript
1. Click on Edit
2. Click Preferences
3. Select Advanced
4. Remove the tick from the box marked "Enable style sheets"
5. Remove the tick from the box marked "Enable JavaScript"
6. Click OK.
Appendix G3: Customising Netscape 6
In Netscape 6 you can change the default options via EDIT >> PREFERENCES.
Select the Appearance Category to edit font and color settings. You can disable Style Sheets via the
Advanced Category.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
116
Selecting VIEW >> Text Size allows you to alter the text size. You can choose a percentage change or
you can make the text larger or smaller.
You can also change the font size by using the following keyboard shortcuts.
1. Ctrl + ] to enlarge the font size
2. Ctrl + [ to reduce the font size.
To adjust the readability of fonts, select from the drop-down list the dots per inch (dpi) for displaying
Web pages. Select "Other" to open the ‘Calibrate Resolution’ dialog box. This allows you to calibrate
your screen resolution by measuring how long a line appears on your screen (you will need a ruler).
Increased screen resolution may improve the readability of your text.
Graphics can be turned off via the Privacy & Security Category in Preferences.
Appendix G4: Customising Opera 6
Font size
To adjust font size use the ZOOM box that should be located to the right of the Search box on the menu
bar.
Font, colour and link settings
Select FILE >> PREFERENCES >>
Under Fonts and colors you can change font style, size and colour for text, headers, forms and some of
other style sheet settings. Select, for example, <h1> and then click on CHOOSE to select your preferred
<h1> settings.
You can also click on 'My link style...' and choose link colours and whether they should always be
underlined. Select 'Strike through' for visited links and see if you like the effect. 'Always border on
links' is an interesting option.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
117
Other style settings
Experiment with the settings under "Page style", especially the "User mode" settings. Here you can
specify whether you want to use your own styles or those specified by the Web designer.
Web designers can unchecked "Tables" and see if their Web pages 'transform gracefully' when they are
linearised.
Switching between styles
To the left of the location bar are four small icons. The third icon, which looks like a document, is the
'Toggle between Author Mode and User Mode' icon.
Click this icon and switch between the styles specified by the Web designer or your own settings
according to your preferences.
Turning images off
The second icon on the same toolbar allows you to quickly turn off graphics. Clicking this icon allows
Web developers to quickly check whether they have specified alternative text for images.
Appendix G5: Setting Up Internet Explorer for Supernova
To enable Supernova users to access the Web correctly a number of changes to Internet Explorer are
required to ensure that the speech will function correctly.
1. Press ALT+V to access the View Menu
2. Press B to turn off the Status Bar
3. Press ALT+V to access the View Menu again.
4. Press S to remove the Standard Buttons
5. Press ALT+V to access the View Menu a third time.
6. Press T to enter the Toolbar menu
7. Press A to remove the Address Bar.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
118
8. Press ALT+T to enter the Tools menu
9. Press O to enter the Options Menu
10. Press SHIFT+ TAB – the screen reader should read out ‘General Tab Control’
11. Press Right Hand Cursor key 5 times to select Advanced tab
12. Press TAB key to select Accessibility
13. Using cursor keys move down 1 space to the ‘Always Expand ALT text for images’.
14. If the setting is set to OFF, press the space bar to turn it on.
15. Again using cursor keys, move down 1 to the ‘Move system caret’. This should be set to ON.
16. Using cursor keys move down to the Multimedia section.
17. Using space bar turn off following options:
18. Play animations
19. Play videos.
20. Show image downloads.
21. Show pictures.
22. Smart image dithering.
23. Press return and then F5.
24. Press ALT+ SPACE; then press X to maximise the windows.
Appendix H: FONT Tags
The FONT tag should generally be avoided in creating accessible Web sites. While attribute
specifications like SIZE="+1" or SIZE="-1" are relatively harmless, absolute sizes like SIZE=“1” can
result in text that is too small to read. Style sheets allow authors to suggest relative changes in font size
with much greater flexibility than is allowed under FONT (WCAG 3.3 & 3.4 – Both Priority 2).
The COLOR attribute should always be avoided since many supporting browsers still display the font
colour when the user tries to override author-specified colours. The result could be an unreadable
document if the font colour does not contrast well against the reader's chosen background.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
119
The FACE attribute of the FONT element can not be overridden by the user in many browsers. This may
result in the browser choosing a font that is very difficult to read given the user's platform and
environment settings. The same font may render strangely on different platforms.
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
120
Appendix I: AFA Training Evaluation Form
Course Title: Access For All - Creating Accessible Web Sites
Date: May 2002
We are keen to evaluate all of our events as it is important to us that we offer an excellent service
and continue to improve this service. We will ensure that any information you provide will be
kept in the strictest confidence. Thank you for your co-operation.
1 Which parts of the event were most useful? Please say why.
2 Which parts of the event did you find least useful? Please say why.
3 How do you think the session could be improved?
Review of Event Very
good
Good OK Poor Very
Poor
Structure (logical development)
Content (balance of theory and practical work?
Delivery of course (tutor’s style and all participants
involved?)
Overall value of course
Venue, Service/Administration Very
good
Good OK Poor Very
Poor
Venue
Refreshment arrangements
Easy to book onto training event
Confirmation of booking
Available to contact for enquiries
Staff professional, courteous, and helpful (if not
contacted leave blank)
Additional comments (Particularly if you have indicated satisfaction less than ‘good’):
Evaluation Form
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
121
Appendix J: AFA Usability Tests
NO USABILITY / ACCESSIBILITY TEST
1 Is the organisation name & logo displayed prominently? YES
2 Is there a tag line? How many words? Is it relevant? NO
3 Is this an obvious homepage? YES
4 Is there any internal organisation information? NO
5 Is there any marketing jargon? NO
6 Are style / fonts / colours consistent? YES
7 Are there any single-item lists? NO
8 Are abbreviations / acronyms explained? YES
9 Is any UPPERCASE text used? NO
10 Are there any exclamation marks? NO
11 Are there any "Click Here" links? NO
12 Are there any "More …." links? NO
13 Is the word "Link" used to show a list of links? NO
14 Is the navigation system consistent? YES
15 Does the homepage include a link to the homepage? YES
16 Are category/link names obvious? YES
17 Is there a "Simple Search" feature on homepage? NO
18 Is the Search input box at least 20 characters? N/A
19 Does the Search automatically search the whole site? N/A
20 Is there a link to an advanced Search feature? N/A
21 Is there any irrelevant content? NO
22 Is there a good contrast between the text and background? YES
23 Are absolute fonts used? NO
24 Is CSS used? YES
25 Is the page design Liquid / Flexible? YES
26
is there horizontal scrolling at a screen size of 800 x 600
pixels?
NO
27 Does the page linearise correctly? YES
28 Does page look OK in 4 main browsers? YES
29 Will page download in less than 10 secs on 56K modem? YES
30 Do ALL images include "Alt" text? YES
31 Are there "Title" tags on text links? YES
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
122
32 Does page include animated logo / headlines? NO
33 Is there any scrolling text? NO
34 Are the date and time formats understandable? N/A
35 Is there any drop down lists? NO
36 Does page head include meta tags? YES
37 Will page title bookmark correctly? YES
38 Are there any "pop-up" windows? YES
39 Does page begin with "Welcome to …." NO
40 Is any advertising clearly labelled? N/A
41 Does page include link to Guestbook? Is it relevant? NO
42
Does page include "Last updated" information in clear date
format?
NO
43 Is there a Site Map? N/A
44 Does site have custom 404 errors? NO
45 Is there a "Splash" page? NO
46 Is page WCAG (or S508) Compliant? (WCAG AA) YES
47 Does HTML validate? (HTML 4 Transitional) YES
48 Is the DTD declared? YES
49 Is "Lang" attribute present? YES
50 Does page have autoplay music? Can you turn it off? NO
51 Do links make sense when read out of context? YES
52 Does page use frames? NO
53 Do main links have access keys? YES
54 Is there a "Skip Navigation" link? YES
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
123
Appendix K: PROJECT OUTLINE FORM
Project Name: Access For All
Project Code: MAW/001
DETAILS OF PROJECT:
• Investigate UCLAN’s obligations under DDA / SENDA legislation
• Select appropriate Web authoring software
• Design & Build inaccessible Web site
• Retrofit inaccessible site according to WCAG Guidelines. Site must be
accessible at WCAG ‘AAA’
• All pages to be tested in version 4+ browsers, screenreaders and aural
browsers at a screen resolution of 800 x 600 pixels
• Cascading Style Sheets must be used to enable rapid re-formatting of site
• Full course notes must be available in various file format
• Deliver 4 Training courses following Access For All Conference
• Fully working prototype to be completed by May 2002
STAFFING COSTS: Internal Funding
CONSUMABLE COSTS: N/A
AUTHORISATION/ACCEPTANCE:
LDU Signatory: Developer Signatory:
Print Name:
Pamela Houghton
Print Name:
Michael Wood
Date:
1st
October 2001
Date:
1st
October 2001
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
124
Appendix L: PROJECT COMPLETION FORM
Project Title: Access For All
Client: Learning Development Unit
Project Code: MAW/001
Description of Project Deliverables:
• Investigated UCLAN’s obligations under DDA / SENDA legislation
• Selected appropriate Web authoring software: Macromedia Dreamweaver
• Designed & Built inaccessible Web site
• Retrofitted inaccessible site according to WCAG Guidelines. Site accessible at
WCAG ‘AAA’
• All pages tested in version 4+ browsers, screenreaders and aural browsers at a
screen resolution of 800 x 600 pixels
• Cascading Style Sheets used to enable rapid re-formatting of site
• Full course notes available in DOC, RTF, & PDF file formats
• Delivered 4 Training courses following Access For All Conference
• Fully working prototype completed by May 2002
We the undersigned, confirm that the above deliverables have been provided to the client, are of
acceptable quality and constitute finished goods, in accordance with the original ‘Project Outline Form’.
On Behalf of Developer
Name: Michael Wood
Signature:
Date: 2nd
June 2002
On Behalf of the Learning Development Unit
Name: Pamela Houghton
Signature:
Date: 2nd
June 2002
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
125
References
[1]
Special Educational Needs and Disability Act 2001; © Crown Copyright 2001
http://www.hmso.gov.uk/acts/acts2001/20010010.htm
[2]
The full text of the DDA can be viewed online at
www.legislation.hmso.gov.uk/acts/acts1995/1995050.htm.
[3]
http://www.drc-gb.org
[4]
Code of Practice for providers of Post 16 education and related services - DDA 1995: Part 4;
http://www.drc.org.uk/law/codes.asp
[5]
‘Web Accessibility and the DDA’; 2001; Sloan, Martin; The Journal of Information, Law and Technology, July 2
2001
[6]
http://www.e-envoy.gov.uk/oee/oee.nsf/sections/Webguidelines-handbook-top/$file/handbookindex.htm
[7]
Section 1.4; Human Rights Act 1998 Study Guide - 2nd Edition
http://www.humanrights.gov.uk/studyguide/index.htm
[8]
Parliament Resolution (2002)0325 - eEurope 2002: Accessibility of Public Web Sites and their Content
http://europa.eu.int/information_society/topics/citizens/accessibility/Web/wai_2002/ep_res_Web_wai_2002/index_
en.htm
[9]
http://www.wired.com/news/print/0,1294,55708,00.html
[10]
http://www.uky.edu/TLC/grants/uk_ed/cases/caseslisting.html
[11]
A full transcript of the SOCOG case is online at
http://scaleplus.law.gov.au/html/ddadec/0/2000/0/DD000120.htm
[12]
http://www.w3.org/WAI/Policy/
[13]
http://www.section508.gov/
[14]
http://www.oten.edu.au/oten/frames.cfm?page=about%2Fabout1%2Ehtm
[15]
http://www.oten.edu.au/optionkeys/accessible/definition.htm
[16]
http://www.section508.gov/index.cfm?FuseAction=ContentID=14
[17]
http://www.mcu.org.uk/articles/whatisaw.html
[18]
http://www.w3.org/WAI/wcag-curric/author
[19]
http://www.w3.org/TR/WCAG10/
[20]
http://europa.eu.int/information_society/topics/citizens/accessibility/Web/index_en.htm
[21]
http://www.w3.org/WAI/wcag-curric/
[22]
http://www.starlingWeb.com/Webac.htm
[23]
http://browsers.evolt.org/ lists 115 different browsers with numerous versions.
[24]
Available from http://lynx.browser.org/
[25]
Available from http://www-3.ibm.com/able/hpr.html
[26]
Available from http://www.cast.org/udl/index.cfm?i=211
[27]
Available from http://www.microsoft.com/windows/ie/default.asp
[28]
Available from http://channels.netscape.com/ns/browsers/download.jsp
[29]
Available from http://www.opera.com/
[30]
Available from http://www.dolphinuk.co.uk/products/supernova.htm
[31]
http://www.lgInternetfamily.co.uk/fridge.asp
[32]
http://www.niad.sussex.ac.uk/
[33]
http://www.ethnologue.com/
[34]
http://www.google.com/language_tools
[35]
Adapted from ‘Who has difficulties accessing your Web site?’; Digital Media
Access Group, University of Dundee; http://www.dmag.org.uk/resources/whocannotaccess.asp
[36]
‘facts@uclan’; Department of Advancement, UCLAN, December 2002
[37]
Source: Fraser McMillan, Internet Co-coordinator, Media and Promotion Office, UCLAN
[38]
Available from http://bobby.watchfire.com/bobby/html/en/index.jsp
[39]
Web Accessibility for People with Disabilities; 2000; Paciello, Michael G;
CMP Books, Lawrence, Kansas – Pages 6, 11 ff
[40]
http://www.hesa.ac.uk/holisdocs/pubinfo/stud.htm
[41]
http://www.rnib.org.uk/wesupply/fctsheet/authuk.htm
[42]
http://www.rnid.org.uk/html/info_factsheets_general_statistics_on_deafness.htm
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
126
[43]
RNIB Factsheet on Deafness and Tinnitus;
http://www.rnid.org.uk/html/factsheets/general_statistics_on_deafness.htm
[44]
RNIB Factsheet on Deafness and Tinnitus;
http://www.rnid.org.uk/html/factsheets/general_statistics_on_deafness.htm
[45]
Available from http://ncam.wgbh.org/Webaccess/magpie/
[46]
http://www.umds.ac.uk/physiology/daveb/brainday/stats.htm
[47]
Available from http://www.scansoft.com/naturallyspeaking/
[48]
http://www.umds.ac.uk/physiology/daveb/brainday/stats.htm
[49]
Available from http://www.plainenglish.co.uk/plainenglishguide.html
[50]
‘Self-planned learning and major personal change’; 1976; Tough, Allen, Published in ‘Adult Learning:
Issues and Innovations’; ERIC Clearing House in Career Education, Northern Illinois University, pp 58-73
[51]
http://tip.psychology.org/theories.html
[52]
‘Evaluating the Value and Effectiveness of Internet-Based Learning’; Quintana, Yuri; University of Western
Ontario, Canada; http://www.isoc.org/inet96/proceedings/c1/c1_4.htm
[53]
‘Integrating Open Learning and Distance Education’; Maxwell, Leigh; Educational Technology; November-
December 1995, pp. 43-48
[54]
‘The Concept of Open Learning in South Africa’; Butcher, N; Open Learning and Educational Technology;
Vol. 25, pp. 197-204.
[55]
‘Situated Learning: Legitimate Peripheral Participation’; 1990; Lave, J., Wenger, E; Cambridge University
Press.
[56]
http://tip.psychology.org/bruner.html
[57]
‘Matters of Style’; Felder, Richard M.; ASEE Prism, 6(4), 18-23 (December 1996)
[58]
http://www.google.com/search?sourceid=navclient&q=%22Web+Accessibility%22
[59]
‘Web Accessibility for People with Disabilities’; 2000; Paciello, Michael G.; CMP Books
[60]
‘Constructing Accessible Web Sites’; 2002; Thatcher et al; Glasshaus
[61]
‘Maximum Accessibility – Making Your Web Site More Usable for Everyone’; 2003; Slatin, John M., Rush,
Sharron; Addison-Wesley
[62] http://www.w3.org/WAI/wcag-curric/
[63]
http://www.w3.org/WAI/wcag-curric/th.htm
[64]
http://www.jimthatcher.com/Webcourse1.htm
[65]
http://www.techdis.ac.uk/seven/precepts.html
[66]
http://www.macromedia.com/software/dreamweaver/productinfo/sysreq/
[67]
Software Engineering. IEEE Transactions on Computers; Vol. 25, No. 12; Boehm BW; 1976
[68]
http://sern.ucalgary.ca/courses/seng/693/W98/pand/reuse_lv.html
[69]
Why is DSDM different? http://www.dsdm.org/en/about/overview.asp
[70]
IEEE Std 610.12
[71]
‘Web Project Management: Delivering Successful Commercial Web Sites’; 2001; Freidlein, Ashley; Morgan
Kaufman Publishers; Page 193
[72]
Available from http://www.notepad.org/
[73]
Available from http://www.barebones.com/products/bbedit/index.shtml
[74]
Available from http://www.macromedia.com/software/dreamweaver/
[75]
Available from http://www.microsoft.com/frontpage/
[76]
Available from http://www.adobe.com/products/golive/main.html
[77]
Macromedia - http://www.macromedia.com/software/dreamweaver/productinfo/matrix/;
Adobe - http://www.adobe.com/products/golive/topways.html;
Microsoft - http://www.microsoft.com/frontpage/evaluation/casestudies/default.htm
[78]
Available from http://www.bradsoft.com/topstyle/
[79]
news://forums.macromedia.com/macromedia.dreamweaver or
http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&group=macromedia.dreamweaver
[80]
http://www.w3.org/Consortium
[81]
Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10/#Guidelines
[82]
Web Content Accessibility Guidelines 1.0: Section 4; http://www.w3.org/TR/WCAG10/
[83]
Web Content Accessibility Guidelines 1.0: section 5; http://www.w3.org/TR/WCAG10/
[84]
‘Who looks at our Web sites?’ Professor Mike Holmes, Department of Physics, Astronomy and Mathematics,
UCLAN, September 2001
Mick Wood (110367407)
CO4804 Project: Creating Accessible Web Sites
127
[85]
Guidelines adapted from the article “Colour Contrast and Partial Sight” by Aries Arditi, Ph.D.
http://www.lighthouse.org/color_contrast.htm
[86]
Ameritech Web Page User Interface Standards and Design Guidelines ; 1996; Detweiler, M.C.; Omanson,
R.C.; http://www.ameritech.com
[87]
Top Ten Mistakes in Web Design; 1996; Neilsen, J; http://www.useit.com/alertbox/9605.html
[88]
Usability of Several Health Information Web Sites; 2000; Bailey, R.W.; Koyani, S; Nall, J; The National
Cancer Institute Technical Report, September 7-8
[89]
Readability of Fonts in the Windows Environment; 1995; Tullis, T.S.; Boynton, J.L.; Hersh, H.; Proceedings
of CHI’95, 127-128
[90]
A Study of Fonts Designed for Screen Display; 1998; Boyarski, D, et al; CHI’98 Conference Proceedings, 87-
94
[91]
Web Style Guide; Basic Design Principles for Creating Web Sites; 1999; Lynch, P.J.; Horton, S.; Yale
University Press
[92]
Top Ten Mistakes in Web Design; 1996; Neilsen, J; http://www.useit.com/alertbox/9605.html
[93]
http://www.w3.org/WAI/wcag-curric/sam82-0.htm
[94]
http://www.plainenglish.co.uk/translations.html
[95]
http://www.w3.org/WAI/wcag-curric/sam40-0.htm
[96]
A complete list of country codes can be found at http://www.oasis-open.org/cover/iso639a.html
[97]
http://www.theusabilitycompany.com/usability/definition.html
[98]
‘Homepage Usability – 50 Websites Deconstructed’; 2002; Neilsen, J.; Tahir, M.; New Riders Publishing
[99]
http://www.cnet.com
[100]
See http://www.section508.gov/ for further information on American Section 508 regulations.
[101]
http://www.dmag.org.uk/resources/why/betterdesign.asp
[102]
http://www.w3c.org/WAI/
[103]
Source: Backup Brain http://www.backupbrain.com/2002_11_17_archive.html

Creating_Accessible_Websites_Mick_Wood_MSc

  • 1.
    Creating Accessible Web Sites: APrescriptive Approach for Web Developers Mick Wood Multimedia Development Officer Learning Development Unit University of Central Lancashire Preston PR1 2HE mawood@uclan.ac.uk +44 (0) 1772 892763
  • 2.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 1 Table of Contents 1.0 Introduction………..................................................................................................7 2.0 Disability Legislation.............................................................................................10 2.1 Disability Discrimination Act 1995...................................................................11 2.2 Special Educational Needs & Disability Act 2001............................................14 2.2.1 DRC Code of Practice.................................................................................16 2.3 Human Rights Act 1998.....................................................................................17 2.4 European Union Law .........................................................................................18 2.5 Sydney Olympic Games Legal Case..................................................................18 2.6 Legal Summary…..............................................................................................20 3.0 What is an Accessible Web Site?...........................................................................21 3.1 Definitions………..............................................................................................22 3.1.1 ‘Anyone’….. ...............................................................................................22 3.1.2 ‘Any Web Browsing Technology’..............................................................22 3.1.3 ‘Any Site’…................................................................................................23 3.1.4 ‘Full and Complete Understanding’............................................................23 3.1.5 ‘Full and Complete Ability to Interact’ ......................................................24 3.2 Definition Summary...........................................................................................24 4.0 Compliance of Existing University Web Sites ......................................................25 4.1 University of Central Lancashire.......................................................................25 4.2 UCLAN Web Site Audit....................................................................................26 5.0 Incidence of Disability...........................................................................................27 5.1 General Disability Statistics...............................................................................27 5.2 Disabled Students in HE ....................................................................................27 6.0 Barriers to Access… ..............................................................................................28 6.1 Visual Barriers to Access...................................................................................28 6.2 Aural Barriers to Access ....................................................................................30 6.3 Physical Barriers to Access................................................................................31 6.4 Cognitive Barriers to Access..............................................................................32 6.5 Summary………................................................................................................34 7.0 Learning Theories, Styles & AFA Course Strategy...............................................34 7.1 Learning Theories ..............................................................................................34 7.1.1 Internet Based Learning..............................................................................35 7.1.2 Open Learning ............................................................................................36 7.1.3 Situated Learning........................................................................................37 7.1.4 Constructivism............................................................................................37 7.2 Learning Styles… ..............................................................................................37 7.2.1 The Myers-Briggs Type Indicator (MBTI).................................................38 7.2.2 Kolb's Learning Style Model ......................................................................38 7.2.3 Felder-Silverman Learning Style Model ....................................................39 7.3 AFA Course Strategy.........................................................................................40 7.4 Summary………................................................................................................41 8.0 Accessible Web Site Resources.............................................................................41 8.1 Books…………… .............................................................................................42 8.2 Web Sites………. ..............................................................................................42 8.3 Summary………................................................................................................45 9.0 User Needs Analysis..............................................................................................45
  • 3.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 2 9.1 AFA Course Participants ...................................................................................46 9.1.1 User Groups. ...............................................................................................46 9.1.2 Primary User...............................................................................................46 9.1.3 Environment................................................................................................47 9.1.4 Hardware….................................................................................................48 9.1.5 User Tasks / Learning Objectives...............................................................48 9.2 AFA Retro-fitted Web Site ................................................................................49 9.2.1 Users Tasks / Learning Objectives .............................................................50 10.0 Web Site Project Management.............................................................................50 10.1 Waterfall……… ..............................................................................................50 10.2 System Assembly from Reusable Components ...............................................51 10.3 The Dynamic Systems Development Method .................................................51 10.4 Prototyping……...............................................................................................51 10.5 Summary………..............................................................................................52 11.0 Comparison of Web Authoring Tools..................................................................52 11.1 Macromedia Dreamweaver MX.......................................................................53 11.2 Microsoft FrontPage 2002 ...............................................................................54 11.3 Adobe GoLive…..............................................................................................55 11.4 Software Chosen ..............................................................................................56 12.0 AFA Web Site Guidelines ...................................................................................57 12.1 HTML………… ..............................................................................................57 12.1.1 The World Wide Web Consortium...........................................................58 12.1.2 The Web Accessibility Initiative (WAI)...................................................58 12.1.3 Web Content Accessibility Guidelines (WCAG) .....................................59 12.1.4 WCAG Priorities.......................................................................................60 12.1.4.1 Priority 1 ............................................................................................60 12.1.4.2 Priority 2 ............................................................................................60 12.1.4.3 Priority 3 ............................................................................................60 12.1.5 WCAG Conformance................................................................................60 12.1.6 Browser Specifications .............................................................................61 12.1.7 Dept of Physics, Astronomy & Mathematics ...........................................61 12.1.8 Summary…...............................................................................................62 12.2 Colour………… ..............................................................................................62 12.3 Content……….................................................................................................64 12.3.1 The screen layout will be consistently formatted .....................................65 12.3.2 Page sizes will be limited to 30K..............................................................65 12.3.3 Frames will not be used ............................................................................65 12.3.4 Paragraphs and sentences will be kept short.............................................65 12.3.5 Each page will have a descriptive and different title, a clear heading and logical structure…................................................................................................66 12.3.6 Font Guidelines.........................................................................................66 12.3.7 Links will be clearly identified .................................................................66 12.3.8 Pages will be fluid/flexible .......................................................................67 12.3.9 Pages will be device independent .............................................................67 12.3.10 Content will comply with Plain English Guidelines...............................67 13.0 Creating the AFA Evolutionary Prototype ..........................................................67 13.1 Splash Screen – index.htm...............................................................................68 13.2 Template – Main.dwt.......................................................................................70 13.3 Home Page – home.htm (index.htm)...............................................................75 13.4 Accessible Tables – table.htm..........................................................................76
  • 4.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 3 13.5 Accessible Forms – forms.htm ........................................................................77 13.6 Images – image.htm…………………………………………………………. 79 13.7 Image Map – imagemap.htm ...........................................................................81 13.8 countries.htm…................................................................................................81 13.9 Summary………..............................................................................................82 14.0 Evaluation of the AFA Evolutionary Prototype...................................................82 15.0 Working Prototype...............................................................................................84 15.1 Site Definition…..............................................................................................84 15.2 Meta Data…….................................................................................................84 15.2.1 Keywords…..............................................................................................84 15.2.2 Description................................................................................................85 15.3 Tabindex and Accesskeys ................................................................................85 15.4 Status Bar Messages ........................................................................................87 15.5 Changing the default Dreamweaver template..................................................87 15.6 User Manual….................................................................................................87 16.0 Evaluation & Feedback........................................................................................88 16.1 Comments…….. ..............................................................................................89 16.2 Usability Testing..............................................................................................91 16.2.1 Lack of Tag Line.......................................................................................92 16.2.2 Homepage Link to Homepage ..................................................................92 16.2.3 ‘Pop-up’ Windows....................................................................................92 16.2.4 ‘Last Updated’ Information ......................................................................93 17.0 Conclusion………. ..............................................................................................93 17.1 Economic Reasons...........................................................................................94 17.2 Selfish Reasons. ...............................................................................................94 17.3 Altruistic Reasons ............................................................................................94 17.4 Design Reasons................................................................................................95 18.0 Further Reflections...............................................................................................95 Appendix A: Student Disability Tables 2000/2001.....................................................98 Appendix B: UCLAN Web Site Structure..................................................................99 Appendix C: WCAG Guidelines ..............................................................................101 Appendix C1: Guideline 1 ....................................................................................101 Appendix C2: Guideline 2 ....................................................................................102 Appendix C3: Guideline 3 ....................................................................................102 Appendix C4: Guideline 4 ....................................................................................102 Appendix C5: Guideline 5 ....................................................................................103 Appendix C6: Guideline 6 ....................................................................................103 Appendix C7: Guideline 7 ....................................................................................104 Appendix C8: Guideline 8 ....................................................................................104 Appendix C9: Guideline 9 ....................................................................................104 Appendix C10: Guideline 10 ................................................................................105 Appendix C11: Guideline 11 ................................................................................105 Appendix C12: Guideline 12 ................................................................................106 Appendix C13: Guideline 13 ................................................................................106 Appendix C14: Guideline 14 ................................................................................106 Appendix D: HTML Code Comparison ....................................................................107 Appendix E: Internet Trends.....................................................................................108 Appendix E1: Demographics (users shown in millions) ......................................108 Appendix E2: User Web Browser Settings (April 2003)......................................108 Appendix E3: User Screen Resolution Settings (April 2003)...............................109
  • 5.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 4 Appendix E4: User Operating Systems (April 2003) ...........................................109 Appendix E5: Internet Connection Speeds (December 2001)..............................110 Appendix E6: User Colour Settings (April 2003).................................................110 Appendix F: Department of Physics, Astronomy and Mathematics..........................111 Appendix F1: Origin of Web Site Visitors ...........................................................111 Appendix F2: Browser Used by Web Site Visitors ..............................................111 Appendix F3: Operating System Used by Web Site Visitors...............................111 Appendix G1: Customising Internet Explorer ..........................................................112 Applying font and colour changes .........................................................................112 Changing the font…...............................................................................................112 Altering text size……............................................................................................112 Changing text and background colour ...................................................................112 Turning off images….............................................................................................113 Other Options……….............................................................................................113 Macintosh Users…….............................................................................................113 Appendix G2: Customising Netscape 4.x.................................................................114 Changing font size…. ............................................................................................114 Changing font settings ...........................................................................................114 Changing the colour of the background and text...................................................114 Turning images off….............................................................................................115 Turning off style sheets or JavaScript....................................................................115 Appendix G3: Customising Netscape 6....................................................................115 Appendix G4: Customising Opera 6.........................................................................116 Font size…………….............................................................................................116 Font, colour and link settings.................................................................................116 Other style settings….............................................................................................117 Switching between styles.......................................................................................117 Turning images off….............................................................................................117 Appendix G5: Setting Up Internet Explorer for Supernova .....................................117 Appendix H: FONT Tags...........................................................................................118 Appendix I: AFA Training Evaluation Form.............................................................120 Appendix J: AFA Usability Tests.............................................................................121 Appendix K: PROJECT OUTLINE FORM ..............................................................123 Appendix L: PROJECT COMPLETION FORM ......................................................124 References……………..............................................................................................125 Access for All Manual……………...………………………………………..Appended
  • 6.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 5 Abstract The Special Educational Needs and Disability Act 2001 (SENDA) received royal assent on 11th May 2001 and subsequently came into force on September 1st 2002. Although many Higher Education (HE) and Further Education (FE) provisions were already covered by the Disability Discrimination Act 1995 (DDA), education per se was exempt. SENDA removes the exemption and has become the catalyst for many HE and FE institutions to seriously consider disability issues. This project considers one aspect of SENDA, namely the provision of electronic information, whether general in nature or course specific, via the World Wide Web. The ‘Access for All’ project involves training Web developers to retrofit, or convert, an inaccessible Web site (and therefore illegal under SENDA) into an accessible one. This is achieved by the creation of a ‘bad’ site using text, images, image maps, tables, forms, and hyperlinks to highlight the majority of problems faced by disabled Web site visitors. A comprehensive user manual explains the problems and how to rectify them. Upon completion of the course Web developers will be able to design and create legal, SENDA compliant, Web sites.
  • 7.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 6 Acknowledgements Thanks to Helen Campbell, Principal Lecturer, Department of Computing, University of Central Lancashire (UCLAN), for her help, support, advice, and general project supervision. Thanks to Peggy Gregory, Senior Lecturer, Department of Computing, UCLAN, for her help support and advice. Thanks to Pam Houghton, Head of Learning Development Unit, UCLAN, for her help, support, and advice. Thanks to Fraser McMillan, Internet Co-coordinator, Media and Promotion Office, UCLAN for providing the UCLAN Web site statistics. Thanks to Zylpha Thomson, Head of Marketing Support, Marketing Services, Department of Advancement, UCLAN, for providing access to the facts@uclan document. Thanks to Professor Mike Holmes, Department of Physics, Astronomy and Mathematics, UCLAN for providing Department Web site statistics. Finally, thanks to all those who undertook the ‘Access for All’ training course and provided useful feedback and encouragement.
  • 8.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 7 1.0 Introduction This document describes the creation of the ‘Access for All’ (AFA) project. AFA tackles one aspect of student life, namely access to Web based information. This information may be general in nature or specific to a particular course. In order to comply with disability legislation, such information must be accessible to all students. It would be very unlikely that the AFA project would ever have been developed if there was no legal reason to do so. There are many supplementary benefits to creating accessible Web sites but the perceived costs involved would probably have prevented academic institutions from implementing a Web accessibility policy. AFA sets out to train university Web developers to create accessible Web sites. This is achieved by showing the developers, using both Web and printed material, how to retrofit a pre-built inaccessible site. Many university staff responsible for the creation and maintenance of Web sites are not dedicated Web developers. They may be office administrators with numerous other roles and responsibilities or they may be university lecturers who are being encouraged to provide e-learning materials, perhaps in an effort to attract distance learners. Many of these staff developers will not understand nor be able to write Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS) or Extensible Hyper Text Markup Language (XHTML). Instead they will rely on ‘What You See Is What You Get’ (WYSIWYG) editors such as Macromedia Dreamweaver or Microsoft FrontPage. In order to create accessible Web sites it is vital that the Web developers know and understand these ‘Web-based’ languages, at least to a basic level. Users also need to understand the concept of usability. It is perfectly possible to create a
  • 9.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 8 Web site that is technically correct yet it is still inaccessible. The AFA project addresses these issues. I will begin by considering whether academic institutions are legally bound to provide or create accessible Web sites. I will then define what an accessible Web site actually is. As we shall see, the definition is extremely wide reaching and inclusive. I will then consider the incidence of disability worldwide, including the UK, and specifically within HE. I will then identify and examine the problems faced by four generalised categories of disabled people as they ‘surf’ the World Wide Web. It is only by understanding these ‘barriers to access’ that accessible Web sites can be created. Learning theories and styles are then considered followed by a discussion of existing Web resources. From that, two User Needs Analysis’ (UNA’s) are constructed followed by a discussion of Web site design methodology. A comparison of Web site authoring programs follows before the actual implementation of the AFA project is detailed. An evolutionary prototype was constructed and, following positive feedback, a fully functional course developed. I conclude with a number of observations and recommendations.
  • 10.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 9 The final project can be seen online at the following URL’s. Initial ‘Bad’ Web site http://www.uclan.ac.uk/ldu/resources/accessibility/afa/bad/ Retrofitted ‘Good’ Web site http://www.uclan.ac.uk/ldu/resources/accessibility/afa/good Training Course (Word - 519KB) http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.doc Training Course (RTF - 8.28 MB) http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.rtf Training Course (PDF - 556 KB) http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.pdf All Files (ZIP - 2.69 MB) http://www.uclan.ac.uk/ldu/resources/accessibility/afa/afa.zip
  • 11.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 10 2.0 Disability Legislation This section will outline the disability legislation applicable to the UK as understood by the author at the time of writing (April 2003) and provides a justification for developing the AFA project. The number of students with, and declaring that they have, a disability is equivalent to the number of students in a large university (see Appendix A). The passing of the Special Educational Needs and Disability Act 2001 (SENDA) [1] has conferred upon these students’ new rights, rights which pervade every area of academic life. SENDA came into force on September 1st 2002 and introduced the right for disabled students not to be discriminated against in education, training, and any other services provided wholly or mainly for students, or those enrolled on courses. SENDA places educational institutions in the same position as other service providers; breaches of the SENDA legislation can result in civil proceedings and potentially high awards against governing bodies. SENDA requires that educational institutions consider the provision they make for disabled students and prospective students generally. The duties cover all aspects of student life including academic activities and wider services such as accommodation and leisure facilities, examinations and assessments, library and learning resources, and Web sites.
  • 12.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 11 2.1 Disability Discrimination Act 1995 The Disability Discrimination Act (DDA) [2] was passed in 1995 to introduce new measures aimed at ending the discrimination faced by many disabled people. Education was exempted from the DDA at that time although the exemption was expected to be removed in 2004. In fact the introduction of SENDA removed the exemption in 2002. Part II of the DDA makes discriminatory treatment illegal in relation to employment; part III of the Act makes discriminatory treatment illegal in relation to access to goods, facilities and services, and the selling, letting or managing of land or premises. For employers these measures came into force on December 2nd 1996, for service providers (e.g. businesses and organisations) the measures were introduced over a period of time. Since December 1996 it has been unlawful to treat disabled people less favourably than other people for a reason related to their disability. Since October 1999 service providers have had to make reasonable adjustments for disabled people, such as providing extra help or making changes to the way they provide their services. From 2004 they may have to make reasonable adjustments to the physical features of their premises to overcome physical barriers to access. In addition, the DDA requires schools, colleges and universities to provide information for disabled people and allows the Government to set minimum standards to assist disabled people to use public transport easily. Many people, both with and without disabilities, are affected by the Act. The DDA gives new rights to people who have or have had a disability which makes it difficult for them to carry out normal day-to-day activities. The disability could be
  • 13.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 12 physical, sensory, or mental and must also be substantial and have a long-term effect (the disability must last or be expected to last for 12 months). Conditions which have a slight effect on day-to-day activities, but are expected to become substantial, are covered. Severe disfigurement is also classed as a disability. Employers and people who provide goods and services to the public will have to take reasonable measures to make sure that they are not discriminating against disabled people. Some people will have to take measures both as an employer and as someone who provides goods and services to the public. People who sell or let property will have to ensure that they do not unreasonably discriminate against disabled people. It will be against the law for an employer to treat a disabled person less favourably than someone else because of their disability, unless there is good reason. This applies to all employment matters (including recruitment, training, promotion and dismissal). In order to help a disabled person to do the job, employers will have to look at what changes they could make to the workplace or to the way the work is done, and make any changes which are reasonable. Employers will be able to take into account how much the changes would cost, and how much they would help, when considering what is reasonable. In the same way, it will be against the law for trade associations, trade unions and professional bodies to treat a disabled person less favourably than someone else. Employers will still be able to recruit or promote the best person for the job and they will not be expected to make any changes which would break health and safety laws. The employment part of the DDA does not apply to employers who employ fewer than 20 people. However, they are encouraged to follow good practice guidelines.
  • 14.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 13 It also does not apply to operational staff employed in the armed forces, the police, the prison service, the fire service, or to anyone employed on board ships, hovercrafts or aeroplanes. The Act will affect anyone who provides goods, facilities or services to members of the public, whether paid for or free. This could range from buying bread in a supermarket, using the facilities in a launderette, or borrowing a book from a public library. Private clubs are not included. It will be against the law to refuse to serve someone who is disabled. Likewise, it will be against the law to offer a disabled person a service which is not as good as the service being offered to other people. It will also be against the law to provide a service to a disabled person on different terms to those offered to other people. If the health or safety of the disabled person, or other people, would be in danger, it would not be against the law to refuse to provide the service to a disabled person or to provide it on different terms. Other exceptions would arise if a disabled customer was not capable of understanding the terms of a contract or if providing the service, or the same standard of service, would deny service to other customers. It will be against the law for someone to run a service, or provide goods or facilities, in a way which makes it impossible or unreasonably difficult for a disabled person to use the service or goods. It will not be against the law, however, if the way the service is run is fundamental to the business. People will have to provide equipment or other helpful items which will make it easier for disabled people to use their service, if it is reasonable to do so. People will have to remove physical obstructions (for example, widening entrance doors) or provide other ways of letting disabled people use their services.
  • 15.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 14 Service providers will not be able to charge a disabled person more to meet the cost of making it easier for them to use their service. It will be against the law for anyone who sells or lets land or property (and their agents) to unreasonably discriminate against disabled people. A landlord who rents 6 or fewer rooms in his home would not be affected. People selling or renting properties do not have to make adjustments to the property to make it accessible. The Government will be able to set minimum standards for new public transport vehicles (taxis, buses, coaches, trains and trams) so that disabled people, including people who use a wheelchair, can use them. For example, disabled people who use wheelchairs will eventually be able to hire taxis in the street or at a taxi rank. The DDA ensures recognition of the needs of disabled people wishing to study and the provision of better information for parents, pupils and students. Schools will have to explain their arrangements for the admission of disabled pupils, how they will help these pupils gain access, and what they will do to ensure they are treated fairly. FE & HE institutions funded by the Further and Higher Education Funding Councils will have to publish disability statements containing information about facilities for disabled people. Local Education Authorities will have to provide information on their further education facilities for disabled people. As can be seen, the implications of the DDA are far reaching and pervasive. 2.2 Special Educational Needs & Disability Act 2001 SENDA became law on 11th May 2001. As a result, discrimination against disabled students in the provision of education, training and other related services became unlawful. The legislation applies to England, Wales and Scotland but not Northern Ireland and covers both FE and HE educational institutions.
  • 16.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 15 SENDA is an amendment to the 1995 DDA and is, in effect, DDA Part IV. SENDA only protects people who are defined as disabled according to that legislation. The definition of disability is based on an individual’s ability to carry out ‘normal day-to- day’ activities. (An interesting aside concerns the sitting of examinations. A typical examination might involve writing four essays in three hours. This is NOT considered to be a normal day-to-day activity and is therefore not covered under SENDA.) The law affects all education and training provided by HE and FE institutions and also includes admissions to courses, exclusions, and the provision of other student services. ‘Student services’ is an all inclusive term, and includes services of any description provided wholly or mainly for students or those enrolled on courses. This includes not only education, but residential accommodation, leisure facilities, catering and library facilities, careers and welfare services, and services already covered by Part III of the existing DDA. It is now unlawful for institutions or other education providers to treat a disabled person ‘less favourably’ than they treat, or would treat, non-disabled people for a reason which relates to the person’s disability. For example, it would be unlawful for an institution to turn a disabled person away from a course, or mark them down in an assessment, because they had dyslexia or were deaf. Part of not discriminating is making ‘adjustments’. If a disabled person is at a ‘substantial disadvantage’, the education provider is required to take such steps as are reasonable to prevent that disadvantage. This might include changes to policies and practices, course requirements, work placements or physical features of a building. It may also be necessary to provide interpreters or other support workers, deliver courses in alternative ways, or provide course materials in other formats.
  • 17.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 16 The duty to make reasonable adjustments is a duty to disabled people generally, not just particular individuals. This ‘anticipatory’ aspect effectively means that providers must consider what sort of adjustments may be necessary for disabled people in the future and, where appropriate, make adjustments in advance. There is a responsibility on education providers to find out whether individuals have disability-related needs. SENDA legislation came into force on 1st September 2002 with two important exceptions; reasonable adjustments involving the provision of auxiliary aids and services (such as interpreters etc) come into force on 1st September 2003; the requirement to make physical adjustments to buildings comes into force on the 1st September 2005. 2.2.1 DRC Code of Practice Having established that HE & FE institution Web sites are covered under DDA and SENDA legislation I will now consider how this works in practice. The Disability Rights Commission (DRC) [3] is an independent body, established by Act of Parliament to eliminate discrimination against disabled people and promote equality of opportunity. On 26 February 2002, the DRC published a new, revised Code of Practice on the rights of access to goods, facilities, services and premises for disabled people.[4] This statutory Code, agreed by Parliament, provides detailed advice on the way the law should work. It also provides practical examples and tips. ‘The Code's primary function is to provide guidance for both service providers and disabled people and whilst not an authoritative statement of the law, there is a requirement that the court consider any part of the Code which seems relevant.’ [5]
  • 18.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 17 The May 2002 Guidelines for UK Government Web sites [6] refers to the Code four times. With regard to providing services Paragraph 2.14 of the Code lists numerous services which are covered. In paragraph 2.17 a Web related example is given, clearly establishing that Web sites are classed as a service and therefore covered under the DDA. ‘An airline company provides a flight reservation and booking service to the public on its Web site. This is a provision of a service and is subject to the Act.’ Accessible Web sites are clearly stated as examples of reasonable adjustments in Paragraph 5.23, provision for people with a hearing disability, and paragraph 5.26, provision for people with a visual impairment. 2.3 Human Rights Act 1998 The Human Rights Act came into force on 2nd October 2000 [7], bringing some of the European Convention on Human Rights into UK law. The rights are binding on public bodies. Article 2 of the First Protocol of the Convention provides a right ‘not to be denied access to education’. European case law has defined the right to education as including a right to the ‘full benefit of that education’. Article 14 of the Convention provides a right not to be discriminated against in the enjoyment of Convention rights on 'any ground such as sex, race, colour, language, religion, political or other opinion, national or social origin, association with a national minority, property, birth or ‘other status'.
  • 19.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 18 Disability is not specifically mentioned but is probably covered by the phrase 'other status'. 2.4 European Union Law The European Union (EU) recently passed EU Law Parliament Resolution (2002)0325 regarding the Accessibility of Public Web Sites. This was adopted on 13th June 2002. [8] In note 31 of the resolution the EU has stressed that, for Web sites to be accessible, it is essential that they are ‘WCAG AA’ compliant. In other words priority 2 of the Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) guidelines must be fully implemented. A full discussion of the WCAG guidelines can be found in Section #.#. EU legislation is legally binding on UK courts and therefore should be taken as the legal definition of Web Accessibility. 2.5 Sydney Olympic Games Legal Case At the time of writing there have been very few legal cases relating to accessible Web sites. The majority of potential cases tend to be settled out of court because the defendants wish to avoid negative publicity. AOL, Barnes & Noble, and Claire’s Stores [9] have already settled potential cases out of court without admitting liability. The University of Kentucky has a list of University related disability legal cases, [10] most of which have ended with the Universities agreeing to put things right – ‘voluntary resolution’.
  • 20.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 19 There has been one key legal action which was brought under the Commonwealth Disability Discrimination Act 1992, namely Bruce Lindsay Maguire v Sydney Organising Committee for the Olympic Games (SOCOG) [11] This case is not legally binding on UK courts but it is likely to be regarded as highly persuasive. It is common for the UK courts to consider cases in other courts when dealing with ‘new technology’ issues. Bruce Maguire was born blind and uses a refreshable Braille display. He complained that the Sydney Olympic Games Web site was not accessible to him as a blind person. In particular, alternative text was not provided on all of the site images and imagemaps. Furthermore Maguire could not access the Index of Sports or the Results Tables. The Human Rights & Equal Opportunities Commission (HREOC) delivered a landmark ruling on 24th August 2000 when they found that SOCOG were in breach of Australia's DDA. SOCOG ignored the ruling and were fined A$20,000. The HREOC dismissed defence arguments presented by SOCOG and IBM (who built the site). The defendants argued that it would be excessively expensive to retrofit the site to remove accessibility barriers and (over) estimated retrofit costs to be in the region of A$2.2 million. This defence was rejected by the HREOC. SOCOG did not actively cooperate with the HREOC. The defendants withheld site information from Maguire arguing that ‘it was commercially sensitive’ although this argument was rejected by the HREOC. Moreover, the defendants did not return telephone calls or reply to correspondence. They also refused to provide a list of witnesses as directed by the HREOC.
  • 21.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 20 SOCOG never seriously considered disability issues and attempted to ‘bully’ their way out of their obligations under the law. This case highlights the fact that compliance with Web accessibility legislation is not optional. FE and HE institutions need to consider the implications of this landmark case. 2.6 Legal Summary Disability legislation regarding Web accessibility has been passed in many countries around the world [12]. The vast majority of these countries cite ‘WCAG AA’ as the benchmark in their definition of Web accessibility, the one main exception being the United States which has provided its’ own guidelines, namely Section 508 of the Rehabilitation Act of 1973 [13]. A discussion of Section 508 is not relevant because the AFA project is aimed at UK universities. However, sites which comply with UK legislation would automatically comply with American legislation; Section 508 criteria is not as rigorous as elsewhere. This section has clearly demonstrated that UK FE and HE institutions are legally bound under SENDA legislation, in effect DDA Part IV, to create accessible Web sites. The potential consequences for non-compliance can be seen in the Maguire v. SOCOG legal case. If an organisation as big as SOCOG, in partnership with IBM, can be prosecuted through the courts, UK universities must face the fact that they are not above the law. The aim of the AFA project is to prevent FE and HE institutions from falling foul of disability legislation.
  • 22.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 21 3.0 What is an Accessible Web Site? In order to train Web developers to design and create accessible Web sites it would be useful to define what an accessible Web site actually is. This will provide a number of useful guidelines and constraints. There are numerous definitions of Web accessibility including the above mentioned ‘WCAG AA’ legal recommendation. The Open Training and Education Network (OTEN), the largest provider of distance education and training in Australia with more than 35 000 students enrolled in 660 fully accredited subjects and modules, [14] defines an accessible Web site as one in which ‘all users can easily enter and navigate the site, access all of the information and use all the interactive features provided.’ [15] (Emphasis mine) Section 508 of the US Rehabilitation Act 1973 states that a Web site is accessible when ‘individuals with disabilities can access and use them as effectively as people who don’t have disabilities’.[16] The Making Connections Unit (MCU), based in Glasgow Caledonian University, consider four definitions although they actually recommend number 4. [17] An Accessible Web site is one that will be: - 1. accessible to everyone 2. accessible to the intended audience - though perhaps not accessible to other groups 3. accessible to disabled people 4. accessible to machines first, and people second The definition with perhaps the most authority was written by Chuck Letourneau [18], the man who co-chaired the working group that developed the W3C's Web Content Accessibility Guideline Recommendation 1.0 [19], the de facto international
  • 23.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 22 standard for the design of accessible Web sites [20], and also co-authored the online training Curriculum for the Web Content Accessibility Guidelines 1.0 [21]. Letourneau describes Web accessibility thus: - ‘anyone using any kind of Web browsing technology must be able to visit any site and get a full and complete understanding of the information contained there, as well as have the full and complete ability to interact with the site.’ [22] (Emphasis mine) 3.1 Definitions 3.1.1 ‘Anyone’ ‘Anyone’ means every person regardless of their sex, race, nationality or ability - from people having the full range of visual, aural, physical and cognitive skills and abilities to those who are limited in any, or all, of them. 3.1.2 ‘Any Web Browsing Technology’ There are more than 100 different Web browsers, many of which have numerous versions [23]. This figure includes text-only browsers such as Lynx [24], speech browsers such as the IBM Homepage Reader [25] and the Cast E-Reader [26], as well as the more popular browsers such as Internet Explorer [27], Netscape [28] and Opera [29]. Web pages can also be viewed by various other devices including screen readers such as Dolphin Supernova [30], Personal Digital Assistants (PDA’s), Java and WAP (Wireless Application Protocol) phones, Web and interactive TV and there is even an Internet fridge [31]. An excellent source of information on dozens of accessibility related products is the TECHDIS Accessibility Database [32].
  • 24.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 23 To comply with our accessible Web site definition, pages should be viewable on all of these devices. 3.1.3 ‘Any Site’ ‘Any site’ means literally any and all sites. Some Web developers may argue that their site has been created for a specific group of people and therefore it is not necessary for their site to comply with our Web accessibility definition. This argument fails on three counts, not counting any legal ramifications. Firstly, any member of the intended audience may become disabled at a future time, secondly, disabled users wishing to join this selected group are prevented from doing so, and thirdly, users who may be interested in the subject matter are prevented from accessing the information. 3.1.4 ‘Full and Complete Understanding’ There are approximately 6,800 spoken languages with a further 41,000 distinct dialects. [33] Unfortunately the content of the vast majority of Web sites is written in just one language. In the case of UCLAN that language is obviously English. For many students English is not their first language yet, to comply with our definition, all Web pages must be fully and completely understandable to them. Some sites now use automatic language translation programs. For example, Google now offer their search engine Web site in 53 languages and users can set their user interface preference in one of 88 different languages. Google also offer a Web page translation service in 12 languages. [34] Unfortunately the resulting translations are not totally accurate and can confuse students.
  • 25.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 24 Even assuming a visitor is viewing a page written in their native language there is no guarantee that full understanding will follow. Academics tend to write using lots of jargon. The words may be English, but the concepts are difficult to follow. The author needs to ensure that the content is as understandable as possible. 3.1.5 ‘Full and Complete Ability to Interact’ Many Web pages include elements which the user is expected to interact with. In an educational setting this could include elements such as an online quiz, an application form or a drag and drop exercise. In order to comply with our accessible Web site definition, all users should be able to fully complete these activities. For example, a drag and drop exercise may involve the user dragging various items from one side of the computer screen and placing them in selected locations in another part of the screen. This assumes that the user can actually see the screen and can use a mouse. In order to comply with disability legislation the exercise must be created so that a visually or physically disabled user can complete it using alternative methods. 3.2 Definition Summary Letourneau’s definition of Web accessibility is the one chosen as the working definition in the ‘Access for All’ project. ‘anyone using any kind of Web browsing technology must be able to visit any site and get a full and complete understanding of the information contained there, as well as have the full and complete ability to interact with the site.’
  • 26.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 25 The following groups of people would benefit from having access to accessible Web sites which comply with this definition. [35] 1. People who may not be able to see, hear, or move. 2. People who may not be able to process some types of information easily, or at all. 3. People who have difficulty reading or understanding text. 4. People who do not have, or are not able to use, a keyboard or mouse. 5. People who have a text-only screen, a small screen, or a slow Internet connection. 6. People who do not speak or understand the language in which the document is written. 7. People who are in a situation where their eyes, ears, or hands are busy (e.g. driving to work, working in a noisy / loud environment). 8. People who have an old version of a browser, a different browser entirely, a voice browser, or a different operating system. 9. People who do not have access to audio speakers. 4.0 Compliance of Existing University Web Sites 4.1 University of Central Lancashire UCLAN is assumed to be a typical UK University. It is also assumed that the accessibility / inaccessibility of the UCLAN Web site will be fairly representative of the vast majority of FE and HE institutions.
  • 27.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 26 UCLAN is the sixth largest university in England with more than 26,000 students and 2000 staff. [36] Students can enrol on more than 550 courses with a further 3600 possible subject combinations - students can effectively design their own course. UCLAN has 21 Partner Colleges and is also partnered with 120 institutions worldwide. UCLAN currently has more than 2000 international students enrolled on courses. UCLAN has set a target of attracting 50,000 students by 2010. This doubling of student numbers will necessitate a large increase in distance learning - the current campus could not physically accommodate such an influx of students. Distance learning, via the World Wide Web, will therefore be the main way of attracting new students and is becoming a central part of the delivery of both on and off campus learning programmes. Distance Learning programmes must be accessible to disabled students. 4.2 UCLAN Web Site Audit A brief audit of the UCLAN Web site in March 2003 identified more than 13000 corporate Web pages [37] as shown in Appendix B. These figures do not include individual staff pages. A brief assessment of the site in September 2001, using ‘Bobby’ [38], highlighted the fact that more than 80% of the Web pages did not meet the requirements of ‘WCAG A’, never mind the preferred ‘WCAG AA’ benchmark. This situation has now largely been rectified and UCLAN aims to be fully ‘WCAG AA’ compliant by September 2003. This audit confirms Paciello’s assertion that the vast majority of Web pages were technically illegal prior to SENDA. (See Section 5.1)
  • 28.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 27 5.0 Incidence of Disability 5.1 General Disability Statistics It is very difficult to obtain accurate statistics regarding the incidence of disability. According to Paciello [39] there are approximately: - 1. 500 million disabled people worldwide 2. 8.5 million disabled people in UK 3. 52.6 million disabled people in USA 4. 37 million disabled people in EU 5. 4.2 million disabled people in Canada 6. 3.7 million disabled people in Australia Temporary disabilities are NOT included in these statistics. Additionally, Paciello estimates that between 95% and 99% of all Web sites are inaccessible. 5.2 Disabled Students in HE According to the Higher Education Statistics Agency more than 30,000 students with a disability started programmes of study in UK higher education institutions during the 2000-01 academic year, representing over 4% of all new students. Of those students with a disability, approximately 34% were dyslexic, 3% blind or partially sighted, 7% deaf or hearing impaired, 5% were wheelchair users or had mobility problems, 4% had mental health difficulties, 27% had an unseen disability, 6% had multiple disabilities and 13% had some other disability. [40] These numbers probably underestimate the total number of students who consider themselves to have a disability, the numbers actually with a disability, and the numbers covered by SENDA.
  • 29.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 28 The official Higher Education Student Disability Tables for 2000/2001 can be seen in Appendix A. 6.0 Barriers to Access Users with disabilities face many different problems when they try to access the Internet. The AFA course needs to take account of these difficulties. There are numerous types (and sub-types) of disability. For the purposes of the AFA project these types have been separated into four generic groups. These groups, in no particular order, include users with the following disabilities. 1. visual 2. aural 3. physical (motor) 4. cognitive It is noted that certain individuals may suffer from multiple disabilities. For each disability group I will consider the ‘barriers to access’ faced by that group and the Assistive Technology (AT) available to them. AT enables users who are affected by these various barriers to access the Web (provided the pages are coded correctly). 6.1 Visual Barriers to Access This category includes people with little or no vision, people with colour blindness, people who use Screen Readers and people who use screen magnifiers.
  • 30.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 29 According to the Royal National Institute of the Blind (RNIB) [41] there are more than 350,000 people in the UK who are blind or partially sighted, that is 1 person in 60 of the whole population. Moreover, 6 out of 10 visually impaired adults have another illness or disability. Many people assume that visually disabled means total blindness. In fact only 18% of the visually impaired are totally blind. Likewise, people assume that the visually disabled can read Braille and have a guide dog. According to the RNIB only 19,000 people can read Braille and only about 4,000 people have a guide dog. Users with visual disabilities will, to varying degrees, have difficulty seeing the computer screen. This can range from total blindness where the user cannot see anything, to somebody who is near or far sighted and therefore able to read the text with the aid of spectacles or perhaps a screen magnifier. Some dyslexics have problems with certain colour combinations, as do people with colour blindness. There is a range of AT designed to help people who have trouble seeing the screen including: • Screen readers o Dolphin Supernova o Jaws • Web browsers o Cast E-Reader o IBM Homepage Reader • Refreshable Braille displays • Voice recognition software • Screen magnification software
  • 31.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 30 In effect all of these AT solutions perform the same function; namely they convert on- screen text into a format which can be understood by the disabled person. Web developers can also code special ‘skip navigation’ links which provide a means for visually disabled users to avoid the main navigation controls of a Web page and jump straight to the main content of the page. This means that the visually disabled user does not have to listen to the screen reader reading out the navigation links on every page. 6.2 Aural Barriers to Access This category includes people who have been deaf from birth, deafened people, and those who have partial hearing. A deafened person is someone who was born with hearing but then developed a hearing impairment later in life, perhaps as a result of an illness or an accident. According to the Royal National Institute of the Deaf (RNID) [42] 8.7 million people in the UK have a hearing impairment, that is 1 in 7 of the whole population. This number is rising as the number of people aged over 60 increases. About 698,000 of these are severely or profoundly deaf, a high proportion of which have other disabilities as well. There are an estimated 123,000 deafened people in the UK aged 16 and over. 4.7 million people, 1 person in 10, suffer from tinnitus [43] and 55% of all people over 60 years of age are deaf or hard of hearing. 25,000 children in the UK under the age of 15 are permanently deaf or hard of hearing. There are also 23,000 deafblind people in the UK. In the UK there are approximately 50,000 British Sign Language (BSL) users. [44]
  • 32.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 31 The barriers to access faced by users with hearing difficulties depends, to a certain extent, on whether the user has been deaf from birth or deafened later in life. It is important from a Web developer’s perspective to differentiate between the two groups. Users who are deaf from birth communicate using BSL. BSL is a language in its own right and has different grammar and structure to English. BSL users must learn English in the same way that others may learn French or German. Web developers cannot assume that BSL users can read and understand the content of their Web pages. There is an assumption that users who become deaf later in life can read and understand English. It may be true in some cases but many of these users communicate using Sign Supported English (SSE); a combination of BSL and English. Users with hearing difficulties require visual representation of auditory information such as a transcript or captions. MAGpie [45] is a free piece of software enabling the creation of captions and subtitles for, and integrating audio descriptions with, digital multimedia such as video. 6.3 Physical Barriers to Access This is a wide ranging category and includes people with a range of physical disabilities including amputees, people who may have suffered a stroke, have spinal cord injuries, lost the use of limbs or digits, and people with manual dexterity or physical co-ordination problems.
  • 33.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 32 According to the United Medical and Dental Schools of Guy's and St Thomas' Hospitals (UMDS) [46], Myalgic Encephalomyelitis (ME) is thought to affect about 2% of the UK population at any one time, one in 100 people over the age of 65 have Parkinson's disease, and eight in 100 over the age of 65 are affected by Alzheimer’s disease. Most Web sites are created assuming that the user can see the screen and use a mouse. Many physically disabled users cannot use a mouse. Many Web sites include links which are extremely small. Again many physically disabled users, even if they can use a mouse, cannot hold the mouse pointer steady for a long enough period of time to enable them to select the link. There are a number of AT devices available to help users with physical disabilities including Retinal scanning devices and Voice Recognition software such as Dragon Naturally Speaking [47] . In addition the Windows operating system has a number of built-in accessibility features such as ‘sticky keys’. Sticky Keys allow users to select keyboard combinations one key at a time. In addition Web developers can add special code to their Web pages to allow physically disabled users to navigate their site. This special code allows physically disabled users to navigate via their keyboard using special access keys. Access keys enable users to quickly visit key links within a site. 6.4 Cognitive Barriers to Access ‘Cognitive disability’ is any disability that affects mental processes including mental retardation, attention deficit disorder, brain damage, dementia and other psychiatric and behavioural disorders. This category also includes people with learning difficulties and dyslexia / dyscalculia. People with learning difficulties may have
  • 34.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 33 problems with literacy, information technology, and understanding information generally. Dyslexia includes people who have problems reading, writing and spelling. Dyscalculia describes people who have problems with mathematical calculations. ‘Mental load’ is also a factor; that is, the demands placed upon a person's cognitive abilities when performing a task. This is a problem for all people, and especially for users of AT. For persons with cognitive and/or behavioural disorders the problem is magnified. Web designers should avoid using background images and music and should use a consistent design layout. These measures will not only reduce mental load for the cognitively disabled but will help all users to access their Web site. There are over 200,000 people with severe learning disabilities in the UK and about 1 in 100 people suffer from dyslexia (boys are three times more likely to be affected than girls).[48] There is no specific AT available for people with cognitive disabilities although much can be done to increase accessibility when designing the content of a Web site. For example, users with learning difficulties may struggle to read long paragraphs or certain fonts. This problem can be minimized by keeping paragraphs short and using CSS. It is also difficult for some users with cognitive disabilities to read justified text so text should be left justified. Flashing text should also be avoided as this can cause certain people to have epileptic seizures. The Plain English Campaign has produced a number of free guides [49] to help Web developers produce accessible content for the cognitively disabled. Page content tips include keeping the average sentence to between 15 and 20 words, using active rather than passive verbs, using clear and helpful headings, and leaving plenty of ‘whitespace’ on the screen.
  • 35.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 34 6.5 Summary The AFA project seeks to train Web developers to create Web sites which can cater for the diverse needs of all users. Web developers must be aware of the various user needs and the AT available to help such users. It is relatively easy to create an accessible Web site for a user with a specific disability. The problem is that Web sites must be accessible for all users, including users with multiple disabilities. It is also worth mentioning that this section has only covered user needs in a general sense. Each user is an individual and may have very specific requirements. This demonstrates how difficult it is to fully comply with the SENDA legislation. 7.0 Learning Theories, Styles & AFA Course Strategy Students undertaking the AFA course must have a clear understanding of what it is they are trying to learn. According to Tough [50] the most common motivation for learning is that there is ‘an anticipated use or application for the skills learned’. The original AFA course was delivered in an IT training lab, primarily in order to evaluate the course and obtain feedback from participants. Future versions can easily be incorporated into WebCT, the chosen virtual learning environment (VLE) at UCLAN. 7.1 Learning Theories There are numerous learning theories. The ‘Theory Into Practice Database’ lists dozens of such theories. [51]
  • 36.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 35 7.1.1 Internet Based Learning There are many benefits to Internet based learning [52]. It is flexible, students can learn at times convenient to them and travel costs are substantially reduced. The student can progress at his or her own speed and can complete the course material in any order of their choosing. However, not all students are suited for Internet-based education. Lack of motivation can lead students to drop out, often because they feel isolated and lonely - they may miss the personal interaction with other people. They may be worried about using computer technology. The cost of computer equipment may also be a factor as will the lack of technical support in the home. The academic institution, and the course leader, may benefit from Internet-based courses although there are problems as well. Electronic information is cheap and easy to distribute; the cost of printing is transferred to the student should they prefer printed materials. Accessible course material can be viewed by students using a diverse range of computers and Internet browsers. Material can be reused, re-packaged or archived. Larger number of students can simultaneously take courses, a potential source of revenue for the academic institution, and they are not limited by geographical location. Electronic marking and evaluation is now possible substantially reducing the course leaders’ workload. On the other hand, many of the costs of setting up and developing online learning courses are ’front loaded’; they need to be incurred before any income is generated.
  • 37.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 36 Many academic staff do not have the time, or incentive, to learn new technologies. Problems with computer networks and unreliable equipment can prevent access to course material. Slow Internet connections can make some interactive multimedia applications too slow for effective learning. Internet-based technology allows students to learn according to their own learning style. The use of images, multimedia, graphs, charts, audio, new programming languages such as Mathematical Mark-Up Language (MML), Java applets etc. can be combined to facilitate visual, aural, and kinesthetic learning styles. NB. Visual learners learn by seeing, aural learners learn by hearing, kinesthetic learners learn by touching and doing. 7.1.2 Open Learning Maxwell has defined Open Learning as ‘a student centred approach to education which removes all barriers to access while providing a high degree of learner autonomy’. [53] Internet-based learning supports the open learning concept by providing students with the ability to connect to educational resources when it is convenient for them, and allowing students to explore the educational resources in an order that suits their needs. In an open learning environment the teacher acts as a tutor, facilitator, and resource to assist in the student's learning process. [54]
  • 38.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 37 7.1.3 Situated Learning Internet based learning encourages Situated Learning [55]. Situated Learning Theories argue that learning is a function of the activity, context and culture in which it occurs. This contrasts with much classroom learning activities which involve knowledge which is abstract and out of context. Social interaction is a critical component of situated learning because learning requires social interaction and collaboration. In the AFA course users will actually build a real Website using real tools and real software. Social interaction will occur naturally as students help each other. Ultimately users will be able to rely on the help of the course leader. 7.1.4 Constructivism The Constructivist Principles of Bruner [56] will also be embedded within the course. A major theme in the theoretical framework of Bruner is that learning is an active process in which learners construct new ideas or concepts based upon their current and past knowledge. The learner selects and considers information from various viewpoints, constructs hypotheses, and then makes decisions whilst relying on mental models to do so. Constructivism allows users to experiment and learn without the fear of failure. AFA users will be encouraged to employ constructivist principles throughout the course. 7.2 Learning Styles Students have different learning styles depending on their characteristics, strengths and personality. Some students learn visually, others by hearing, still others kinesthetically. The AFA project aims to take account of the different student needs and approaches to learning. The goal is to ‘teach around the cycle’, that is, ensure
  • 39.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 38 that the learning materials in the AFA project cater for the needs of each type of learning style. Felder [57] considers various learning style models and concludes that, whichever model is chosen, the learning needs of each student can be met if the correct teaching strategy is followed. I will consider three models. 7.2.1 The Myers-Briggs Type Indicator (MBTI) According to the MBTI model students may be: 1. extraverts who try things out or introverts who think things through; 2. sensors who are practical and focus on details and facts or intuitors who are imaginative; 3. thinkers who are logical or feelers who tend to make intuitive decisions; 4. judgers who make and follow lists or perceivers who adapt to changing circumstances. These ‘types’ can be combined to form 16 different learning styles. For example, one student may be an introverted sensor who feels and perceives; another may be an extraverted intuitor who thinks and judges. 7.2.2 Kolb's Learning Style Model This model classifies students as preferring to take information in via concrete experience or abstract conceptualization, and then apply the information via active experimentation or reflective observation. The four types of learners form a matrix as follows.
  • 40.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 39 1. Type 1’s are concrete reflectives. Type 1’s want to know ‘why’ things are as they are and want explanations of how course material relates to them. 2. Type 2’s are abstract reflectives. Type 2’s enjoy reflecting on clearly presented, logical information. 3. Type 3’s are abstract actives. Type 3’s prefer a hands-on approach to learning. 4. Type 4’s are concrete actives. Type 4’s prefer to apply information in new ways to solve real problems. 7.2.3 Felder-Silverman Learning Style Model This model takes a similar approach to the MBTI model and classifies students as either: 1. sensing learners who prefer facts, or intuitive learners who are innovative; 2. visual learners who prefer diagrams and charts or verbal learners who prefer textual explanations; 3. inductive learners who prefer specific content to be presented before general background information or deductive learners who prefer background information first and then specific information; 4. active learners who learn by trying things out, often in groups, or reflective learners who learn by thinking things through and may prefer to work alone; 5. sequential learners who prefer to work through material in a linear fashion or global learners who take a ‘big picture’ view. These types can be combined as in the MBTI model.
  • 41.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 40 7.3 AFA Course Strategy The AFA course material should be presented using the following strategy. This strategy is based on the Felder-Silverman Learning Style Model. Each accessibility problem should be described before providing coded examples. The same material should be presented in various ways to meet the needs of intuitive and sensing learners. For example, images, charts and other diagrams should be used as well as textual explanations of accessibility problems. When problems are numeric, for example when dealing with browser window sizes or download speeds, a written example should be provided rather than just the theory. Real-life or real world examples should be used rather than abstract models whenever possible. Occasionally students should be challenged to find the solution to a problem before the definitive answer is provided. The course leader should encourage the students to think about alternative solutions or new problems created by the solving of the original problem. Students should be encouraged to question the course leader. The course leader should always be in a position to justify his answers and should also be open to new solutions. A number of group-work activities should also be incorporated into the course. The AFA course will be constructed in such a way that the users can complete the course in a linear fashion. However, the advantage of Internet based learning is the concept of hyper-linking. Students can complete the course in a non-linear fashion and indeed, depending on the WCAG compliance level they are aiming for may choose to skip parts of the course.
  • 42.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 41 7.4 Summary The AFA course is an ideal subject for an Internet based course. The diverse learning styles of users can easily be accommodated via the Internet. The concept of open learning using situated learning and constructivist principles is well suited to AFA. To cater for all types of learners, the AFA course should explain the relevance of each new accessibility topic, present the basic information and coding methods associated with the topic in a variety of ways, provide opportunities for individual and group practice in the methods, and then encourage users to explore the topic for themselves. 8.0 Accessible Web Site Resources I have ascertained that FE and HE institutions have a legal obligation to produce accessible online material and have defined precisely what an accessible Web site is. I have also identified various groups of disabled users and the problems faced by these groups when attempting to browse the Internet. I will now consider what other learning resources are available to help Web developers to create accessible Web sites. There are literally thousands of Web sites with Web accessibility related information - a search for ‘Web Accessibility’ on Google produced 425,000 results [58]. Unfortunately there are only a few books on the subject, perhaps because this subject has only recently come into the public eye. Consequently, and perhaps surprisingly, there are very few good Web accessibility resources which deal with the actual creation of accessible Web sites. The majority of the sources are heavily slanted towards compliance with Section 508 of the US Rehabilitation Act 1973.
  • 43.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 42 8.1 Books Web Accessibility for People with Disabilities [59] was probably the first book on the subject following the launch of the Web Accessibility Initiative (WAI). The book contains tips, tools, guidelines and HTML coding techniques to help make Web sites accessible. The book also contains lots of useful accessibility related links from Web sites all over the world. Constructing Accessible Web Sites [60] has been written to enable Web developers to create and retrofit accessible Websites quickly and easily. Whilst the objectives are laudable the reality may not be quite so simple. The book discusses the technologies and techniques that are used to access Websites and many disability related legal guidelines, both in the US and around the world. The main body of the book is concerned with making Web sites and their content accessible. Sections include testing methods, development tools, and advanced coding techniques. The book also contains a useful checklist for creating accessible Web sites. Maximum Accessibility [61] is another excellent book, similar to the above mentioned books. One of the authors, John Slatin, writes from personal experience as he is legally blind. 8.2 Web Sites The ‘Curriculum for Web Content Accessibility Guidelines 1.0’ [62] compiled by the W3C WAI, comprises 4 main sections known as ‘sets’. 1. An Introductory section - "The Introduction Set"; 2. Guidelines for Web Content Accessibility - "The Guideline Set";
  • 44.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 43 3. Checkpoints for meeting the Guideline requirements - "The Checkpoint Set"; 4. Examples for implementing the Checkpoints - "The Example Set". This course comprehensively deals with each of the 14 WCAG guidelines and 65 checkpoints. However, the course is written in HTML rather than XHTML and contains some poorly written code. For example, the mark-up example for Checkpoint 5.1: the use of the ‘TH' element in a TABLE uses the following code as an example. [63] The table contains several errors and omissions. (The lines are numbered to aid my comments) 1. <TABLE border=1> 2. <CAPTION>Example of a simple data table created using HTML markup. </CAPTION> 3. <TR> 4. <TD></TD> 5. <TH>Col. 1 header</TH> 6. <TH>Col. 2 header</TH> 7. </TR> 8. <TR> 9. <TH>Row 1 header</TH> 10. <TD>C1R1</TD> 11. <TD>C1R2</TD> 12. </TR> 13. <TR> 14. <TH>Row 2 header</TH> 15. <TD>C2R1</TD> 16. <TD>C2R2</TD> 17. </TR> 18. </TABLE>
  • 45.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 44 The first error is found on line 1. The code border=1 is missing quotation marks – it should read border=”1”. The second error is found on line 4. Line 4 contains an empty table cell which can cause problems when viewed using Netscape browsers. The table does not contain the <thead> or <tbody> tags. These tags aid non-visual users by providing structural information about the table. The table tags are all in UPPERCASE which means that the page will not validate in XHTML – tags should be lowercase. Technically speaking this page would work in most modern browsers – they are forgiving of errors and generally present the page OK. However, many of the new browsing technologies would have problems with this code. Jim Thatcher, one of the authors of Constructing Accessible Web Sites, has produced an online Web accessibility course entitled ‘Web Accessibility for Section 508’. [64] As the course title suggests this resource is heavily slanted towards American legislation. As previously mentioned, compliance with American legislation would not meet the needs of SENDA. (See Section 2.6) This course explains the problems faced by disable Web users and provides contains numerous HTML code examples for developers to follow. The JISC funded Techdis service has produced a learning resource entitled ‘Seven precepts of Usability and Accessibility’ [65]. The seven precepts cover a range of usability and accessibility issues and each is accompanied by a short description. Each precept is linked to detailed information about the concepts and coded examples are provided to show Web developers how to apply the concepts to their Web site.
  • 46.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 45 The seven precepts concern: - 1. Navigation and page layout 2. Visual presentation and customisation 3. Text descriptions for images 4. Accessible mark-up: forms, lists, scripts and tables 5. Use and presentation of written language 6. Accessible issues for other media types 7. Help, searches, errors and documentation The precepts are NOT mapped to the WCAG guidelines and deal with accessibility issues in isolation. 8.3 Summary All of the six Web accessibility resources mentioned are excellent and deal with Web accessibility in depth. However, they tend to deal with accessibility problems in isolation taking a ‘example and guideline approach’. It is my submission that the AFA project is unique in terms of creating accessible Web sites. The primary aim of the AFA project is to provide a total Web accessibility solution within the context of a single site rather than using examples from different sources to highlight particular problems. No other learning resource fulfils this aim. 9.0 User Needs Analysis It was decided to perform two user needs analysis (UNA). The AFA project consists of two distinct parts. Part 1 is the actual training course; part 2 contains the ‘bad’ Web site and the retro-fitted accessible site. The training course and the retro-fitted Web site require the users to be able to perform quite distinct tasks. A UNA is not
  • 47.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 46 required for the ‘bad’ Web site. The whole point of the bad site is that it is not accessible to users and therefore the needs of the users are not material. 9.1 AFA Course Participants 9.1.1 User Groups The primary user group consists of Web developers based in FE and HE institutions as well as administrative staff with a responsibility for Web development. Secondary user groups include managers or accountants based at the academic institutions of the primary users who may wish to purchase the course, should it be made available for sale. Other groups will consist of Web developers based in commercial organisations. 9.1.2 Primary User Age: 18+ years of age Language: Basic English – English may not be the participant’s first language but it is still the main (only) language used for teaching in British universities. Education: Assumed that the participants have been educated up to age 16. Many academic institutions insist that staff are educated to degree level but Web developers are often employed for their skills rather than their academic qualifications. It is assumed that participants can read, although the completed course could be read out to the participant using AT. Culture: We live in a multicultural society. Participants are likely to be from a wide variety of cultures and backgrounds.
  • 48.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 47 Disability: Paradoxically, disability is not a factor because it is envisaged that the course material will be available in various forms. Participants will be able to choose from an online version, a printed version and an electronic version in various file formats. Computer Experience: The participants will not need any computer experience per se to read the course material. In order to complete the course, it is assumed that participants will be familiar with using a mouse and keyboard and have previous experience of using computer software. It is also assumed that participants will have a basic understanding of HTML including the use of tags and attributes. Motivation: As previously mentioned in Section 7.0, the most common motivation for learning is that there is ‘an anticipated use or application for the skills learned’. Participants may also be motivated by the fact that they could potentially command higher salaries due to their increased skill-set. Participants may also be concerned with the potential implications of SENDA; in particular whether they are personally liable should they build an inaccessible site. Completion of the course may well provide peace of mind. 9.1.3 Environment The course will primarily be designed to be delivered on the UCLAN network in the Learning Development Unit (LDU) training suite. The LDU training suite consists of twenty high specification computers and can become quite noisy at times. The maximum duration of the course should be one day. It is envisaged that participants may wish to complete the course in their own home via distance learning. Distance learners can complete the course according to their own time frame.
  • 49.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 48 9.1.4 Hardware The minimum hardware requirements are based on the configuration of a typical home computer user and the standard system requirements for Macromedia Dreamweaver. [66] (see Section 11.4) • Intel Pentium II processor or equivalent 300+ MHz • 128 MB Ram • 2GB Hard Drive • 8 x CD Rom Drive • Floppy Disc Drive • 15” Colour Monitor capable of 800 x 600 resolution • Windows 98 operating system or better • Netscape Navigator or Internet Explorer 4.0 or greater • Colour Printer • Keyboard and Mouse 9.1.5 User Tasks / Learning Objectives 1. Understand the problems faced by disabled people using the Internet, these are known as ‘barriers to access’. 2. Understand how Web developers can code their Web pages to remove these barriers to access. Specifically users will learn about: 1. Templates 2. Cascading Style Sheets 3. Document type definitions 4. Non-textual content 5. Tables
  • 50.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 49 6. Forms 7. Page structure 8. Meta data 9. Keyboard controls 10. Accessible content 11. Identifying the language of a document, or changes in the natural language 12. The benefits of relative size units rather than absolute sizes 3. Have an understanding of usability issues. 4. Have an understanding of Web design issues. 5. Understand how Web pages can be validated to check for compliance with disability legislation using automated software. 6. Perform a series of tests and checks to identify potential problems not highlighted by automated checkers. 7. Have an understanding of the WAI and WCAG. 8. Learn how to use a WYSIWYG Web editor. 9.2 AFA Retro-fitted Web Site According to our definition of an accessible Web site in Section 3.0, the retro-fitted site must be accessible to ‘anyone using any kind of Web browsing technology...’ Our primary user group is therefore anyone and everyone. The primary user is anyone regardless of age, language, education, culture, disability, computer experience or motivation.
  • 51.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 50 The user should be able to access the course from any environment, the only computer requirements are that the user has Internet access and some form of Web browser. 9.2.1 Users Tasks / Learning Objectives Again, according to our definition of Web accessibility in Section 3.0 our user, that is anyone and everyone, should be able to get a ‘…full and complete understanding of the information contained there, as well as have the full and complete ability to interact with the site.’ 10.0 Web Site Project Management As mentioned in Section 8.3 the AFA project is unique and does not fit in with traditional software engineering models. However, traditional models are tried and tested and provide useful guidelines which may be applied in a Web-based project setting. 10.1 Waterfall The Waterfall model is a highly structured approach to project development. Conventional software engineering is based on the assumption of a more or less sequential development process [67]. The developer plans a number of project development stages which are completed in a linear fashion. Upon completion of one stage, the designer moves on to the next stage without having the opportunity to return to previous stages. This method assumes that the developer is able to specify the whole project in its entirety before commencing. The uniqueness of the AFA project precludes the use of the Waterfall method. There are no other Web sites which can be used as a template for the AFA project. Additionally, there is not a definitive way of creating an accessible Web site. The
  • 52.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 51 AFA project will evolve by a series of ‘trial and error’ prototypes which will be refined following user testing and feedback. 10.2 System Assembly from Reusable Components This method utilises the fact that many systems consist of a number of pre-existing components which can be reused. This has the benefit of increasing productivity, quality, reliability and, in the long-term, decreasing software development costs [68]. The principles outlined in this method can be implemented in the AFA project. The main navigation and footer information could be included in a reusable template. The developer can make the template fully accessible; pages based on the template will be automatically accessible as well. 10.3 The Dynamic Systems Development Method A fundamental assumption of DSDM is that nothing is built perfectly first time, but that a usable and useful 80% of the proposed system can be produced in 20% of the time it would take to produce the total system [69]. DSDM combines iterative prototyping and user participation. Unlike the Waterfall method, DSDM allows previously completed sections to be changed in response to user input. In terms of the AFA project, the users may not fully understand the accessibility issues but they can provide useful feedback on the actual training material. 10.4 Prototyping A prototype is ‘a preliminary type, form, or instance of a system that serves as a model for later stages or for the final, complete version of the system’ [70].
  • 53.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 52 There are basically two types of prototype used when developing Web-based projects although the terminology can be confusing. One approach is to produce a ‘proof of concept’ [71] throwaway prototype. This prototype is quickly constructed without the developer needing to worry about coding problems, download times, image optimisation and so on. A throwaway prototype is a non-functional mock-up that is used to illustrate how a fully functional system will look or operate but which is not intended to evolve into a fully working system. The second option is to create a beta version of the final site including many of the final design specifications, an ‘evolutionary prototype’. This prototype is intended to form the basis of a fully functional working system and is a low quality version of the final product. 10.5 Summary Elements of each of the methods discussed, with the exception of the Waterfall method, were used in the creation of the AFA project. Reusable components were used in the creation of an evolutionary prototype, user feedback was then sought and a further prototype built and tested. The final AFA version was then constructed. 11.0 Comparison of Web Authoring Tools There are a numerous Web authoring tools for constructing Web sites. These range from simple Text Editors such as Notepad [72] or BBEdit [73] to WYSIWYG editors such as Macromedia Dreamweaver MX [74], Microsoft FrontPage 2002 [75] or Adobe GoLive 6 [76].
  • 54.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 53 The final choice of software to create the AFA project is dependent on a number of factors including the availability of the software on the UCLAN network, the suitability of the software for the task in hand, and resources available in the event of problems. The text editors were quickly discounted for two main reasons. Firstly, many of the prospective course participants would not be ‘fluent’ HTML coders; secondly the time taken to hand-code a complete Web site would be prohibitive. Participants should be able to complete the AFA course in one day. A brief comparison of the three WYSIWYG Web authoring tools now follows. It is interesting to note how the three software developers argue how their product is superior to the others using selective feature comparisons and case studies. [77] 11.1 Macromedia Dreamweaver MX Dreamweaver MX is one of the Macromedia Studio MX products. It is tightly integrated with Fireworks, Flash and Freehand; each program uses the same panel management system and user interface. The whole user interface is XML based and therefore customisable. Dreamweaver MX is the result of combining Dreamweaver and UltraDev. This means that it is easy to create dynamic, database driven, Web sites using ASP, ASP.NET, JSP, PHP or Cold Fusion. This ability is better than the same feature in GoLive 6, where the application installs the dynamic application on the server itself. Dreamweaver connects to the server faster than GoLive 6. Dreamweaver now has a number of sample designs and pieces of reusable code called snippets. This is in response to GoLive which has had these features for some time.
  • 55.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 54 Dreamweaver allows designers to create conditional nested design templates. Incidentally, GoLive Web design templates are compatible with Dreamweaver, The site definition wizard is OK for beginners but it is better to set up Web sites manually. Code Hints are an excellent new feature, especially for new HTML coders and those developers who prefer to work in code view. Bradsoft TopStyle [78] can also be integrated with Dreamweaver enabling designers to see the affects of CSS changes in real time. Dreamweaver allows designers to easily code XHTML and includes an automatic HTML to XHTML converter. A major new feature is the built-in Web Accessibility checker. Accessibility code prompts when inserting images, forms, frames and tables also aid developers. In terms of help Dreamweaver is excellent. A number of reference libraries are integrated within the product including HTML, CSS and JavaScript. Additional support can be obtained via a newsgroup, [79] which has more than 395,000 messages, and a plethora of online tutorials. Dreamweaver can be extended using extensions. An extension is a piece of software that can be added to Dreamweaver to enhance the application’s capabilities. There are hundred’s of predominantly free extensions available. Developers can also write their own extensions if necessary. 11.2 Microsoft FrontPage 2002 FrontPage 2002 uses the WYSIWYG simplicity of the word processor to creating Web pages. Each new release becomes more and more like the other Microsoft Office products.
  • 56.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 55 Its’ primary market is users who do not know much about HTML. Web developers can create quite sophisticated sites without any HTML coding knowledge. For example users can easily add discussion board or e-commerce functionality. In order to take advantage of many of the features of FrontPage the Web server must support FrontPage Server extensions. New collaboration features make it easy for groups of people to work together on a site. FrontPage keeps track of the relationship of the files on your computer and those on the server allowing easy site synchronisation. Usage Analysis Reports interrogate server log information to create a variety of visitor reports using charts and graphs if required. FrontPage 2002 has several tools, similar to PowerPoint’s drawing tools, which can generate shapes, word art, etc using Vector Markup Language (VML). The Automatic Web Content adds dynamic content, such as news headlines from MSN, to your site. The main complaint about FrontPage is the actual proliferation of non-accessible HTML code generated by the program. It is extremely difficult to edit, especially for non-HTML coders, and will not validate properly. Web developers with basic requirements who do not wish to learn HTML will find FrontPage a useful program but it is not suitable for the AFA project. 11.3 Adobe GoLive GoLive looks like other Adobe products making it easy to switch between applications. In particular Adobe has integrated GoLive more closely with Photoshop and Illustrator. The main editing windows float on the GoLive worktop, with palettes
  • 57.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 56 of functions controlling the tools. Users can now drag and place individual palette tabs at the edge of the screen. GoLive users have access to approximately seventy extensions. Unlike Dreamweaver, if the program cannot do something, developers cannot write their own extensions. The site management features are good. In particular the revision list gives details of changes made to files in the site. The Web Workgroup Server site management and collaboration tool lets multiple users share and manage files and track changes. The version control and side-by-side comparison capabilities include the ability to roll back to previous versions a la Macromedia Contribute. Other features include a QuickTime 5.0 editing environment, with streaming conversion and optimisation capabilities, and the ability to deliver database-driven content. However, this support is not integrated as in Dreamweaver but is a simple text editor. GoLive does not include integration with BBEdit which may be inconvenient for Apple Mac users. GoLive will not preview external style sheets and cannot process Server Side Includes. 11.4 Software Chosen Dreamweaver was an easy choice of software for the AFA project. GoLive is not even on the UCLAN network whilst FrontPage generates inaccessible HTML code. The sheer volume of online Dreamweaver tutorials, a fully searchable newsgroup, and the built-in reference manuals, provide the answer to virtually any Web-related question or problem. The ability to create extensions and customise the user interface adds to the functionality of Dreamweaver.
  • 58.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 57 The code created by Dreamweaver is clean and validates well. The only proprietary code created by Dreamweaver is when the built-in JavaScript functions are used. In a comparison between Dreamweaver, FrontPage and GoLive, Dreamweaver was the only program which created valid XHTML markup. (See Appendix D) 12.0 AFA Web Site Guidelines To a certain extent the following guidelines for the AFA Web site are irrelevant. The underlying principle is that a disabled user can customise a Web site to suit their own specific needs. In effect, it is irrelevant if the font is Arial or Times New Roman, blue or green, large or small, etc. The user, using their chosen Web browsers’ preferences, can select their own font settings. See Appendix G for full details on how to customise the main Web browsers. One of the goals of the AFA project is to train developers to create both accessible and usable Web sites. Therefore it is important that design guidelines are followed in order to teach good practice. It is irrelevant if users choose to customise their Web browsing experience, the underlying Web site must still be created properly. The following guidelines refer to how the retrofitted site should look after the bad site has been corrected. 12.1 HTML As has been previously mentioned, compliance with SENDA necessitates that Web pages comply with the WCAG Guidelines. The prototype would include numerous examples of incorrectly coded page elements or objects. Each element would
  • 59.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 58 therefore break the WCAG guidelines. A full discussion of the WCAG guidelines follows. 12.1.1 The World Wide Web Consortium The World Wide Web Consortium (W3C) is an international industry consortium jointly hosted by the MIT Laboratory for Computer Science in the USA, the National Institute for Research in Computer Science and Control in France, and Keio University in Japan. There are 450 member organizations of the Consortium. [80] The W3C was created to lead the Web to its full potential by developing common protocols (standards) that promote its evolution and ensure its interoperability between WWW products. The W3C provides a number of services including a collection of World Wide Web resources for developers and users, reference code examples to represent and promote standards and various prototype and sample applications to demonstrate use of new technology. 12.1.2 The Web Accessibility Initiative (WAI) The W3C are committed to the disabled and formed the WAI to promote Web accessibility. The WAI is pursuing accessibility of the Web through five primary areas of work: 1. addressing accessibility issues in the technology of the Web; 2. creating guidelines for browsers, authoring tools, and content creation; 3. developing evaluation and validation tools for accessibility; 4. conducting education and outreach; 5. tracking research and development.
  • 60.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 59 12.1.3 Web Content Accessibility Guidelines (WCAG) There are two versions of WCAG. WCAG 1[81] contains a total of 65 guidelines; WCAG 2 has reorganised and combined many of the WCAG 1 guidelines to create 21 new ones. There are 14 main WCAG guidelines as follows: - 1. Provide equivalent alternatives to auditory and visual content. 2. Don't rely on colour alone. 3. Use mark-up and style sheets and do so properly. 4. Clarify natural language usage 5. Create tables that transform gracefully. 6. Ensure that pages featuring new technologies transform gracefully. 7. Ensure user control of time-sensitive content changes. 8. Ensure direct accessibility of embedded user interfaces. 9. Design for device-independence. 10. Use interim solutions. 11. Use W3C technologies and guidelines. 12. Provide context and orientation information. 13. Provide clear navigation mechanisms. 14. Ensure that documents are clear and simple. More detailed information is given in Appendix C. Each guideline has a one or more ‘checkpoints’ that developers need to consider to ensure the accessibility of a Web page. Each checkpoint has a priority level based on its impact on accessibility. The WCAG provides a number of examples and techniques to help developers to implement the guidelines.
  • 61.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 60 12.1.4 WCAG Priorities There are 3 WCAG priority levels. [82] Compliance with the recommendations of each level ensures greater accessibility of Web pages. The ‘Access for All’ project aims to enable Web developers to produce WCAG AAA compliant sites. 12.1.4.1 Priority 1 Web developers MUST satisfy these checkpoints or some groups of people will find it impossible to access information on their site. This is considered to be the absolute minimum level of compliance. 12.1.4.2 Priority 2 Web developers should satisfy these checkpoints or some groups of people will find it difficult to access information on their site. This is considered to be the preferred level of compliance. 12.1.4.3 Priority 3 If Web developers satisfy these checkpoints the majority of users will be able to access ALL of the information on their site. This is considered to be the optimum level of compliance. 12.1.5 WCAG Conformance The WCAG guidelines have three levels of conformance. [83] 1. Conformance Level "A": all Priority 1 checkpoints are satisfied. This is known as WCAG A compliant. 2. Conformance Level "Double-A": all Priority 1 and 2 checkpoints are satisfied. This is known as WCAG AA compliant.
  • 62.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 61 3. Conformance Level "Triple-A": all Priority 1, 2, and 3 checkpoints are satisfied. This is known as WCAG AAA compliant. 12.1.6 Browser Specifications Normally when creating a design specification Web server logs are examined to ascertain the types of browser equipment and configuration used by site visitors. As mentioned previously, the AFA project must cater for the needs of all users using all types of browser software. For the sake of completeness Appendix E contains the latest browser statistics. In summary, there are more than 300 million Internet users worldwide. Over 90% of them use Internet Explorer 5.x or better; 96% use a screen resolution of 800x600 pixels or larger; over 90% use Windows 98 or better; 64% now use a 56K modem or better to connect to the Internet, and 90% use a monitor with a colour depth of 16-bit or better. 12.1.7 Dept of Physics, Astronomy & Mathematics It is perhaps more relevant to consider the types of users who visit the UCLAN Web site. A survey of the Department of Physics, Astronomy and Mathematics (DPAM) Web site was undertaken on behalf of the UCLAN Web Strategy Group in September 2001 and updated in March 2003. A summary of the findings are shown in Appendix F. A typical visitor to the DPAM Web site originates from the United Kingdom, uses Windows 98 or better, and browses using Internet Explorer 5.x or better. This is based on an average hit rate of approximately 200 per week although there are clear seasonal fluctuations [84]. These findings are consistent with the worldwide statistics mentioned in Section 12.1.6.
  • 63.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 62 12.1.8 Summary The AFA retro-fitted Web site will be coded to comply with WCAG 1 and have a ‘Triple-A’ conformance level. The course notes will provide a step-by-step guide, enabling Web developers to produce technically accessible sites. Each developer can choose to create Web sites compliant with any of the three conformance levels. 12.2 Colour [85] Colour vision deficiency reduces the user’s ability to discriminate between colours on the basis of three attributes; hue, lightness and saturation. Designers can help to compensate for these deficits by making colours differ dramatically in all three attributes. Partial sight and congenital colour defects produce changes in perception that reduce the visual effectiveness of certain colour combinations. Two colours that contrast sharply to someone with normal vision may be far less distinguishable to someone with a visual disorder. The differences between the background and foreground colours must be exaggerated and colours of similar lightness must be avoided, even if they differ in saturation or hue. Figure 1: Background Contrast
  • 64.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 63 It is safe to assume that people with vision problems will see less contrast between colours than a normally sighted person. The greater the difference between the light and dark colours the more accessible will be the finished design. Dark colours from the bottom half of the hue circle should be contrasted against light colors from the top half of the circle. However adjacent colours should be avoided, especially if the colours do not contrast sharply in lightness. For example, orange/red or blue-green/blue should be avoided. Figures 2–5: Hue Circles and Background Contrasts Based on the above analysis the choice boils down to using violet/yellow, orange/blue, red/blue-green or green/purple, being opposites in the hue circle.
  • 65.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 64 Red/blue-green or green/purple were discounted because of the incidence of red/green colour blindness. It should also be remembered that many users still use monochrome monitors. The following images show how difficult it is to distinguish between orange and blue when they are converted to grayscale. Violet and yellow are an effective combination, even with monochrome monitors but even this combination causes a problem for some dyslexics. Figure 6: Greyscale Contrast The final combination chosen was black text on a white background. White and black are at the opposite ends of the colour spectrum although technically they are not colours. As already mentioned, users with various vision difficulties could easily customise the colour scheme to suit their needs. 12.3 Content In Section 6.0 I considered the barriers to access faced by various groups of users. The following guidelines will be implemented to cater for these users.
  • 66.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 65 12.3.1 The screen layout will be consistently formatted According to Detweiler and Omanson [86], the more consistent a Web site is in its design, the easier it will be for users to navigate. Users, particularly older users, tend to learn and remember the location of key functions and controls. Screen layout includes logos, navigation buttons and footer information. Putting the logo in a consistent place on every page ensures that users are fully aware that they are on the same site. 12.3.2 Page sizes will be limited to 30K As Appendix E5 shows, 36% of Internet users still use modems with connection speeds of 33K or less. Pages will therefore be kept to a maximum of 30K ensuring download times of less than ten seconds for these users. Visitors may not wait for pages to load if they take too long to download [87]. 12.3.3 Frames will not be used Frame-based sites can be confusing for the visually disabled, particularly those using screen readers or speech browsers - users can easily become disorientated. Additionally, users cannot easily bookmark individual pages within a frame-based site. 12.3.4 Paragraphs and sentences will be kept short Readability improves when sentences and paragraphs are kept relatively short. Users tend to scan Web pages and will often skip over large chunks of text [88].
  • 67.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 66 12.3.5 Each page will have a descriptive and different title, a clear heading and logical structure Titles are used by search engines to identify Web pages, if two or more pages have the same title, they cannot be differentiated by users. Each page will also have clear and helpful headings. Pages will be structured logically. 12.3.6 Font Guidelines Font tags will not be used; instead Cascading Style Sheets will format the Web pages. Fonts will be the equivalent of size 12pts to enhance reading performance [89]. Research has shown that there is no noticeable difference in reading speed or user preferences between Times New Roman, Georgia or other serif fonts and Helvetica, Verdana or other sans-serif fonts [90]. 12.3.7 Links will be clearly identified Blue underlined text will be used for all links. Some users miss links because the text is not underlined. Research shows that users can easily find links which include visual cues, that is, links that are underlined, rather than having to move the mouse to see when the pointer changes to a hand (this is known as mine sweeping). Links will not be designated with the text click here. Some screen readers can be set to read out a list of links on a particular page; a list of click here links is not helpful [91]. Visited links will be designated using a different colour. Many users use link colours to identify which parts of a site they have already visited [92].
  • 68.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 67 12.3.8 Pages will be fluid/flexible As shown in Appendix E3 users browse the Internet using a variety of screen resolutions. Pages will be designed to expand or contract according to the user’s settings, thus preventing horizontal scrolling. Horizontal scrolling is a particular problem for screen reader users because the screen reader does not automatically scroll horizontally – users may miss important content. 12.3.9 Pages will be device independent Not all users navigate Web sites using a mouse - many disabled users use AT. All users will be able to navigate the site using the input device of their choice. 12.3.10 Content will comply with Plain English Guidelines As discussed in Section 6.4, all text will be left-justified, active verbs will be used rather than passive verbs and there will be no flashing or moving text. Everyday English will be used instead of terminology and there will be no background images or music. 13.0 Creating the AFA Evolutionary Prototype It was decided to produce an evolutionary prototype. The prototype would confirm that the underlying project concept was viable, that is, produce and then retro-fit a fundamentally bad Web site. Upon completion of the course participants should be able to create an accessible Web site.
  • 69.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 68 The author was scheduled to undertake two weeks training at California State University, Fresno, in January 2002. The AFA prototype was developed in order that it could be tested by volunteers from Fresno. Recommendations and evaluations would be considered and iterative prototyping, including the use of reusable parts (templates), would commence. The aim was to create a sufficient number of pages to cover each of the fourteen main WCAG guidelines. 13.1 Splash Screen – index.htm A flash-based splash screen was created to demonstrate the total inaccessibility of such pages to the visually disabled. The animation is a very simple introduction to the work of the Learning Development Unit (LDU), the sponsors of the AFA project. The animation contains a skip movie link which is embedded within the movie. The visitors are invited to press the red button to enter the site.
  • 70.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 69 Flash is classed as multimedia. As such, an audio transcript of the animation and a text alternative should be provided (WCAG 1.3 - Priority 1) - the actual animation contains neither. The invitation to press the red button violates the principle that key information is not colour based (WCAG 2.1 – Priority 1). Visitors with colour blindness may not be able to identify the red button. The main problem with Flash is that screen readers cannot automatically read the text contained within the animation. In fact the text is not text at all – it is actually a graphic of some text. In effect the animation consists of a totally blank page as far as the visually disabled are concerned. The normal way to cater for the visually disabled is to create a ‘skip movie’ link. In effect the visually disabled are prevented from enjoying the same experience as other visitors. In the corrected version of the site this page is simply deleted – it adds nothing to the Web site and actually prevents the visually disabled from entering the site at all. Other users who choose not to install the Flash plugin are also prevented from entering the site – there are no alternative text links.
  • 71.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 70 13.2 Template – Main.dwt Template based sites allow web developers to quickly and easily create new Web pages. A template consists of page content which is on every page in a site, thus ensuring that the navigation system is consistent (WCAG 13.4 – Priority 2). This content will generally include the main navigation system, logos and footer information. If the template is accessible then pages based on the template will also be accessible as far as the navigation system is concerned. Of course the actual page content will also need to be made accessible. The ‘bad’ site is based on a template although the template is not very good. As a by- product of learning to create accessible Web sites the course participants are taught to create and use templates within the Dreamweaver authoring environment. This significantly increases productivity and teaches the Web developer to ‘work smart’. The template contains a background image which prevents users from reading the text. There is insufficient contrast between the text and the image (WCAG 2.2 – Priority 2). Paradoxically, the visually disabled would be able to get a better
  • 72.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 71 understanding of this page than sighted visitors because a screen reader or speech browser would read out the text. The background image should be removed. The next stage was to create a link to an external style sheet. Style sheets separate the presentation (or format) of a document from its content (or structure). The visual presentation of a Web page can be formatted with style sheets while the structure of the document is based on HTML (WCAG 14.3 – Priority 3). Site-wide formatting alterations can easily be made by altering the style sheet – again working smart. It is easy to remove the link to the style sheet so that developers can view how Web pages look when not formatted (WCAG 6.1 – Priority 1). The FONT styles were set in the style sheet using relative rather than absolute sizes (WCAG 3.4 – Priority 2). This ensured that users could resize text within the site to suit their own preferences. A Document Type Definition (DTD) was next to be added to the template. A DTD is a document that defines a formal, machine-readable standard for HTML. It determines exactly what is, or is not, allowed in HTML and tells the validator how to check (or parse) an HTML document for errors (WCAG 3.2 – Priority 2). Next, the language of the document was added (WCAG 4.3 – Priority 3). The LANG attribute specifies the language of the actual page content. The LANG attribute is not widely supported at the moment although the IBM Homepage Reader has special speech synthesizers which allow foreign language text to be read out according to the pronunciation rules of the particular language. This opens up wonderful possibilities for visually disabled visitors whose first language is not English and, perhaps, wishes to learn a foreign language. Although the LANG attribute is not widely supported at the moment adding it has the benefit of future proofing pages to a certain extent. Future versions of browsers will
  • 73.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 72 be able to recognise the attribute and process the content accordingly. Non-supporting browsers will simply ignore the attribute. The single most important thing Web developers can do to do to make Web pages accessible is to include alternative text for all non-textual page content, especially images (WCAG 1.1 – Priority 1). Alternative text benefits the many people who use talking browsers, screen readers, text browsers or small handheld devices as well as those users who prefer to browse without images. The ALT text provides alternative or substitute text for use when the image is not being displayed. The most common mistake (apart from not using it at all) is to provide a description of the image, without considering what the image is doing on the page. The ALT text should be an appropriate text alternative to the image; sometimes this may be a description of the image, at other times this will be a description of the images’ function. The requirement for alternative text also applies to images that carry no information like ‘spacer.gif’ (assuming that the spacer.gif is used just to fill in some space). Alt tags should be kept to a maximum of 5 words. This prevents horizontal scrolling for users of screen readers, which in turn prevents sentences from being truncated. Certain images convey vital information that is an integral part of a page, for example, a graph. Such images require a more detailed description than can be provided in 5 words. These images require the use of the LONGDESC attribute, which is covered later in the course. In the AFA site the layout was designed using tables. Whilst not the recommended method of the W3C, it is possible, by adding a summary=’layout table’ (WCAG 5.5 – Priority 3) to the <table> tag, to help users know that the table is merely used for layout purposes (WCAG 5.3 – Priority 2). The layout table must be checked to ensure
  • 74.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 73 that it linearises correctly. No structural tags were used for visual purposes (WCAG 5.4 – Priority 2). Screen readers will eventually be able to read the table summary and this information will enable the visually disabled to decide whether they want to access the table contents. Table summaries can also help a person to interpret a particularly complex or difficult table. Some versions of Netscape contain a bug that may cause Web pages to display incorrectly when the window is resized. Dreamweaver includes a piece of JavaScript that automatically reloads the page whenever the window is resized. This is known as the ’Netscape Resize Fix’. The fix was added to the page. In addition the following code was manually added to the template in order for the page to validate properly:- <script language="JavaScript" type="text/javascript"> The next stage was to add a 'skip navigation' text link immediately to the right of the AFA logo. This allows users with a screen reader to jump straight to the page content without having to listen to the navigation links being read out to them on each page (WCAG 13.6 – Priority 3). The link will take them to a named anchor tag just before the start of the main page content. As the AFA logo is a link back to the home page this would mean that there are two links immediately next to each other. This can cause problems to some screen readers as they have a tendency to concatenate the links and they can become confusing. Therefore the links need to be separated from each other by something other than white space. The WCAG curriculum recommends the | symbol (WCAG 10.5 – Priority 3). [93]
  • 75.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 74 The named anchor was then added to the main body of the page. There are two possible methods of doing this. <A name="content"></A> or <A name="content">content</A> The first option is to create a blank named anchor but some browsers will not recognise them. If the second method is used, the word content will be visible on screen. In the end the second method was used but the text was made invisible by creating a special class which made the text the same colour as the page background. A duplicate set of hidden text links were added to the bottom of the page to assist screen reader users. This does not apply to the WCAG guidelines per se but it is a useful additional help for visually disabled users. When a screen reader reaches the end of the main content of the page these hidden links are a useful reminder of the main navigational options. Each link was separated by a ‘|’ to prevent link concatenation. Next, the title attribute was added to each of the text links. This provides the equivalent of a tooltip for text links (including email links) - rather like the tooltip generated by the alt tag on an image. Again, this does not apply to the WCAG guidelines per se but it is a useful additional visual prompt for users. The final alteration to the template was the application of the ‘invisilinks’ class to hide the skip navigation link, the content named anchor, and the duplicate navigation links. Although the text is invisible to sighted users the screen reader will read out the text in the same manner as any other text. The template was then saved and the updates propagated throughout the rest of the Web site.
  • 76.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 75 13.3 Home Page – home.htm (index.htm) After clicking the red button on the splash screen animation visitors are taken to the main home page. This page weighs in at 311K (including background image) which would take 87 seconds to download with a 28.8K modem. As a concession to the time limitations of the course this page is not as bad as it could be. There are no FONT tags or attributes. It would take too long to go through the site and remove dozens of font tags. For a discussion of the FONT tag see Appendix H. This page also contains scrolling text using the deprecated marquee tag. Scrolling text creates problems for many visitors. For example, users with cognitive difficulties or people for whom English is not their first language may not be able to read the text quickly enough. Screen reader users may end up in a sort of loop because the screen reader repeatedly reads the text. Web pages should not include moving content (WCAG 7.3 – Priority 2). The marquee should be deleted. This same principle covers the four animated gifs on the page. Rapid movement can cause some users to suffer epileptic seizures (WCAG 7.1 – Priority 1). It is unlikely that the animated gifs are moving quickly enough to cause seizures but they do not add anything to the page. For example they are not showing a process or theory. The animated gifs can, and should, be removed from the page. The large UCLAN logo serves no purpose; in fact it is duplicated as there is a smaller version in the footer of the page. The logo should be removed. By removing the background image (in the template), the large UCLAN logo, and the animated gifs the page is now only 28K. This equates to a download time of less than 10 seconds.
  • 77.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 76 Finally, the page contains misused header tags. In HTML there are six levels of header tags ranging from <h1> to <h6>. The text gets progressively smaller as the header value increases. Many Web developers use the header tags as text modifiers when they should be used to structure the document. The headers in the index page were correctly formatted. Following the deletion of the splash screen home.htm was renamed index.htm, the default name for a homepage on the UCLAN server. 13.4 Accessible Tables – table.htm In addition to those learned on other pages table.htm contains a number of new techniques. Clear writing aids all site visitors regardless of cognitive ability. Sentences should be clear and concise because people with dyslexia have difficulty understanding complex passages (WCAG 14.1 – Priority 1). Three examples of poorly written sentences were copied from the Campaign for Plain English Web site [94]. Participants will be invited to re-write the sentences, either individually or in groups, to produce more meaningful, user-friendly content. There are no specific guidelines for creating and wording links. It makes sense to have clearly worded text links, particularly for users of AT. Links should make sense out of context because most screen readers and talking browsers scan a Web page for all the links and create a list of the links for their users. Links such as ‘click here’ are meaningless in a list of links. AT’s inform the user that text is a link, either by changing pitch or voice, or by prefacing or following the text with the word ‘link’.
  • 78.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 77 Participants will be invited to create a link to the Macromedia Web site by selecting the appropriate text. Three tables are included in table.htm. HTML tables are either layout tables or data tables with the vast majority being layout tables used to arrange the visual appearance of a webpage. It is important that tables make sense when linearised although newer versions of screen readers can handle tables very effectively. Generally, layout tables linearise quite well and data tables do not. A number of table tags and attributes can be used to help improve the accessibility of tables including TR, TD, TH, ID, SCOPE, ABBR, SUMMARY and CAPTION. Each tag was introduced together with its intended use and examples (WCAG 5.1 & 5.2 – both Priority 1). Many of these tags and attributes are not functional yet. Part of making a website accessible includes future proofing. In other words, as new browsers are released, Web pages are already constructed to take advantage of the new features. 13.5 Accessible Forms – forms.htm
  • 79.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 78 The main accessibility issue for forms is whether or not users with disabilities, especially those who are blind or visually impaired, can determine the purpose of a specific input element and interact with it. For example, a user may be aware that a text entry field has focus, but may not know what information to type there. One technique is to provide helpful hints actually in the text box as shown in the diagram above (WCAG 10.4 – Priority 3). The original form is extremely disorganised and it was decided to teach participants to construct a new form rather than retrofit the bad one. A number of techniques were suggested including the following: - 1. Give clear instructions: ‘Please provide your details and then click on Submit. If you wish to clear all fields then click Reset.’ 2. Only ask information that is really needed. 3. Organise the form logically: group contact and occupation details, interests, etc. 4. Place buttons at the end of the form. Include a submit and a reset button 5. Put labels adjacent to their controls (WCAG 12.4 - Priority 2). 6. Use HTML mark-up to associate controls explicitly with their labels. A number of additional form elements, tags and attributes were also explained in the accompanying course notes. These included LABEL, LEGEND and FIELDSET as well as instructions on how to make every potential form element accessible. The inaccessibility of JavaScript Jump Menus was also pointed out.
  • 80.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 79 13.6 Images – image.htm The photographs on this page are quite large. The Mona Lisa is over 50KB and the Monet over 20KB. In total the whole page is 108 KB meaning it would take about 30 seconds to download on a 28.8 KB modem. Pages should be no larger than 30KB in total but it is important to remember that the navigation images will be cached the first time the page loads. Users will be shown how to calculate the maximum weight of a Web page. For example, the AFA template measures 26K which means that additional pages should be no larger than 56KB including the template. Users with slow modems or the visually disabled may not want to sit and wait for large images to download. Participants will be shown how to insert thumbnail images which will be linked to full-size versions of the images. If the visitor wishes to see the larger image they can do so – other users are not forced to wait 30 seconds for the page to download. On this page we have images of two very famous paintings - surely we could just put their titles as alt tags and that would suffice? Well yes, and no. The alt tag must be used to name the image and also use a long description page created to describe the
  • 81.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 80 paintings in more detail (WCAG 1.1 – Priority 1). The LONGDESC attribute is unsupported in Dreamweaver so the HTML code must be edited directly. Long descriptions are extremely difficult to write and time consuming. If you take the Mona Lisa as an example, how can we describe this picture in words? To a certain extent the answer to this question is dependent on the purpose of the image on the page. If the image is decorative the visually disabled are not really disadvantaged by not seeing the image. On the other hand, the image may be a fundamental part of a particular page and therefore require a detailed description. In the case of Monet’s Waterlilies how can we describe a predominantly blue picture? Will a visually disabled person understand the concept of blue? How do you describe the colour blue? The author has not really got a definitive answer to this problem. Technically it is quite easy to create a link to a long description page. In the case of the paintings it would probably require the input of a subject expert to provide a meaningful long description. The participants are asked to try and write a long description of these paintings as a way of highlighting the problems. This page also includes a number of foreign language quotations. Changes in the natural language of a document must be highlighted by using the LANG attribute (WCAG 4.1 – Priority1). Current browsers are not known to support the language attribute but w3c.org recommends placing foreign language quotes within <span> tags [95]. For example <span lang="fr">Bonjour</span> [96].
  • 82.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 81 13.7 Image Map – imagemap.htm Client-side image maps have a number of regions within an image. Each region has its own link and therefore can have alt text. The regions in a server-side image map only display coordinates. Therefore, browsers cannot indicate the destinations of the various links to the user. A series of redundant text links are recommended whichever type of image map is used because the ALT text is not displayed when users choose to browse with images turned off (WCAG 1.2 – Priority 1). The AFA site uses a client side image map (WCAG 9.1 – Priority 1) of Europe. Visitors can click on either the national flag of a particular country or a text link to obtain further information about that country. This information is contained on a separate page called countries.htm. 13.8 countries.htm This page contains various acronyms, for example EU and UK. By using the acronym tag, together with the title attribute, developers can provide a ‘long version’ of the acronym via a tooltip (WCAG 4.2 – Priority 3). The acronym tag can also be used to provide definitions of technical/difficult words in the form of a tooltip. This page also contains text displayed in columns a la newspaper style. Using columns in a table to display text can make text difficult to read, especially if one column is longer than the other (WCAG 10.3 – Priority 3). A screen reader usually reads the screen from left to right and top to bottom, regardless of layout. This can mean that the two top lines of the columns will be read together, followed by the second lines and so on. This is obviously confusing. The columnar text was therefore linearised.
  • 83.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 82 13.9 Summary This evolutionary prototype validates to WCAG AAA, Bobby Level 3, and American Section 508, but not to strict HTML 4.01 because one minor attribute has been deprecated. This is the ‘width’ attribute that should not be used within the ‘td’ tag. This error is not considered to be important as it is only used for layout purposes. The ‘align’ attribute is also deprecated in HTML 4.01 in favour of using style sheets. A web-based help guide was also produced to enable participants to complete the course. 14.0 Evaluation of the AFA Evolutionary Prototype Initial testing was undertaken using 12 inexperienced Dreamweaver users in Fresno State University, California during January 2002. None of the participants had detailed knowledge of Web Accessibility issues although they were all aware of the ‘big picture’. The majority of this group did not understand basic HTML and had been using Microsoft FrontPage to create their Web sites. This meant that the participants were not in a position to offer detailed comments on the accuracy of the HTML coding. Evaluation was therefore undertaken via informal discussion followed by a general question and answer session.
  • 84.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 83 Overall, everyone was extremely pleased with the course and a number of cogent observations were made. Firstly, everyone disliked the web-based course notes and requested a printed version of the notes. Secondly, detailed instructions in how to set up a site in Dreamweaver were requested. Time was a major constraint and no-one completed the course in one day. The sheer volume of material in the course means that there was very little time for deviation from the course material. This issue can be partly overcome by providing more detailed, step-by-step instructions. Web accessibility covers many issues and a number of discussions took place during the course of the day. Some of these discussions tended to focus on quite esoteric issues. For example, many physically disabled users use Dragon Naturally Speaking to browse the Internet. In order to easily and quickly select links it is helpful if the alt text is the same as the actual text on graphical buttons. In the AFA site the ‘table’ image is a link to the table page. The alt text should simply say ‘table’ rather than, for example, ‘link to table page’. This suggestion was incorporated into the AFA site and course materials to help Dragon users easily navigate Web sites. Participants also requested help with regard to Search Engine optimisation and the use of metadata.
  • 85.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 84 15.0 Working Prototype Following the training session based on the evolutionary prototype, and the feedback received from the training, a working prototype was constructed. The evolutionary prototype was used in its entirety together with the following additional elements. 15.1 Site Definition In response to user requests a section was added to the beginning of the course explaining how a site is defined in Dreamweaver. Site definition is an important first stage in the creation of a Web site. The program automatically creates and updates links as well as providing warnings when links are created to objects outside of the site. 15.2 Meta Data Meta data is information contained in the head of a html document containing information about the current page (WCAG 13.2 – Priority 2). Meta data consists of a number of tags containing two attributes. The NAME attribute specifies the type of information being supplied and the CONTENT attribute contains the actual information. Participants are asked to think about the keywords and description appropriate for a Web site about accessibility and to add the meta information to their template. 15.2.1 Keywords Many search-engines read the contents of the ‘Keywords’ META tag and use the information to index Web pages in their databases. Some search engines put a limit on the number of keywords or characters they will index, and some ignore all keywords
  • 86.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 85 beyond the limit. For this reason it is a good idea to limit keywords to a few well- chosen words, separated by commas. 15.2.2 Description Many search-engines read the contents of the ‘Description’ META tag. Some use the information to index Web pages in their databases, some also display the information below the link to a page in the search results instead of the first few lines of the page content. Some search engines put a limit on the number of characters they will index. 15.3 Tabindex and Accesskeys The TABINDEX attribute of the <A> and <INPUT> tags provide a means of specifying the way non-mouse users tab between the various links and form elements in a Web page (WCAG 9.4 – priority 3). Web developers don't usually need to worry about specifying the tab order because well designed pages and/or forms usually have a logical, built-in, tab order. At times though, a page - especially a page with forms - can benefit by assigning the tab order to form controls and/or links. Participants are invited to specify the tab order of the various links in the AFA site and reminded that the tabindex needs to be assigned in both the template and in the individual pages. There is not a right or wrong way to do this, participants are asked to put themselves in the position of a visually disabled person and think about how they would like to navigate a Web page. Accesskey is another attribute of the <A> tag and is rarely used. Accesskey shortcuts are specific to each individual Web page or site and enable users to quickly visit key links within a Web site (WCAG 9.5 – Priority 3).
  • 87.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 86 When browsing with Internet Explorer users press the ALT key combined with the relevant alphanumeric key to highlight a hyperlink. By pressing the ENTER or RETURN key the link is followed. When using Netscape 6 users simply need to select ALT + the alphanumeric key and they will be immediately taken to the relevant page. Accesskeys do not work in Opera 6. On Macintosh systems, users press CONTROL + the relevant access key to highlight a hyperlink. Pressing ENTER or RETURN will then take users to the linked page. It is fine to use the same accesskey more than once. In such cases the user will simply tab through the links until they highlight the required link and the press ENTER key. Most users do not expect a page to have keyboard shortcuts and there is no standard method of alerting users to the presence of the shortcuts. One method is to add the information to the alt or title attributes but this can cause problems for users of Dragon Naturally Speaking software, as mentioned in Section 14.0. The normal convention for non-Internet Windows programs is to underline the letter of the shortcut key – for example, ALT+H usually opens the HELP menu. This convention would not be appropriate on the Web because underlined text usually indicates a link. Another potential drawback of keyboard shortcuts is that they may interfere with the shortcuts of the particular browser or screenreader that is being used. For this reason numbers are recommended rather than letters as shortcut keys. Despite these problems keyboard shortcuts allow users to quickly access key pages within a site.
  • 88.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 87 15.4 Status Bar Messages JavaScript status bar messages provide a visual clue for visitors. The status bar is located in the bottom left of the browser. When a user moves their mouse over a link an onMouseOver event triggers a status bar message; when the user moves their mouse away from the link, an onMouseOut event removes the message. For users who do not use a mouse and tab through links an onFocus event is used to trigger the message and an onBlur event makes the message disappear (WCAG 9.3 – Priority2). The status bar message should display the purpose of the link and can include accesskey information. Participants are advised that onMouseOver and onMouseOut status bar messages do not work within image maps although onFocus and onBlur messages do. 15.5 Changing the default Dreamweaver template As previously mentioned, one of the intentions of the author was to train Web developers to work smart. Whenever a new document is created within Dreamweaver the program loads a default blank page, this page is not inaccessible per se, but it is incomplete as far as valid HTML is concerned. Users are shown how to edit the default page although users on the UCLAN network do not have access to the required folder and therefore cannot change the default template. 15.6 User Manual A comprehensive 30-page user manual was written to accompany the AFA course. A copy of the second draft is appended to this document.
  • 89.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 88 Each stage in the retro-fitting process is given a step-by-step treatment and includes examples of accessible html code, useful keyboard shortcuts, and explanations as to why changes have been made. The manual concludes with a list of useful related Web links. 16.0 Evaluation & Feedback Fifty Web developers from both HE and FE institutions around the UK, split into four groups, undertook a 1 day training course using the AFA material between March and May 2002. Each participant was asked to fill in a course evaluation form (see Appendix I). The main questions of interest related to the actual course content and the overall benefit of the course to the participant. The answers to those two questions are summarised below. Very Good Good Satisfactory Unsatisfactory Poor 5 4 3 2 1 Content 34 16 Overall 37 13 On a scale of 1 (poor) to 5 (very good) the mean score for the course content was 4.68. No-one rated the course content at less than 4 (good). The mean score for the overall benefit was 4.74 – again no-one rated the overall benefit at less than good. As in the case of the Fresno participants, the majority of the UK participants were technically inexperienced in terms of accessible html coding. However, the evaluation forms produced a number of excellent suggestions and comments, many of which will be incorporated into future versions of the course.
  • 90.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 89 16.1 Comments Many of the participants complained that one day was insufficient time to fully digest the wealth of material in the AFA course and complete the exercises. In particular, participants would have liked more time to experiment with screen readers. Many participants felt that a two-day course would have been better. Whilst this is a valid comment, the cost constraints of providing a two-day course may well be prohibitive. The intention is that the course will eventually be fully Web-based, perhaps housed within the WebCT virtual learning environment. This would mean that participants could complete the course in their own time. Several comments related to the actual course manual. One person in particular commented that the manual assumed too much prior knowledge; another person suggested that the instructions and code examples should be clearly distinguished. This is a fair comment and future versions of the course manual will take these comments into account. Another person said that he was dyslexic and that the black text on a white background was quite difficult to read. Manuals printed on different coloured paper will be provided at future training courses. One person suggested that the examples should be linked to the guidelines and prioritised. The author fundamentally rejects this suggestion. The whole basis of the AFA course is that people create an actual Web site. As mentioned in Section 8.3, the majority of existing accessibility resources takes the example and guideline approach. Another person complained that they used FrontPage rather than Dreamweaver and that the step-by-step examples would not work in FrontPage. There are three replies to this complaint. Firstly, the actual subtitle of the AFA course is ‘Creating Accessible Websites using Macromedia Dreamweaver’ and this was clearly pointed out in both the course promotional material and booking form. Secondly, as discussed
  • 91.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 90 in Section 11.4 FrontPage does not create accessible html code, the author sees no benefit in creating material for a software program that is inappropriate for the task in hand. Finally, the fundamental principles outlined in the course material can be applied to any Web page regardless of how it was originally created. This assumes that the Web developer can understand the propriety code written by some Web authoring programs. One person thought that the bad pages were actually too bad. The author agrees with this comment to a certain extent however, people tend to find extreme examples easier to remember than ‘normal’ pages. Future versions of the course may take this comment into account, perhaps as a way of reducing the time needed to complete the course. Whilst delivering the course the author observed a number of potential problems with the Web pages. Firstly, the advice to separate links using the | symbol (given in Section 13.2) - whilst technically correct - could cause irritation to screen reader and speech browser users. The problem is that the screen reader reads out the word bar every time it encounters the | symbol. Secondly, the advice to make the named anchor text invisible, again in Section 13.2, could result in some Search Engines refusing to index a site. The problem is that some Web sites deliberately repeat keywords in their pages, using invisible text, to try and fool Search Engine robots and obtain a higher page ranking. The solution to both these problems is to use a transparent gif.
  • 92.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 91 Thirdly, the text navigation links in the footer of the page are separated by a bar and invisible text. The bar should be replaced by a transparent gif; the text should be made visible. These three ‘errors’ will be rectified in future versions of the AFA course. 16.2 Usability Testing The official definition of Usability, according to the International Organization for Standardization (ISO), is: ‘The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments.’ [97] Web site usability is not just about ensuring that everything on a Web site works but is also concerned with how quickly and easily visitors are able to make use of the site and complete their tasks/objectives. Obviously it is important for organisations to meet accessibility guidelines but it is also important to ensure that the Web site is attractive, intuitive and meets its aims and objectives. Appendix J contains a list of 54 usability tests carried out on the AFA retro-fitted Web site. The usability tests were derived from a list of 113 usability tests outlined by Jakob Neilsen and Marie Tahir [98]. The remaining 59 tests were not applicable to the AFA site. Usability tests reflect best practice and current Internet conventions. For example, it is generally accepted that the best position for a corporate logo is the top left of the screen and that the logo should provide a link back to the homepage. This convention will not be found in any accessibility guidelines but users expect logos to behave in this fashion.
  • 93.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 92 The AFA site successfully passed 50 of the 54 tests; four of the tests were failed (designated by red text in the Appendix). We will now consider the four failed usability tests. 16.2.1 Lack of Tag Line The tag line is a brief summary of what a Web site is all about. For example, CNET.com’s tag line reads ‘the source for computing and technology’ [99]. The AFA site does not have a tag line and this is an oversight and will be rectified in the next version of the course. 16.2.2 Homepage Link to Homepage An active link to the homepage on the homepage can confuse some visitors. When a user clicks on a link they expect the page content to change. The AFA Web site fails this test on three counts. Firstly, the AFA logo is a link to the homepage. This link should be removed on the homepage itself but remain on all other site pages. Secondly and thirdly, the main navigation bar, which as a text version in the footer, includes a home button. This button, and the duplicate text link, should be removed in future versions of the course. 16.2.3 ‘Pop-up’ Windows ‘Pop-up’ windows can confuse visually disabled users. When the window pops up it takes the focus away from the main site content. I have included this error because all the external links within the AFA site open up in a new browser window.
  • 94.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 93 16.2.4 ‘Last Updated’ Information The AFA site does not include ‘last updated’ information. This is a serious oversight because many of the AFA course participants have indicated that they would like to be notified when future versions of the course are available. The last updated information would obviously be helpful and will be added to the template on the next version of the course. 17.0 Conclusion When the author was asked to develop the AFA course in October 2001 (see Appendix K), little did he realise what a massive subject Web accessibility was. This whole topic is very much in its infancy. Developers have not even asked all the questions - never mind identified the answers and their solutions. Future versions of the course will include new accessibility techniques as they evolve. It has been said that problems lead to innovation (source: unknown); many accessibility related problems certainly require imaginative solutions. The AFA course provides Web developers with the means to create SENDA compliant accessible Web sites. The AFA course was ‘signed-off’ in June 2002 (see Appendix L). The author will be the first to admit that there is still much to do. As outlined in Section 5, accessible Web sites prevent academic institutions from falling foul of the various domestic, European and worldwide disability related laws. In addition to the obvious legal benefits for complying with SENDA, there are a number of additional, compelling reasons for creating accessible Web sites.
  • 95.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 94 17.1 Economic Reasons It makes sense for owners of e-business and commercial Web sites to design a Web site which can be accessed by the widest possible range of people. An accessible Web site ensures that the potential customer base is as large as possible. The customer base will also include more affluent visitors, perhaps using the very latest Internet browsing technology, because they will also be able to access the Web site using their latest ‘gadget’. Accessible Web sites will also make distance learning courses more saleable to overseas markets. For example, WCAG AA compliant Web sites will also comply with American Section 508 guidelines. [100] 17.2 Selfish Reasons Good accessibility techniques help search engines to better index Web sites. For example, alternative text for graphics can be optimised for search engines by well thought-out and relevant keywords. The Web skills of the developer will be drastically improved if they know how to write good HTML - a key skill needed to create accessible Web sites. This makes the developer more employable and able to command a higher salary. Academic institutions benefit from having highly skilled staff that may well be more motivated, effective, and productive. Staff retention may be a factor. 17.3 Altruistic Reasons Accessible Web sites improve the quality of life for millions of disabled users around the world - they can enjoy the benefits of the Web along with everyone else.
  • 96.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 95 The Web is the best way yet of providing equal opportunities for all but many Web designers simply do not consider the needs of disabled users when designing and creating Web sites. 17.4 Design Reasons ‘Designing for disabled users in ordinary environments is the same as designing for non-disabled users in extraordinary environments.’ [101] Designers should therefore design for extraordinary users. The result is a Web site which is accessible to a non-disabled user working with a non-standard browser and using non-standard hardware. This principal supports the original vision of Tim Berners-Lee, the director of the World Wide Web Consortium and inventor of the World Wide Web who said: ‘The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.’ [102] Accessible design benefits everyone. Web sites are easier to navigate, information is easier to locate, and Web pages download quickly. This will attract repeat visitors to the site. These visitors will also tell their friends and colleagues so increasing the sites’ popularity. 18.0 Further Reflections Reflecting about the AFA project I am convinced that the fundamental objective is impossible to meet. Is it really possible to create a Web site that is truly accessible to all?
  • 97.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 96 The working definition of Web accessibility used in the AFA project was ‘anyone using any kind of Web browsing technology must be able to visit any site and get a full and complete understanding of the information contained there, as well as have the full and complete ability to interact with the site.’ Is it really possible to create a site that anyone can use using any kind of Web browsing technology and get a full and complete understanding of the site? In my opinion, the answer is no. There are simply too many variables. For example, there are 41,000 different languages (Section 3.1.4) and more than 100 different Internet browsers (Section 3.1.2). Are we seriously expecting Web developers to create 41,000 different versions of every page and to then test those pages in every conceivable browser at every conceivable screen resolution? If we add another variable, the numbers lose meaning. For example, it is impossible to estimate the number of different disabilities that people may have and some people suffer from multiple disabilities. The implications of SENDA are that any one individual could sue an academic institution because they could not access a particular Web site, despite the best efforts of the Web developer. In my opinion, the Web developer has a better chance of complying with SENDA if they take a different approach to the problem. The clue to the solution lies in the fourth definition of Web accessibility put forward by the Making Connections Unit (MCU), based in Glasgow Caledonian University, namely, that an accessible Web site is one which is ‘accessible to machines first, and people second’. The one thing that all Internet users have in common is that they must use some form of Web browser, whether that be an old version of Internet Explorer, a PDA, or the latest Java enabled telephone. If Web pages could be constructed in such a way that
  • 98.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 97 they would work on all browsers, the Web developer can reduce the variables considerably. In the author’s opinion, the answer lies in coding pages in XHTML using a strict DTD. Strict XHTML is intended to work on all browsers and is fully backwards, and forwards, compatible. Strict XHTML does not allow deprecated tags or elements. Pages must be marked-up correctly resulting in ‘well formed’ documents. The latest Web browsing technologies require documents to be well formed because they cannot interpret badly marked-up documents. Almost by definition a Web page which is validated to XHTML 1.0 Strict will display correctly on any and all Web browsers. If Web pages are coded using XHTML, in conjunction with CSS, the user can format the Web pages to suit their own preferences. The Web developer therefore need only worry about the actual page content. This approach must give the Web developer a fighting chance in the quest to create accessible Web pages. The next version of AFA will be constructed using these principles.
  • 99.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 98 Appendix A: Student Disability Tables 2000/2001 Total Total known to have a disability Dyslexia Blind/ Partially sighted Deaf/Hearing impairment Wheelchair user/Mobility difficulties Personal care support Mental health difficulties An unseen disability Multiple disabilities Other disability No Known disability Not known/sought Research for a higher degree 16090 620 150 30 45 40 0 15 255 25 60 14810 660 Full-time 10315 405 105 15 25 15 0 10 185 15 35 9480 430 Female 4650 165 35 5 10 5 0 0 80 5 15 4285 200 Male 5665 240 65 10 15 10 0 10 105 10 20 5195 230 Part-time 5775 215 45 10 20 25 0 5 65 15 25 5330 235 Female 2740 115 25 5 10 15 0 0 35 5 15 2525 100 Male 3035 100 20 5 10 10 0 5 30 5 10 2800 135 Taught course for a higher degree 62055 2230 665 70 165 135 10 95 740 90 270 57785 2040 Full-time 25125 1145 410 20 70 55 0 50 370 50 125 23205 775 Female 12095 535 165 10 30 30 0 25 185 25 70 11200 365 Male 13030 610 245 10 35 25 0 25 185 25 55 12005 410 Part-time 36930 1085 255 45 100 80 5 45 370 45 145 34580 1265 Female 20305 615 145 20 45 50 5 20 215 25 90 19075 615 Male 16625 470 110 25 55 25 5 20 155 15 55 15505 650 Other postgraduate 81790 2165 585 80 150 105 10 65 750 140 275 76325 3305 Full-time 31960 1130 345 40 55 55 5 35 430 30 130 29740 1095 Female 20900 690 200 20 40 30 0 15 280 20 80 19490 720 Male 11060 440 145 15 15 25 5 20 155 10 45 10250 375 Part-time 49830 1035 240 45 90 45 5 30 320 110 145 46585 2210 Female 31475 675 155 15 60 30 5 20 225 75 90 29265 1540 Male 18355 360 85 25 30 20 0 15 95 40 55 17320 675 First degree 320105 16365 6840 510 840 590 40 480 4470 600 1990 297535 6205 Full-time 287325 15080 6570 470 750 475 25 395 4085 515 1795 267585 4660 Female 154110 7600 2965 195 415 270 15 220 2330 245 945 144050 2460 Male 133215 7485 3605 280 335 205 10 175 1755 270 850 123530 2205 Part-time 32780 1280 270 35 90 115 15 90 390 85 195 29955 1545 Female 21275 775 150 20 55 75 5 45 250 50 125 19495 1005 Male 11505 505 120 15 35 40 5 45 140 35 70 10460 540 Other undergraduate 275050 9595 2185 335 860 680 45 635 2215 1155 1490 247915 17540 Full-time 51510 2375 1030 80 145 90 10 55 630 75 260 47825 1305 Female 31250 1180 430 35 90 35 10 25 415 25 115 29150 920 Male 20255 1195 600 45 55 55 0 30 215 50 145 18675 385 Part-time 223545 7215 1155 255 715 590 30 580 1585 1075 1230 200090 16235 Female 146130 4460 675 130 450 375 10 315 1075 675 750 130805 10865 Male 77415 2760 475 125 265 215 20 265 510 405 480 69285 5370 Total - Postgraduate 159935 5015 1400 175 360 280 20 175 1740 260 600 148920 6005 Total - Undergraduate 595155 25955 9025 840 1700 1270 80 1115 6690 1755 3480 545455 23745 Total - All levels 755095 30970 10430 1020 2060 1550 100 1290 8430 2015 4080 694370 29750
  • 100.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 99 Appendix B: UCLAN Web Site Structure Department / Faculty HTML Files Art & Fashion 178 Arts Centre 9 Band 20 Biology (approx) 550 Bridge 31 Built Environment Approx 200 Class (Faculty) 1232 Clearing 57 Computing 110 Cumbria 92 D&T Office 10 Design 5 Directorate 72 ECTS 150 Environmental (approx) 300 Facilities Management 67 Finance 124 Harris Knowledge Park 41 Health (Faculty) 1024 Hospitality Services 47 Human Resources 294 ISS 160
  • 101.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 100 IVI2000 28 Jobs 5 Keyskills 51 LBS (Faculty) 1165 Library 817 News Archive 877 Physics (approx) 400 Planning 450 Psychology (approx) 1000 Quality 29 Registry 319 Research 102 Science Office 5 Secretariat 88 Student Services 1395 Technology Approx 250 UCLan Main 1200 Working Together 77 Total HTML Pages 13031
  • 102.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 101 Appendix C: WCAG Guidelines Appendix C1: Guideline 1 ‘Provide equivalent alternatives to auditory and visual content.’ The aim is to provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content. Although some people cannot use images, movies, sounds, applets, etc. they may still use pages that include equivalent information to the visual or auditory content but that information must serve the same purpose. This guideline emphasizes the importance of providing text equivalents of non-text content. The beauty of a text equivalent lies in the fact that it can be rendered in ways that are accessible to people with various disabilities using a variety of assistive technologies. Text can be readily output to speech synthesizers and Braille displays, and can be presented visually on computer displays and paper. Synthesized speech is critical for individuals who are blind and for many people with the reading difficulties that often accompany cognitive disabilities, learning disabilities, and deafness. Braille is essential for individuals who are both deaf and blind, as well as many individuals whose only sensory disability is blindness. Text displayed visually benefits users who are deaf as well as the majority of Web users. Non-text content benefits some users, especially non-readers or people who have difficulty reading. In video or other visual presentations, visual action such as body language or other visual cues may not be accompanied by enough audio information to convey the same information. Unless verbal descriptions of this visual information are provided, people who cannot see (or look at) the visual content will not be able to perceive it.
  • 103.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 102 Appendix C2: Guideline 2 ‘Don't rely on colour alone.’ It is vital to ensure that text and graphics are understandable when viewed without colour. If colour alone is used to convey information, people who cannot differentiate between certain colours and users with devices that have non-colour or non-visual displays will not receive the information. When foreground and background colours are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of colour deficits. Appendix C3: Guideline 3 ‘Use mark-up and style sheets and do so properly.’ Documents must be structured correctly. Content should be presented using style sheets rather than with presentation elements and attributes. Improper use of mark-up hinders accessibility. Misusing mark-up for a presentation effect, for example using a header to change font size, makes it difficult for users with specialized software to understand the organization of a page. Content developers must not sacrifice appropriate mark-up because a certain browser or assistive technology does not process it correctly. For example, it is appropriate to use the TABLE element in HTML to mark up tabular information provided that the table is coded correctly. Appendix C4: Guideline 4 ‘Clarify natural language usage.’ HTML allows developers to mark-up their documents in a way that facilitates pronunciation or interpretation of abbreviated or foreign text. When content developers mark up natural language changes in a document, speech synthesizers and Braille devices can automatically switch to the new language, making the document more accessible to multilingual users.
  • 104.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 103 Content developers should identify the predominant natural language of a document's content (through mark-up or HTTP headers). Content developers should also provide explanations of abbreviations and acronyms. In addition to helping assistive technologies, natural language mark-up allows search engines to find key words and identify documents in a desired language. Natural language mark-up also improves readability of the Web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf. When abbreviations and natural language changes are not identified, they may be indecipherable when machine-spoken or Brailled. Appendix C5: Guideline 5 ‘Create tables that transform gracefully.’ Tables often present problems to users of screen readers irrespective of their purpose. It is important that tables are coded so that they linearise correctly. Tables should primarily be used to mark up tabular information although many content developers use tables to lay out pages; this is a contentious issue. Appendix C6: Guideline 6 ‘Ensure that pages featuring new technologies transform gracefully.’ Designers should ensure that pages are accessible even when newer technologies are not supported or are turned off. Although content developers are encouraged to use new technologies that solve problems raised by existing technologies, they should know how to make their pages still work with older browsers and people who choose to turn off features.
  • 105.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 104 Appendix C7: Guideline 7 ‘Ensure user control of time-sensitive content changes.’ Developers should ensure that moving, blinking, scrolling, or auto-updating objects or pages can be paused or stopped. The BLINK and MARQUEE elements are not defined in any W3C HTML specification and should never be used. Some people with cognitive or visual disabilities are unable to read moving text quickly enough or at all. Moreover, screen readers are unable to read moving text. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. People with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects. Appendix C8: Guideline 8 ‘Ensure direct accessibility of embedded user interfaces.’ Embedded objects, including items such as Windows Media files or QuickTime movies, are often presented within their own interface. These interfaces must be accessible. If the interface of the embedded object cannot be made accessible, an alternative accessible solution must be provided. Appendix C9: Guideline 9 ‘Design for device-independence.’ Developers should create pages that allow users access via a variety of input devices. Device-independence means that the user may interact with a Web site with their preferred input or output device. Examples of such devices include; mouse, keyboard, voice and head wand. Generally, pages that allow keyboard access are also accessible through other speech input devices.
  • 106.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 105 Appendix C10: Guideline 10 ‘Use interim solutions.’ Pages should be constructed so that assistive technologies and older browsers will operate correctly. For example, older screen readers read lists of consecutive links as one link. These active elements are therefore difficult or impossible to access unless the links are separated by something other than white space, for example a transparent gif. Appendix C11: Guideline 11 ‘Use W3C technologies and guidelines.’ Web sites should be constructed using W3C technologies and guidelines. When this is not possible, or doing so results in material that does not transform gracefully, an alternative accessible version of the content should be provided. Many non-W3C formats (e.g., PDF, Shockwave, etc.) require viewing with either plug-ins or stand-alone applications. Often, these formats cannot be viewed or navigated with standard Web access or screen reading tools. Non-W3C formats should be converted to HTML/XHTML although this does not always create an accessible document. Therefore, each page should be validated for accessibility and usability after the conversion process. Avoiding non-W3C and non-standard features (proprietary elements, attributes, properties, and extensions) will tend to make pages more accessible to more people using a wider variety of hardware and software. When proprietary or inaccessible technologies must be used, equivalent accessible pages must be provided. Even when W3C technologies are used, they must be used in accordance with accessibility guidelines. If a page does not easily convert, developers should either revise the page until its original representation converts appropriately or provide an HTML or plain text version.
  • 107.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 106 Appendix C12: Guideline 12 ‘Provide context and orientation information.’ Complex relationships between different parts of a page may be difficult for people with cognitive disabilities and people with visual disabilities to understand. Therefore, developers should provide context and orientation information to help users understand complex pages. This information is useful for all users. Appendix C13: Guideline 13 ‘Provide clear navigation mechanisms.’ Clear and consistent navigation systems are important to people with cognitive disabilities or blindness, and benefit all users. Developers should provide a clear and consistent navigation system. This will ensure that users will be able to find the information they are seeking easily. Appendix C14: Guideline 14 ‘Ensure that documents are clear and simple.’ Consistent page layout, recognizable graphics, and easy to understand language benefits all users. In particular, they help people with cognitive disabilities or those who have difficulty reading. It is important to ensure that images have text equivalents for people who are blind or have low vision, and for any user who cannot or has chosen not to view graphics. Using clear and simple language promotes effective communication and is particularly important for those users whose first language is not English.
  • 108.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 107 Appendix D: HTML Code Comparison The goal was to produce a simple Web page containing just a single linked image that rolled over to another image. The following table shows the number of lines of code generated by each program. [103] The test was carried out in November 2002. Macromedia Dreamweaver MX Adobe GoLive 6 Microsoft FrontPage 2002 Lines of Code 49 55 730 Characters 1,773 1,453 16,380 Good JavaScript? No No No W3C valid XHTML? Yes No No
  • 109.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 108 Appendix E: Internet Trends Appendix E1: Demographics (users shown in millions) Appendix E2: User Web Browser Settings (April 2003) 57.00% 36.00% 1.00% 2.00% 1.00%1.00% 2.00% IE6.x IE5.x IE4.x NN6.x NN4.x Opera Other 2.58 68.90 83.35 1.90 136.86 10.74 World Total - March 2000 304.36 million Africa Asia & Pacific Europe Middle East USA & Canada South America
  • 110.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 109 Appendix E3: User Screen Resolution Settings (April 2003) Appendix E4: User Operating Systems (April 2003) 2.00% 2.00% 46.00% 50.00% 585x386 or less 640x480 800x600 1024x768 or above 31.00% 8.00% 27.00% 2.00% 2.00% 1.00% 27.00% 2.00% Windows 98 Windows NT Windows 2000 Windows 95 Mac (PPC) Linux Windows XP Other
  • 111.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 110 Appendix E5: Internet Connection Speeds (December 2001) Appendix E6: User Colour Settings (April 2003) 3.00% 17.00% 16.00% 24.00% 14.00% 26.00% 14.4K 28K 33.6K 56K 56K - 1MB 1MB+ 3.00% 5.00% 41.00% 51.00% 8-bit (256 colours) AOL 8-bit (256 colours) 16-bit (65,536 colours) 24-bit and above (16,777,216 colours +)
  • 112.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 111 Appendix F: Department of Physics, Astronomy and Mathematics Appendix F1: Origin of Web Site Visitors Country of Origin % of hits United Kingdom 79.8% United States 6.3% China 3.1% Netherlands 1.8% Japan 1.3% Total 100.0% Appendix F2: Browser Used by Web Site Visitors Browsers Internet Explorer 5.x 76.5% Netscape 4.x 11.8% Internet Explorer 6.x 5.9% Netscape 6.x 5.9% Total 100.0% Appendix F3: Operating System Used by Web Site Visitors Operating Systems Windows 98 38.2% Windows NT 26.5% Windows 95 8.8% Windows ME 8.8% Sun OS 5.9% Windows 2000 5.9% Linux 2.9% Unknown 2.9% Total 100.0%
  • 113.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 112 Appendix G1: Customising Internet Explorer Applying font and colour changes 1. On the Tools menu, click Internet Options 2. On the General tab, select Accessibility 3. Click the three boxes to show ticks. Changing the font Using a sans-serif font (such as Arial), rather than a serif font (such as Times New Roman), can make text easier to read on a computer screen. 1. On the Tools menu, click Internet Options 2. On the General tab, click Fonts 3. In the Proportional and Fixed-width font lists, select the fonts you would like to use. Altering text size 1. On the Tools menu, click Text Size 2. Select the font size you would like. Changing text and background colour Web site authors and designers often specify particular fonts, typefaces and background colours for their pages. Some combinations can sometimes make the text difficult to read. You can override these settings by choosing your own preferred colour scheme. 1. On the Tools menu, click Internet Options 2. On the General tab, click Colors 3. Click on the tick box labelled Use Windows Colors 4. Click Text, and select the colour you want
  • 114.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 113 5. Click OK 6. Click Background, and select the colour you want to use 7. Click OK. Turning off images 1. On the Tools menu, click Internet Options 2. On the Advanced tab, scroll down to Multimedia 3. Click on Show pictures to remove the tick 4. Click on Apply 5. Click on OK. Other Options There are more options to make Web sites easier to read, such as removing animation and expanding text. To look at the other options: 1. On the Tools menu, click Internet Options 2. Select the Advanced tab 3. Choose the options you would like. Macintosh Users Macintosh Users of IE5 can find the above settings in EDIT » PREFERENCES. Under "Web Content" you can set colours and select or deselect the following: 1. Show pictures. 2. Show style sheets. 3. Show frames. 4. Enable scripting.
  • 115.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 114 Appendix G2: Customising Netscape 4.x To change the settings on your browser go to the EDIT menu, and click on PREFERENCES. From here you can make the following changes. Changing font size 1. Click on View 2. Select Increase Font or Decrease Font 3. You can also change the font size by using the following keyboard shortcuts. 4. Ctrl + ] to enlarge the font size 5. Ctrl + [ to reduce the font size. Changing font settings 1. Click on Edit 2. Click Preferences 3. Click on Appearance 4. Click Font; 5. Change the Variable Width Font and the Fixed Width Font to the type you prefer. (To use these fonts when you visit all Web sites in future, click on "Use my default fonts" overriding document specified fonts.) Changing the colour of the background and text 1. Click on Edit 2. Click Preferences 3. Click on Appearance 4. Click Colors 5. Select Text, and choose the colour you would like to use
  • 116.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 115 6. Click OK 7. Select Background, and choose a colour 8. Click OK 9. Click OK to close Preferences. (To use these settings in future, click on "Always use my colours", overriding all documents.) Turning images off 1. Click on Edit 2. Click Preferences 3. Select Advanced 4. Remove the tick from the box marked "Automatically load images" 5. Click OK. Turning off style sheets or JavaScript 1. Click on Edit 2. Click Preferences 3. Select Advanced 4. Remove the tick from the box marked "Enable style sheets" 5. Remove the tick from the box marked "Enable JavaScript" 6. Click OK. Appendix G3: Customising Netscape 6 In Netscape 6 you can change the default options via EDIT >> PREFERENCES. Select the Appearance Category to edit font and color settings. You can disable Style Sheets via the Advanced Category.
  • 117.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 116 Selecting VIEW >> Text Size allows you to alter the text size. You can choose a percentage change or you can make the text larger or smaller. You can also change the font size by using the following keyboard shortcuts. 1. Ctrl + ] to enlarge the font size 2. Ctrl + [ to reduce the font size. To adjust the readability of fonts, select from the drop-down list the dots per inch (dpi) for displaying Web pages. Select "Other" to open the ‘Calibrate Resolution’ dialog box. This allows you to calibrate your screen resolution by measuring how long a line appears on your screen (you will need a ruler). Increased screen resolution may improve the readability of your text. Graphics can be turned off via the Privacy & Security Category in Preferences. Appendix G4: Customising Opera 6 Font size To adjust font size use the ZOOM box that should be located to the right of the Search box on the menu bar. Font, colour and link settings Select FILE >> PREFERENCES >> Under Fonts and colors you can change font style, size and colour for text, headers, forms and some of other style sheet settings. Select, for example, <h1> and then click on CHOOSE to select your preferred <h1> settings. You can also click on 'My link style...' and choose link colours and whether they should always be underlined. Select 'Strike through' for visited links and see if you like the effect. 'Always border on links' is an interesting option.
  • 118.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 117 Other style settings Experiment with the settings under "Page style", especially the "User mode" settings. Here you can specify whether you want to use your own styles or those specified by the Web designer. Web designers can unchecked "Tables" and see if their Web pages 'transform gracefully' when they are linearised. Switching between styles To the left of the location bar are four small icons. The third icon, which looks like a document, is the 'Toggle between Author Mode and User Mode' icon. Click this icon and switch between the styles specified by the Web designer or your own settings according to your preferences. Turning images off The second icon on the same toolbar allows you to quickly turn off graphics. Clicking this icon allows Web developers to quickly check whether they have specified alternative text for images. Appendix G5: Setting Up Internet Explorer for Supernova To enable Supernova users to access the Web correctly a number of changes to Internet Explorer are required to ensure that the speech will function correctly. 1. Press ALT+V to access the View Menu 2. Press B to turn off the Status Bar 3. Press ALT+V to access the View Menu again. 4. Press S to remove the Standard Buttons 5. Press ALT+V to access the View Menu a third time. 6. Press T to enter the Toolbar menu 7. Press A to remove the Address Bar.
  • 119.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 118 8. Press ALT+T to enter the Tools menu 9. Press O to enter the Options Menu 10. Press SHIFT+ TAB – the screen reader should read out ‘General Tab Control’ 11. Press Right Hand Cursor key 5 times to select Advanced tab 12. Press TAB key to select Accessibility 13. Using cursor keys move down 1 space to the ‘Always Expand ALT text for images’. 14. If the setting is set to OFF, press the space bar to turn it on. 15. Again using cursor keys, move down 1 to the ‘Move system caret’. This should be set to ON. 16. Using cursor keys move down to the Multimedia section. 17. Using space bar turn off following options: 18. Play animations 19. Play videos. 20. Show image downloads. 21. Show pictures. 22. Smart image dithering. 23. Press return and then F5. 24. Press ALT+ SPACE; then press X to maximise the windows. Appendix H: FONT Tags The FONT tag should generally be avoided in creating accessible Web sites. While attribute specifications like SIZE="+1" or SIZE="-1" are relatively harmless, absolute sizes like SIZE=“1” can result in text that is too small to read. Style sheets allow authors to suggest relative changes in font size with much greater flexibility than is allowed under FONT (WCAG 3.3 & 3.4 – Both Priority 2). The COLOR attribute should always be avoided since many supporting browsers still display the font colour when the user tries to override author-specified colours. The result could be an unreadable document if the font colour does not contrast well against the reader's chosen background.
  • 120.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 119 The FACE attribute of the FONT element can not be overridden by the user in many browsers. This may result in the browser choosing a font that is very difficult to read given the user's platform and environment settings. The same font may render strangely on different platforms.
  • 121.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 120 Appendix I: AFA Training Evaluation Form Course Title: Access For All - Creating Accessible Web Sites Date: May 2002 We are keen to evaluate all of our events as it is important to us that we offer an excellent service and continue to improve this service. We will ensure that any information you provide will be kept in the strictest confidence. Thank you for your co-operation. 1 Which parts of the event were most useful? Please say why. 2 Which parts of the event did you find least useful? Please say why. 3 How do you think the session could be improved? Review of Event Very good Good OK Poor Very Poor Structure (logical development) Content (balance of theory and practical work? Delivery of course (tutor’s style and all participants involved?) Overall value of course Venue, Service/Administration Very good Good OK Poor Very Poor Venue Refreshment arrangements Easy to book onto training event Confirmation of booking Available to contact for enquiries Staff professional, courteous, and helpful (if not contacted leave blank) Additional comments (Particularly if you have indicated satisfaction less than ‘good’): Evaluation Form
  • 122.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 121 Appendix J: AFA Usability Tests NO USABILITY / ACCESSIBILITY TEST 1 Is the organisation name & logo displayed prominently? YES 2 Is there a tag line? How many words? Is it relevant? NO 3 Is this an obvious homepage? YES 4 Is there any internal organisation information? NO 5 Is there any marketing jargon? NO 6 Are style / fonts / colours consistent? YES 7 Are there any single-item lists? NO 8 Are abbreviations / acronyms explained? YES 9 Is any UPPERCASE text used? NO 10 Are there any exclamation marks? NO 11 Are there any "Click Here" links? NO 12 Are there any "More …." links? NO 13 Is the word "Link" used to show a list of links? NO 14 Is the navigation system consistent? YES 15 Does the homepage include a link to the homepage? YES 16 Are category/link names obvious? YES 17 Is there a "Simple Search" feature on homepage? NO 18 Is the Search input box at least 20 characters? N/A 19 Does the Search automatically search the whole site? N/A 20 Is there a link to an advanced Search feature? N/A 21 Is there any irrelevant content? NO 22 Is there a good contrast between the text and background? YES 23 Are absolute fonts used? NO 24 Is CSS used? YES 25 Is the page design Liquid / Flexible? YES 26 is there horizontal scrolling at a screen size of 800 x 600 pixels? NO 27 Does the page linearise correctly? YES 28 Does page look OK in 4 main browsers? YES 29 Will page download in less than 10 secs on 56K modem? YES 30 Do ALL images include "Alt" text? YES 31 Are there "Title" tags on text links? YES
  • 123.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 122 32 Does page include animated logo / headlines? NO 33 Is there any scrolling text? NO 34 Are the date and time formats understandable? N/A 35 Is there any drop down lists? NO 36 Does page head include meta tags? YES 37 Will page title bookmark correctly? YES 38 Are there any "pop-up" windows? YES 39 Does page begin with "Welcome to …." NO 40 Is any advertising clearly labelled? N/A 41 Does page include link to Guestbook? Is it relevant? NO 42 Does page include "Last updated" information in clear date format? NO 43 Is there a Site Map? N/A 44 Does site have custom 404 errors? NO 45 Is there a "Splash" page? NO 46 Is page WCAG (or S508) Compliant? (WCAG AA) YES 47 Does HTML validate? (HTML 4 Transitional) YES 48 Is the DTD declared? YES 49 Is "Lang" attribute present? YES 50 Does page have autoplay music? Can you turn it off? NO 51 Do links make sense when read out of context? YES 52 Does page use frames? NO 53 Do main links have access keys? YES 54 Is there a "Skip Navigation" link? YES
  • 124.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 123 Appendix K: PROJECT OUTLINE FORM Project Name: Access For All Project Code: MAW/001 DETAILS OF PROJECT: • Investigate UCLAN’s obligations under DDA / SENDA legislation • Select appropriate Web authoring software • Design & Build inaccessible Web site • Retrofit inaccessible site according to WCAG Guidelines. Site must be accessible at WCAG ‘AAA’ • All pages to be tested in version 4+ browsers, screenreaders and aural browsers at a screen resolution of 800 x 600 pixels • Cascading Style Sheets must be used to enable rapid re-formatting of site • Full course notes must be available in various file format • Deliver 4 Training courses following Access For All Conference • Fully working prototype to be completed by May 2002 STAFFING COSTS: Internal Funding CONSUMABLE COSTS: N/A AUTHORISATION/ACCEPTANCE: LDU Signatory: Developer Signatory: Print Name: Pamela Houghton Print Name: Michael Wood Date: 1st October 2001 Date: 1st October 2001
  • 125.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 124 Appendix L: PROJECT COMPLETION FORM Project Title: Access For All Client: Learning Development Unit Project Code: MAW/001 Description of Project Deliverables: • Investigated UCLAN’s obligations under DDA / SENDA legislation • Selected appropriate Web authoring software: Macromedia Dreamweaver • Designed & Built inaccessible Web site • Retrofitted inaccessible site according to WCAG Guidelines. Site accessible at WCAG ‘AAA’ • All pages tested in version 4+ browsers, screenreaders and aural browsers at a screen resolution of 800 x 600 pixels • Cascading Style Sheets used to enable rapid re-formatting of site • Full course notes available in DOC, RTF, & PDF file formats • Delivered 4 Training courses following Access For All Conference • Fully working prototype completed by May 2002 We the undersigned, confirm that the above deliverables have been provided to the client, are of acceptable quality and constitute finished goods, in accordance with the original ‘Project Outline Form’. On Behalf of Developer Name: Michael Wood Signature: Date: 2nd June 2002 On Behalf of the Learning Development Unit Name: Pamela Houghton Signature: Date: 2nd June 2002
  • 126.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 125 References [1] Special Educational Needs and Disability Act 2001; © Crown Copyright 2001 http://www.hmso.gov.uk/acts/acts2001/20010010.htm [2] The full text of the DDA can be viewed online at www.legislation.hmso.gov.uk/acts/acts1995/1995050.htm. [3] http://www.drc-gb.org [4] Code of Practice for providers of Post 16 education and related services - DDA 1995: Part 4; http://www.drc.org.uk/law/codes.asp [5] ‘Web Accessibility and the DDA’; 2001; Sloan, Martin; The Journal of Information, Law and Technology, July 2 2001 [6] http://www.e-envoy.gov.uk/oee/oee.nsf/sections/Webguidelines-handbook-top/$file/handbookindex.htm [7] Section 1.4; Human Rights Act 1998 Study Guide - 2nd Edition http://www.humanrights.gov.uk/studyguide/index.htm [8] Parliament Resolution (2002)0325 - eEurope 2002: Accessibility of Public Web Sites and their Content http://europa.eu.int/information_society/topics/citizens/accessibility/Web/wai_2002/ep_res_Web_wai_2002/index_ en.htm [9] http://www.wired.com/news/print/0,1294,55708,00.html [10] http://www.uky.edu/TLC/grants/uk_ed/cases/caseslisting.html [11] A full transcript of the SOCOG case is online at http://scaleplus.law.gov.au/html/ddadec/0/2000/0/DD000120.htm [12] http://www.w3.org/WAI/Policy/ [13] http://www.section508.gov/ [14] http://www.oten.edu.au/oten/frames.cfm?page=about%2Fabout1%2Ehtm [15] http://www.oten.edu.au/optionkeys/accessible/definition.htm [16] http://www.section508.gov/index.cfm?FuseAction=ContentID=14 [17] http://www.mcu.org.uk/articles/whatisaw.html [18] http://www.w3.org/WAI/wcag-curric/author [19] http://www.w3.org/TR/WCAG10/ [20] http://europa.eu.int/information_society/topics/citizens/accessibility/Web/index_en.htm [21] http://www.w3.org/WAI/wcag-curric/ [22] http://www.starlingWeb.com/Webac.htm [23] http://browsers.evolt.org/ lists 115 different browsers with numerous versions. [24] Available from http://lynx.browser.org/ [25] Available from http://www-3.ibm.com/able/hpr.html [26] Available from http://www.cast.org/udl/index.cfm?i=211 [27] Available from http://www.microsoft.com/windows/ie/default.asp [28] Available from http://channels.netscape.com/ns/browsers/download.jsp [29] Available from http://www.opera.com/ [30] Available from http://www.dolphinuk.co.uk/products/supernova.htm [31] http://www.lgInternetfamily.co.uk/fridge.asp [32] http://www.niad.sussex.ac.uk/ [33] http://www.ethnologue.com/ [34] http://www.google.com/language_tools [35] Adapted from ‘Who has difficulties accessing your Web site?’; Digital Media Access Group, University of Dundee; http://www.dmag.org.uk/resources/whocannotaccess.asp [36] ‘facts@uclan’; Department of Advancement, UCLAN, December 2002 [37] Source: Fraser McMillan, Internet Co-coordinator, Media and Promotion Office, UCLAN [38] Available from http://bobby.watchfire.com/bobby/html/en/index.jsp [39] Web Accessibility for People with Disabilities; 2000; Paciello, Michael G; CMP Books, Lawrence, Kansas – Pages 6, 11 ff [40] http://www.hesa.ac.uk/holisdocs/pubinfo/stud.htm [41] http://www.rnib.org.uk/wesupply/fctsheet/authuk.htm [42] http://www.rnid.org.uk/html/info_factsheets_general_statistics_on_deafness.htm
  • 127.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 126 [43] RNIB Factsheet on Deafness and Tinnitus; http://www.rnid.org.uk/html/factsheets/general_statistics_on_deafness.htm [44] RNIB Factsheet on Deafness and Tinnitus; http://www.rnid.org.uk/html/factsheets/general_statistics_on_deafness.htm [45] Available from http://ncam.wgbh.org/Webaccess/magpie/ [46] http://www.umds.ac.uk/physiology/daveb/brainday/stats.htm [47] Available from http://www.scansoft.com/naturallyspeaking/ [48] http://www.umds.ac.uk/physiology/daveb/brainday/stats.htm [49] Available from http://www.plainenglish.co.uk/plainenglishguide.html [50] ‘Self-planned learning and major personal change’; 1976; Tough, Allen, Published in ‘Adult Learning: Issues and Innovations’; ERIC Clearing House in Career Education, Northern Illinois University, pp 58-73 [51] http://tip.psychology.org/theories.html [52] ‘Evaluating the Value and Effectiveness of Internet-Based Learning’; Quintana, Yuri; University of Western Ontario, Canada; http://www.isoc.org/inet96/proceedings/c1/c1_4.htm [53] ‘Integrating Open Learning and Distance Education’; Maxwell, Leigh; Educational Technology; November- December 1995, pp. 43-48 [54] ‘The Concept of Open Learning in South Africa’; Butcher, N; Open Learning and Educational Technology; Vol. 25, pp. 197-204. [55] ‘Situated Learning: Legitimate Peripheral Participation’; 1990; Lave, J., Wenger, E; Cambridge University Press. [56] http://tip.psychology.org/bruner.html [57] ‘Matters of Style’; Felder, Richard M.; ASEE Prism, 6(4), 18-23 (December 1996) [58] http://www.google.com/search?sourceid=navclient&q=%22Web+Accessibility%22 [59] ‘Web Accessibility for People with Disabilities’; 2000; Paciello, Michael G.; CMP Books [60] ‘Constructing Accessible Web Sites’; 2002; Thatcher et al; Glasshaus [61] ‘Maximum Accessibility – Making Your Web Site More Usable for Everyone’; 2003; Slatin, John M., Rush, Sharron; Addison-Wesley [62] http://www.w3.org/WAI/wcag-curric/ [63] http://www.w3.org/WAI/wcag-curric/th.htm [64] http://www.jimthatcher.com/Webcourse1.htm [65] http://www.techdis.ac.uk/seven/precepts.html [66] http://www.macromedia.com/software/dreamweaver/productinfo/sysreq/ [67] Software Engineering. IEEE Transactions on Computers; Vol. 25, No. 12; Boehm BW; 1976 [68] http://sern.ucalgary.ca/courses/seng/693/W98/pand/reuse_lv.html [69] Why is DSDM different? http://www.dsdm.org/en/about/overview.asp [70] IEEE Std 610.12 [71] ‘Web Project Management: Delivering Successful Commercial Web Sites’; 2001; Freidlein, Ashley; Morgan Kaufman Publishers; Page 193 [72] Available from http://www.notepad.org/ [73] Available from http://www.barebones.com/products/bbedit/index.shtml [74] Available from http://www.macromedia.com/software/dreamweaver/ [75] Available from http://www.microsoft.com/frontpage/ [76] Available from http://www.adobe.com/products/golive/main.html [77] Macromedia - http://www.macromedia.com/software/dreamweaver/productinfo/matrix/; Adobe - http://www.adobe.com/products/golive/topways.html; Microsoft - http://www.microsoft.com/frontpage/evaluation/casestudies/default.htm [78] Available from http://www.bradsoft.com/topstyle/ [79] news://forums.macromedia.com/macromedia.dreamweaver or http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&group=macromedia.dreamweaver [80] http://www.w3.org/Consortium [81] Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10/#Guidelines [82] Web Content Accessibility Guidelines 1.0: Section 4; http://www.w3.org/TR/WCAG10/ [83] Web Content Accessibility Guidelines 1.0: section 5; http://www.w3.org/TR/WCAG10/ [84] ‘Who looks at our Web sites?’ Professor Mike Holmes, Department of Physics, Astronomy and Mathematics, UCLAN, September 2001
  • 128.
    Mick Wood (110367407) CO4804Project: Creating Accessible Web Sites 127 [85] Guidelines adapted from the article “Colour Contrast and Partial Sight” by Aries Arditi, Ph.D. http://www.lighthouse.org/color_contrast.htm [86] Ameritech Web Page User Interface Standards and Design Guidelines ; 1996; Detweiler, M.C.; Omanson, R.C.; http://www.ameritech.com [87] Top Ten Mistakes in Web Design; 1996; Neilsen, J; http://www.useit.com/alertbox/9605.html [88] Usability of Several Health Information Web Sites; 2000; Bailey, R.W.; Koyani, S; Nall, J; The National Cancer Institute Technical Report, September 7-8 [89] Readability of Fonts in the Windows Environment; 1995; Tullis, T.S.; Boynton, J.L.; Hersh, H.; Proceedings of CHI’95, 127-128 [90] A Study of Fonts Designed for Screen Display; 1998; Boyarski, D, et al; CHI’98 Conference Proceedings, 87- 94 [91] Web Style Guide; Basic Design Principles for Creating Web Sites; 1999; Lynch, P.J.; Horton, S.; Yale University Press [92] Top Ten Mistakes in Web Design; 1996; Neilsen, J; http://www.useit.com/alertbox/9605.html [93] http://www.w3.org/WAI/wcag-curric/sam82-0.htm [94] http://www.plainenglish.co.uk/translations.html [95] http://www.w3.org/WAI/wcag-curric/sam40-0.htm [96] A complete list of country codes can be found at http://www.oasis-open.org/cover/iso639a.html [97] http://www.theusabilitycompany.com/usability/definition.html [98] ‘Homepage Usability – 50 Websites Deconstructed’; 2002; Neilsen, J.; Tahir, M.; New Riders Publishing [99] http://www.cnet.com [100] See http://www.section508.gov/ for further information on American Section 508 regulations. [101] http://www.dmag.org.uk/resources/why/betterdesign.asp [102] http://www.w3c.org/WAI/ [103] Source: Backup Brain http://www.backupbrain.com/2002_11_17_archive.html