Formatting for Accessibility

Here you can learn about the basic tags used in formatting for accessible websites.

Add Headings for Hierarchy of Importance
Use Paragraphs for Manageable Portions of
Text
Create Emphasis and Strong Points
Show Pictures to Add Interest and Information
Provide Links to Other Pages
Make Lists to Simplify Information

Add Headings for Hierarchy of Importance

If you have used Microsoft Word or AppleWorks, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

<h2>An important heading</h2>

and here is a slightly less important heading:

<h3>A slightly less important heading</h3>

These headings will signal users (visually or through assistive technology) the degrees of importance of the material you are presenting.

Use Paragraphs for Manageable Portions of Text

Each paragraph you write should start with a <p> tag and end with a </p> tag, For example:

<p>
This is the first paragraph.
</p>
<p>
This is the second paragraph.
</p>

This <p> tag divides your content into manageable portions both visually and for assistive technology.

Create Emphasis and Strong Points

You can emphasize one or more words with the <em> tag, for instance:

This is a really <em> interesting </em> topic!

Or you can make your emphasis even stronger using the <strong> tag, as in:

We have an <strong> important idea </strong> here.

These tags are more easily read by assistive technology than the <b> (bold) and <i> (italic) tags, while allowing sighted readers to visually understand the important points you are making.

Show Pictures to Add Interest and Information

Images, animations and multimedia can be used to make your Web pages distinctive and provide important information to your reader. The simple way to add an image is using the <img / > tag. Let’s assume you have loaded an image file called "stone.jpeg" in the same folder/directory as your HTML file. Here is the basic coding to add images:

Something is missing! People who can’t see the image need a description they can read in its absence. To make your page accessible, you must add a picture description as follows:

The alt attribute is used to give the short text description, in this case "a flint fist hatchet of the early stone age." A good test to determine if this short description is adequate, is to imagine reading the document aloud over the telephone. Does it give the listener enough information?

In addition to the alt attribute, one way to briefly describe images important to the meaning of your content is to provide a more elaborate description in the text in an appropriate place near the image. Again, be sure the reader can decipher the important parts of the picture without being able to actually see them. (A good test is to read this description out loud to someone who cannot see the the picture.) This will also help sighted readers to comprehend the important aspects of the image.

For more complex images, pictures, charts and graphs that are important to the meaning of your content, also give a longer text description linking to another page with the description in text. Assuming this text description has been written in the file "stone_txt.htm," you can direct your user to that page by adding a link at the bottom of the image that says "text description":

<img src="stone.jpeg" alt="a flint fist hatchet of the early stone age" / >
<br / >
<a href="stone_txt.html" title="link to text description of flint fist hatchet">Text Description</a>

On the same page as your image, place a link to that text description. On the page with the text description, provide a link back to the original page with the image. To learn more about this important feature of web accessibility, go to the text description pages which explain this technique.

You may have noticed that the <img /> tag does not have an opening and closing tag. Because it does not surround text, it works slightly different. You can think of it as including the opening and closing in one. Notice that we added another tag in this section. The <br /> tag is a break tag and puts a space between to items on your page. It works
the same way as the image tag. There is no closing tag, but it is necessary to but the slash after the "br quot; within the brackets.

Creating images

You can create images in a number of ways. For instance, you can use a digital camera, scan an image in, or create one with a painting or drawing program. Even PowerPoint presentations can be saved as images for use in Web pages.

To avoid long delays while the image is downloaded over the Internet, you should avoid using large image files. 100K is a large file. The smaller the image file size the better.

Most browsers understand .gif, .jpg and .png formats.

Generally speaking, .jpg is best for photographs and other images with smooth gradation of color, while .gif and .png are good for graphic arts involving flat areas of color, lines and text.

Multimedia

Provide captioning and transcripts of audio and descriptions of video. If special plug-ins are necessary, provide alternative content in case the features are inaccessible or unsupported.

Provide Links to Other Pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

It is important to use a link "caption" (the text, usually underlined, that appears as the active link) that makes sense when read out of context to improve accessibility for students who are using audio output. Hyperlinks are often accessed using the Tab key to move from link to link. For this reason, link text should be meaningful enough to make sense when read out of context. At the same time, links should be concise rather than wordy, to increase efficiency. Instead of: "Click Here to go to the list of prehistoric tools." Use "Prehistoric Tools List" as the caption.

Links are defined with the <a> tag. Let’s define a link to the page called "stone.htm", assuming it is loaded in the directory with the rest of your pages. The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

See <a href="stone.htm" title="link to a page about Tools of the Stone Age">Tools of the Stone Age</a> for more about prehistoric tools.

To clearly define the link’s destination and make the link universally accessible, add the title attribute to the <a> tag. In this case, title="link to a page about Tools of the Stone Age" explains even more
about the link to a reader using assistive technology. Also, please avoid using "Click Here" as the caption for the link. Instead, use the name of the Web page, or the Web address (commonly called a URL), to assure your link’s destination is clearly labeled.

To link to a page on another Web site, give the full URL. For instance to link to www.w3.org, write:

This is a link to <a href="http://www.w3.org/" title="link to the World Wide Web Consortium page">W3C</a>.

You can turn an image into a hypertext link. For example, the following allows you to click on a department logo to get to the home page:

Make Lists to Simplify Information

HTML supports three kinds of lists, which are all universally accessible when coded properly.

Bulleted List

The first kind is a bulleted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:

<ul>
     <li>the first list item</li>
     <li>the second list item</li>
     <li>the third list item</li>
</ul>

This creates a bulleted list like this:

the first list item
the second list item
the third list item

Numbered List

The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:

<ol>
     <li>the first list item</li>
     <li>the second list item</li>
     <li>the third list item</li>
</ol>

This creates a numbered list like this:

the first list item
the second list item
the third list item

Definition List

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition
starts with a <dd>. For instance:

<dl>
<dt>the first term</dt>
<dd>its definition</dd>

<dt>the second term</dt>
<dd>its definition</dd>

<dt>the third term</dt>
<dd>its definition</dd>
</dl>

This creates a definition list like this:

the first term: its definition
the second term: its definition
the third term: its definition

<< Return to Making an Accessible Web Page | Learn Advanced Techniques>>

Updated 8.1.2008

University of Arkansas at Little Rock

Project PACE

Information About: