An Introduction To Accessible Web Design

Share this article

Accessibility in Web design addresses the issue of creating Websites that are accessible to all users, regardless of physical ability or the way in which they use the Internet.

In this article we’ll discuss the concepts surrounding accessible Web Design, the current initiatives to increase the accessibility of Websites, and the guidelines that you can use to make your site more accessible.

Why Accessibility Is Important

Why aren’t all Websites accessible? You may be asking yourself why the issue of ‘accessibility’ even exists, and why all Websites aren’t already accessible to all users. There are a number of reasons that explain the need for accessible design. Some involve disabilities that users may have, while others simply stem from the way different people choose to access and use the Internet.

Visually Disabled Users

Visually disabled users range from the colour blind, to the fully blind. These users can have problems understanding images that are not accompanied by a text description of what they show. Without a text description a user who can’t see an image has no way of knowing what it is, or what it represents. Colour blind users may also have trouble discerning design elements (including text) whose colors are not sufficiently different from the elements around them (including the background or page colour).

Visually impaired users may also have problems understanding sites that are not built to accommodate “viewing” through a non-visual browser such as a screen reader. A screen reader is a Web browser that reads Websites out loud, thereby making them accessible to visually disabled users. Often a Website that looks nice visually can be a complete mess when it is listened to through a screen reader.

Hearing Disabilities

Similarly to the issues facing the visually impaired, are those that face Web users with hearing problems. Users with hearing disabilities have no way of understanding information that is communicated with sound. The simple solution is to provide an alternative that does not use sound, such as a text description or an image.

Physical Disabilities

If you are not physically disabled, it’s hard to imagine how your online experience may be affected if you were. For instance, have you ever tried to use a Website without your mouse? Unless you were lucky with the site you visited, you probably found it very difficult. Physically disabled users are often incapable of using a mouse. Unless these users’ needs are taken into account when you create Website navigation and input methods, physically disabled users may well find your site completely inaccessible.

Cognitive and Neurological Disabilities

Websites can be complex, and finding the information we want can be difficult for the most able of us. The situation is not helped by sites that use an overly complex design, inconsistent navigation, and distracting, repetitive animation. These design elements can compound problems for users with Cognitive and Neurological Disabilities, and can make some sites completely inaccessible for them.

Beyond Disabilities

As we have seen, using the Internet if you have a disability can be a difficult task. By observing and understanding the guidelines for accessible Web design, you can produce a site that serves its purpose and is accessible to all users, not just those without disabilities.

But it doesn’t stop there. Accessible Web design has advantages for other users, too. These groups will benefit if you follow the guidelines to make your site accessible:

  • Users of mobile phones, Web-TV and kiosks
  • Low bandwidth users
  • Users in a noisy environment
  • Users with “screen glare”
  • Users who are driving
  • Users with a low literacy level
  • Second-language access
  • Users with different learning styles

Dealing with accessibility issues also improves:

  • Page transmission and site maintenance
  • Machine indexing of content
  • Searching of content

The Marketplace

There’s another reason to make your site accessible (if you need any more!). According to current figures, disabled users currently make up around 10% to 20% of the population in most countries. Increase that figure to represent the portion of your users who fall into the categories listed above, and you’re looking at up to 30% of the market for your Website. If making your site accessible to 30% of the market doesn’t persuade you that accessible Web Design is worthwhile, then you might as well stop reading now.

The average age of the population in many countries is also increasing. Aging results in a number of accessibility issues, including vision and hearing changes and declines in dexterity and memory. If your market includes a significant number of elderly visitors, then you can increase that 30% to a much larger percentage of users who will reap the benefits of accessible Web Design.

Legal Requirements

For certain Websites, addressing accessibility can be a legal requirement. This is usually the case for government sites, but can also affect others. For more information on the requirements in different countries see the W3C page Policies Relating to Web Accessibility.

Accessibility Initiatives

A number of groups around the world are working to increase the awareness of accessibility issues, and provide help to the authors of accessible Websites. These include the World Wide Web Consortium (W3C), the US Government and CAST/Watchfire. Let’s take a look at what each of these groups has done in more detail.

Web Accessibility Initiative

Since 1999 the World Wide Web Consortium (W3C) (the organisation that creates the standards for the Web) has been working on its “Web Accessibility Initiative” or WAI. The official mission of this initiative is:

The World Wide Web Consortium’s (W3C) commitment to lead the Web to its full potential includes promoting a high degree of usability for people with disabilities. WAI, in coordination with organizations around the world, pursues accessibility of the Web through five primary areas of work: technology, guidelines, tools, education and outreach, and research and development.

The result of this initiative so far has been three sets of guidelines:

The Web Content Guidelines are designed to show Website authors how to make their sites accessible. The Authoring Tool guidelines are for people who write programs that can be used to create Websites. The User Agent guidelines are aimed at those who create Web browsers. Let’s look in more depth at the Content Accessibility guidelines.

Web Content Accessibility Guidelines 1.0

The Web Content Accessibility Guidelines or WCAG became a W3C recommendation on the 5th of May 1999 (becoming a W3C recommendation is an extremely tough and long process).

The purpose of the guidelines is to explain the accessible use of Web technologies for those who create Websites. This is achieved through 14 guidelines, with a total of 60 checkpoints that must be followed to ensure a site is accessible.

To accommodate the varying levels of effort people are willing to put in to making their sites accessible, the checkpoints are broken down into 3 different priority levels. The specification lays out the three priority levels as follows:

[Priority 1]

A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.

[Priority 2]

A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.

[Priority 3]

A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

