skip to main content

NCDAE: The National Center on Disability and Access to Education

Increasing universal access by
developing educational resources

NCDAE Tips and Tools: Principles of Accessible Design

Created: March 2007

Table of Contents

Introduction

Below you will find some key principles of accessible design. Most accessibility principles can be implemented very easily and will not impact the overall "look and feel" of your web site. This is not a comprehensive guide to all accessibility issues, but by addressing these basic principles, you will ensure greater accessibility of your web content to everyone.

Although the following principles can be applied to several electronic formats (including Adobe PDF, Microsoft Word and PowerPoint files, OpenOffice.org OpenDocument files and others), this introduction will give more attention to principles in HTML. There are a few reasons for this:

Principles

Provide appropriate alternative text

In a nutshell

Every non-text element needs a text alternative (alt text) that describes its content and function.

People who benefit

Details

Alternative text is a textual alternative to non-text content, usually images in web pages. It is probably the most commonly known principle of web accessibility, but it can be very difficult to create appropriate alt text. The following guidelines should help:

Consider the following image:

NCDAE: National Center on Disability and Access to Education

Correct alt text would be "National Center on Disability and Access to Education," although it may be different, depending on context. The code for this image is:
<img src="/img/template/logo_print.png" alt="NCDAE: National Center on Disability and Access to Education" height="97" />

You can also create alt text in almost every type of electronic document (DOC, PPT, PDF and others).

Make sure that content is well structured and clearly written

In a nutshell

There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.

People who benefit

Details

There is probably more written about writing on the web than the other nine principles in this resource combined. Here are a few basic principles:

Help users navigate to relevant content

In a nutshell

There are three main ways you can help users navigate to relevant content:

People who benefit

Details

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Content," "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page. In order for this to be effective, it must be the first link on the page and it should be visible, so that people who are using a keyboard, but not a screen reader, can use the link as well. For example, the first link in this page reads "Skip to Main Content." The source code is: <a href="#content" title="Skip to main content">Skip to main content</a> This text links to the beginning of the unique content in the page. In that way, the first option that a screen reader or keyboard user encounters allows him or her to skip all of the navigation.

Screen reader users can also navigate through a document using true headings. True headings, properly used, can make a page much more accessible for everyone. They divide content into meaningful chunks, reducing cognitive load. They also make a page much more scannable. True headings can be created in HTML and in several other formats, like MS Word and PDF.

In addition to headings, a table of contents makes it much easier to navigate through a long page. Although it may not always be necessary, it can be very helpful, especially when navigating a longer web page or electronic document. Every heading in a table of contents should link to the corresponding heading in the document. That way, all users can navigate to the appropriate section more quickly. This document contains an example of an appropriate table of contents.

Provide headers for data tables

In a nutshell

Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

People who benefit

Details

Tables are used in two ways: for layout and to organize data. Up until a few years ago, basically all web sites used tables for layout, that is, content was placed inside tables and cells, which were resized to position content in a specific place on the page. As web browsers and web design knowledge have improved, layout tables have become less necessary. Instead of tables, you can use Cascading Style Sheets (CSS) to organize content on the web. With other electronic content (e.g. Word documents), you can use columns, text alignment, styles and other techniques in place of tables. Using tables for layout usually does not have a significant impact on the accessibility or inaccessibility of a site or document, but they can usually be avoided. If you are using layout tables, make sure that the visual order of your content and the true reading order (in the HTML) is the same.

In true tables, or data tables, content is organized in a grid. Every data table needs one or more rows or columns of headers. In HTML, these table headers should be set apart as headers by using the <th> tag. For example, a simple data table would look like this:

Shelly's Daughters
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

And here's the markup:

<table border="1">
<caption>Shelly's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

There are 5 important tags in this table:

  1. <table>: The whole table goes inside this tag.
  2. <caption>: This is basically like a title for the table. It will go at that top of the table, like the words "Shelly's Daughters" in the previous example. A caption is optional.
  3. <tr>: A table is organized into rows, e.g. the cells "Jakie," "5" and "April 5" are all in the same <tr> tag.
  4. <th>: This is the tag you use for a table header. You may notice that the every th tag in this table contains a scope attribute, either scope="col" or scope = "row". This is how you designate if these are row headers or column headers.
  5. <td>: The content for each non header table cell should be inside a <td> tag.

There are other important tags such as <thead>, <tbody>, <tfoot>, and <caption>, but these are not as critical as the tags described above.

For tables with more than one row or column of headers, you have to use <th id="a unique id"> for every header and <td headers="corresponding header id's">. For example, in the following table,

Shelly's Daughters
  Name Age Birthday
by birth Jackie 5 April 5
Beth 8 January 14
by marriage Jenny 12 Feb 12

the code for the "Age" header would be <th id="age">Age</th> and the code for the data cell "5" would be <td headers="birth jackie age">5</td>