For those who take the time to produce pages that conform to any of the above priority levels there is a matching set of conformance levels:

  • Level ‘A’ — All Priority 1 checkpoints are satisfied.
  • Level ‘Double-A’ — All Priority 1 and 2 checkpoints are satisfied.
  • Level ‘Triple-A’ — All Priority 1, 2, and 3 checkpoints are satisfied.

Pages, sites, or portions of sites that conform to one of the three levels may then display a logo, linked to the appropriate W3C explanation of the claim:

952_wcagA – Level ‘A’

952_wcagAA – Level ‘Double-A’

952_wcagAAA – Level ‘Triple-A’

For full details of the conformance logos see the W3C WCAG Conformance Logos.

Alternatively, conformance can be specified through a text explanation such as:

This page conforms to W3C’s “Web Content Accessibility Guidelines 1.0”, available at https://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505, level Double-A.

The text must specify:

  1. The guideline’s title: “Web Content Accessibility Guidelines 1.0”
  2. The guideline’s URI: https://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505
  3. The conformance level satisfied: “A”, “Double-A”, or “Triple-A”.
  4. The scope covered by the claim (e.g., page, site, or defined portion of the site).

The Web Content Accessibility Guidelines were developed by the Web Content Accessibility Guidelines Working Group (WCAG WG). The following W3C pages will be useful if you would like to produce pages that conform to WCAG 1.0:

The US Government – Section 508

The US Government has endorsed the W3C Web Content Accessibility Guidelines by requiring that all federal Websites and sites that are under a federal contract must comply with the guidelines. More information can be obtained from Section 508.

Bobby

While it is possible to read the Web Content Accessibility Guidelines and build your site to comply, wouldn’t it be easier if there were a tool to test it for you? You’ve guessed it, there is: a product called Bobby was produced by a non-profit organisation called CAST in order to test sites to ensure they complied with the guidelines. It is also aware of the conformance levels, and will tell you which level your site is at (if any).

In December 2001 Bobby also began supporting Section 508, which makes it the most complete accessibility tester available. In July 2002 Bobby was purchased by a company called Watchfire, who now look after the product.

Bobby has its own set of logos that work in much the same way as do the W3C logos:

952_bobbyA – Level ‘A’

952_bobbyAA – Level ‘Double-A’

952_bobbyAAA – Level ‘Triple-A’

952_bobby508 – For Section 508 compliance approved by Bobby

You can use Bobby in two ways. If you only want to test a few pages here and there it is available as a free on-line tool at http://bobby.watchfire.com/ and works in much the same way as the W3C HTML validator (if you’ve used it). You enter the URL of the document you want to check and receive a report that details where you comply and where you don’t. Because of the nature of the accessibility guidelines, it’s not possible to check everything through a program, so you will still have to check some things yourself — Bobby tells you what to check.

If you want to check many pages, the on-line tool has its limitations (you can only do a small number of checks per hour). In this case, you’d probably be best to purchase the downloadable version, so you can check as many pages as you like. At the time of this writing (November 2002) the price is just US$99.

A nice feature of Bobby is that for every guideline, advice is readily available on how to make your document comply, and why it’s important for accessibility.

Over to You

For more information, these urls will give you a good start. Have fun making your sites accessible!

Further Information

Frequently Asked Questions on Accessible Web Design

What is the importance of accessible web design?

Accessible web design is crucial because it ensures that all users, including those with disabilities, can access, understand, navigate, and interact with the web. It eliminates barriers that can prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed, and edited, all users have equal access to information and functionality.

How can I make my website more accessible?

There are several ways to make your website more accessible. This includes using alt text for images, ensuring your site is keyboard-friendly, using headers to structure your content correctly, choosing colors with care, designing forms for accessibility, using tables correctly, enabling resizable text without breaking your site, and avoiding automatic media and navigation.

What are the principles of accessible web design?

The principles of accessible web design are perceivability, operability, understandability, and robustness. Perceivability means that users must be able to perceive the information being presented. Operability means that users must be able to operate the interface. Understandability means that users must be able to understand the information and the operation of the user interface. Robustness means that users must be able to access the content as technologies advance.

What is the role of ARIA in accessible web design?

ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. It supplements HTML and helps to make complex web content and applications accessible.

How does accessible web design benefit businesses?

Accessible web design benefits businesses in several ways. It improves SEO efforts, increases audience reach, enhances brand reputation, reduces legal risks, and improves overall website usability.

What is the difference between accessible and inclusive web design?

Accessible web design focuses on making websites usable for people with disabilities. Inclusive web design, on the other hand, considers the full range of human diversity with respect to ability, language, culture, gender, age, and other forms of human difference.

How can I test my website for accessibility?

There are several tools available to test website accessibility. These include automated tools like WAVE, manual testing methods like navigating your site using only a keyboard, and user testing with individuals with disabilities.

What are some common accessibility issues on websites?

Some common accessibility issues on websites include lack of alt text for images, poor color contrast, lack of keyboard accessibility, missing document language, empty links, and missing form input labels.

What is WCAG and how does it relate to accessible web design?

WCAG (Web Content Accessibility Guidelines) is a set of guidelines that specify how to make web content more accessible to people with disabilities. It provides a wide range of recommendations for making web content more accessible and is a key resource for implementing accessible web design.

How does responsive design contribute to web accessibility?

Responsive design contributes to web accessibility by ensuring that websites function well on a variety of devices and window or screen sizes. This helps users with disabilities who may use different devices or technologies to access the web.

Nigel PeckNigel Peck
View Author

Nigel is an experienced senior web developer with over twenty years experience. He is the website manager for Swift Plant Spares, a JCB parts supplier based in the UK. He can be found on LinkedIn.

PDFLib
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week