It is also possible, although more difficult, to create headers for tables in PDF files, Microsoft Word documents and other formats. Read more about this in our fact sheets.

Ensure users can complete and submit all forms

In a nutshell

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> tag. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

People who benefit

Details

Forms need to be organized logically and every form element needs a label. There are two main requirements for accessible labels:

  1. Put labels adjacent to or near their controls, so the labels are associated visually.
  2. Use HTML markup to associate the controls explicitly with their labels. You can accomplish this with the <label> tag.

For example, the following element has an implicit label (the word Name: close to the field) and an explicit label (the <label> tag that ties the label and field together).

You can't see the explicit label unless you look at the markup. Here's the HTML markup:

<label for="name1">Name:</label>
<input type="text" id="name1" name="textarea" />

You will see that the <label> tag (around "Name:") contains for="name1" and that the <input> tag contains id="name1". These two elements are tied together because the for and id tags both share the word "name." The word that they share could be any string of characters (no spaces), but it has to be the same in the label and input tags, and it can only be used once in the page. So if you had a "First Name" field and a "Last Name" field, they couldn't both have the id "name." One could be "fname" and the other "lname," or any other unique word. The key is that the two tags are tied together using <label for=""> and <input id="">.

Creating accessible forms can be very technical and complex, but there are other general principles to keep in mind:

Form labels can be added to other documents such as Doc and PDF with varying degrees of success.

Ensure links make sense out of context

In a nutshell

Every link should make sense if the link text is read by itself. Certain phrases like "click here" and "more" must be avoided.

People who benefit

Details

Screen reader users may choose to navigate through a page by having a list of links read to them. This will only be valuable if the links make sense out of context. The following link text should be avoided

Caption and/or provide transcripts for media

In a nutshell

Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.

People who benefit

Details

Captions are synchronized text equivalents of the spoken word and other audio content. They allow the audio content of web multimedia to be accessible to those who do not have access to audio, primarily the Deaf and hard-of-hearing. Captioning can be expensive, and a little daunting at first, but it is also a very important part of making content accessible.

Common web accessibility guidelines indicate that captions should be:

There are five main steps to captioning a file for the web.

  1. Create or obtain a transcript
  2. Segment into individual caption displays and add speaker names
  3. Synchronize the text transcript with the media
  4. Create appropriate caption files (QTtext, RealText, SAMI)
  5. Combine with media and distribute the captioned media

More information is available in the captioning fact sheet.

Do not rely on color alone to convey meaning

In a nutshell

The use of color can enhance comprehension, but do not use color alone to convey information. Make sure that color contrast is strong.

People who benefit

Details

There are two ways that color can be misused on the web. First, certain color combinations, most commonly red and green, can be difficult to distinguish for a user who is colorblind. These color combinations should be avoided when possible. Vischeck is a site that will simulate what an image or site looks like to people with different forms of color blindness.

Second, the contrast between two colors should be strong. This is important for all users, but is especially important for users with low vision. There are several tools available online that allow you to test the contrast between two colors to ensure that it is sufficient. One of the most popular tools is the Juicy Studio Colour Contrast Analyser.

Design to standards

In a nutshell

HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.

People who benefit

Details

A page that has clean HTML is more likely to be accessible. There are a couple of reasons for this.

  1. Some accessibility requirements, such as alt text for images, are also HTML requirements.
  2. If you are paying attention to your code, you are more likely to be aware of accessibility problems.

In additional to HTML standards, there are also accessibility standards, such as Section 508 of the US Rehabilitation Act, and guidelines, such as the Web Content Accessibility Guidelines 1.0. Following these standards and guidelines will almost always make your site more accessible.

The easiest way to check the validity of code is to use a validator, such as the W3C HTML validator and CSS validator. There are also tools to help you check how well your site adheres to accessibility guidelines or standards, such as Cynthia Says and WAVE.

Ensure accessibility of non-HTML content

In a nutshell

Non-HTML content (e.g. PDF, Microsoft Word and PowerPoint files, Adobe Flash) should be accessible, or an accessible alternative should be provided.

People who benefit

Details

There are many non-HTML documents on the web and on our computers. Almost all of the principles in this resource can be applied when creating non-HTML documents. For example, you can add alt text, headings, table headers, and styles to Word Documents. You can also add a series of tags to PDF files that make them accessible to screen reader users. While most electronic document formats can be made reasonably accessible, the process differs for each format and tool. NCDAE has created fact sheets for some of the most popular tools including Adobe Acrobat, Microsoft Word and PowerPoint, and OpenOffice.org Writer and Impress.

Many times, a document is written in a certain format for a certain reason, but sometimes the best way to increase the accessibility of a document is to convert it to HTML. HTML content can usually be made more accessible than any other format, and it can usually be made accessible with less effort.

Other Resources