Basic Web Accessibility Tutorial: Examples

Version 1.0, October 14, 2009

This is part 3 of the DARS Basic Web Accessibility Tutorial. Here, you will find HTML coding examples illustrating Web accessibility issues and how to make them accessible.

Contents

Default contrast

There are tools that can tell you if the default of the text on your page is sufficient, but you may be able to do a quick visual inspection to get a good idea if the contrast is okay. To be certain, you can use the Web Accessibility Tools Consortium's Contrast Analyser to test the contrast of your Web content.

Examples of good contrast

The following examples have sufficient contrast.

Example of good contrast with black text on white background.

Example of good contrast with yellow text on black background.

Example of good contrast with white text on dark blue background.

Examples of bad contrast

The following examples show insufficient contrast. Watch for text that is similar in color to the background, such as yellow on white, or the same basic color as the background, such as light blue on dark blue. Very often, the contrast will be insufficient in those cases. Also, watch for red and green combinations, since difficulty distinguishing between red and green is the most common form of color blindness.

Example of bad contrast with yellow text on an orange background.

Example of bad contrast with light blue text on dark blue background.

Example of bad contrast with red text on a green background.

Text size

When changing text size, the recommended method is to use relative sizes, and not specific sizes.

Non-recommended font size techniques

These examples show specific point and pixel sizes used for fonts. If you use the browser's view option to expand the text, these will not expand, but will remain the same size. (This might depend on the specific browser being used.)

Example of using specific point size of 10pt (points) for text.

Example of using specific point size of 20pt (points) for text.

Example of using specific point size of 10px (pixels) for text.

Example of using specific point size of 20pt (pixels) for text.

Recommended font size techniques

You should use relative font sizes, such as "ems" or percentages, or use the "larger" or "smaller" options, as shown in these examples:

Example of 2em font size.

Here is the markup for the above 2em text:

<p style="font-size: 2em">Example of 2em font size.</p>

Here are some more examples using ems:

Example of font size 0.5em. Example of 1em. Example of 1.5 em.

Example of 200% font size.

Here is the markup for the above 200% text:

<p style="font-size: 200%">Example of 200% font size.</p>

Here are some more examples using %:

Example of font size 50%. Example of 100%. Example of 150%.

Example of larger font size.

Here is the markup used for the above larger text:

<p style="font-size: larger">Example of larger font size.</p>

Here are some more examples using relative sizes (smaller, medium, and x-large):

Example of font size smaller. Example of medium. Example of x-large.

Headings

When creating section headers, be sure to use the HTML heading tags. Do not use text styling attributes to make text look like a heading without actually using the heading tags. For example:

This text is an h3 heading.

Here is the markup for the above h3 heading.

<h3>This text is an h3 heading.</h3>

This text uses text styling to simulate an h3 heading.

Here is the markup for the above fake h3 heading. Do not do this!

<span style=" font-size: large; font-weight:bold">This text uses text styling to simulate an h3 heading.</span>

Remember the general rule: If it looks like a heading, it must be marked up as a heading!

Images

All images must provide an alt attribute. If the image is purely decorative or redundant, then alt should be set to null. For images that provide meaningful information, the alt attribute should contain a short description of the image. Examples can be seen in the following sections.

Decorative image

Here is the code used for the decorative image to the left of the "Decorative image" heading above:

<img src="images/decorative-1.jpg" alt="" width="174" height="83" />

Decorative image notes:

Redundant image

In this example, the image and the text that immediately follows it impart the same information, that is, they both link to Section A.

Section A

Here is a portion of the code used for the above redundant image link.

<a href="#link-to-sectiona"><img src="images/lettera.jpg" alt="" ... />Section A</a>

Redundant image notes

Meaningful or non-decorative image

Kittens playing with ball of yarn.

Here is the code used for the above non-decorative image.

<img src="images/kitten-yarn.jpg" width="197" height="155" alt="Kittens playing with ball of yarn." />

Meaningful or non-decorative image notes

Logos and images containing text

Logo, Texas Department of Assistive and Rehabilitative Services, DARS

Here is a portion of the code used for the above image tag:

<img src="images/DARSlogosm.gif" ... alt="Logo, Texas Department of Assistive and Rehabilitative Services, DARS" />

Logo notes

Charts and graphs

Often, a chart or graph is so complex that it cannot be easily described in a few words. In this case, the alt text should briefly describe the intent of the image, and tell the reader where a full text equivalent can be found.

Example bar graph image

The alt text for the following image is "Governmental Activities Net Assets for Fiscal Years 2005 to 2008. A link to a full text equivalent is provided in the following page text." Note that the text that follows the image provides a link to the text equivalent, as promised by the alt text.

Bar graph, Governmental Activities Net Assets for Fiscal Years 2005 to 2008. A link to a full text equivalent is provided in the following page text.

The data seen in the above image can be found in tabular format at the following link: Governmental Activities Net Assets data table.

Here is the code used for the above image tag (only the alt attribute is provided, for simplicity):

<img ... alt="Bar graph, Governmental Activities Net Assets for Fiscal Years 2005 to 2008. A link to a full text equivalent is provided in the following page text." />

Bar graph notes

Flashing, Blinking, and Repetitive Movement

Caution: The animated image shown below contains an element that momentarily blinks at a rate faster than recommended. If you are susceptible to photosensitive seizures, please exercise caution when viewing this image. Although this graphic is included here for instructional purposes, this type of graphic should not be used on any Web page.

There are a variety of ways to make Web content blink, flash, or display in an animated, repetitive movement. One common type is an animated gif image. Here is an example of an animated gif that fails this test:

Site under construction, animated gif.

Notes on the animated gif

Use of color

The classic example is the instruction saying: "The required fields are shown in red." If a reader cannot distinguish the color red from other colors, he or she may not be able to tell which fields are required. In this case, you must provide another way to recognize the required field. Usually, this means adding a text character, like an asterisk, to the label for the required field, and changing the instruction to say "The required fields are shown in red and marked with an asterisk, *." A code example illustrating this concept is provided in the forms section on this page.)

Data tables

What is a data table?

A data table is any table where you need to know the contents of one cell in order to understand the meaning of the contents of another cell. Technically, this is true even if there are only two cells in the table, but from a practical standpoint, we will define a data table as:

The cells that provide the definitions are called either column headers or row headers, and are normally found at the top of the column or at the beginning of the row.

Simple data tables

Simple data tables are those that have no more than one header for each column, and no more than one header for each row. The column headers, if present, are at the top of each column, and the row headers, if present, are at the beginning of each row.

Coding rules for simple data tables:

Simple data table example

Here is an example of a simple data table, with both column and row headers.

Net Assets for Governmental Activities for Fiscal Years 2005 through 2008. Amounts in millions of dollars.
GOVERNMENTAL ACTIVITIES 2005 2006 2007 2008
Invested in Capital Assets, Net of Related Debt 53,815 55,473 56,438 58,208
Restricted 24,110 25,993 29,347 31,358
Unrestricted 3,753 8,696 12,565 11,105
Total Governmental Activities Net Assets 81,678 90,162 98,350 100,671

Optional return to Governmental Activities Net Assets bar chart.

Simple data table notes

Complex data tables

Complex data tables are those that have more than one header for each column, or more than one header for each row. There might be multiple subcolumns under a single column header, or multiple row headers to the right of a single row header.

In general, you should avoid using complex data tables, especially those with multiple row headers, as screen reader and browser support is unpredictable. However, if you must use a complex table, use the following rules.

Coding rules for complex data tables:

Complex data table example

Here is an example of a complex, with multiple column headers for each data cell.

Contact information
Name Phone Address
Work Home Office Home
Joe Worker 512-123-4567 512-765-4321 4800 N. Lamar 123 Joe St.
Mary Employee 512-234-5432 512-543-2345 4900 N. Lamar 321 Mary Ln.
Delores Laborer 512-345-6789 512-987-6543 4800 N. Lamar 1 Delores Blvd.
Rafael Trabajador 512-654-7890 512-456-0987 4800 N. Lamar 91 Rafi Rd.

Complex data table notes

Skip links

When the main page content is not the first thing encountered in the upper left corner of the page, you must provide a link at the top of the page to skip to the main content. This is important on pages where there is a banner across the top of the page or a left navigation sidebar on the page.

Here is an example of a simple skip link, used on the DARS external site:

<a href="#StartContent">Skip to Content</a>

Unfortunately, when using Internet Explorer, simple skip links often do not work, so be sure to test your skip links with IE. Read Jim Thatcher’s discussion on skip links for more details.

Linking documents or other non-HTML content

If you link PDF files, Word documents, or other files from your page, you must also provide a link to an accessible viewer for that document.

DARS and other HHSC agencies have standard links on page templates. On the DARS internet, the following link to file viewer information is used:

<a href="/about/viewing.shtml">File Viewer Information</a>

If you link to PDF files, Word documents, or other types of files, you must provide a similar link on your page, for both internal or external pages.

Forms

If you include form fields on your page, you must do the following.

Here are some examples of form labels.

Check boxes and radio buttons

Here are examples of coding labels for a check box and a radio button.

Here is the code used to associate the label with the above checkbox:

<input id="cb1" type="checkbox" name="vehicle" value="Smart" />
<label for="cb1">I drive a Smart car.</label>

Note that the "for" attribute in the label tag matches the "id" attribute in the checkbox input tag.

The code for radio buttons is very similar.

<input id="rb1" type="radio" name="pets" value="dogs" />
<label for="rb1">I like dogs.</label>

Again, the "for" attribute in the label tag matches the "id" attribute in the radio button input tag.

Text input fields

Here is a typical text input field with a label.

Here is the code used to associate the label with the above text input field:

<label for="fname1">First name:</label>
<input id="fname1" type="text" name="fname" />

Once again, the "for" attribute in the label tag matches the "id" attribute in the text field input tag.

Select boxes

Here is a typical select field (combo box) with a label.

Here is the code used to associate the label with the select field (combo box).

<label for="selcar">Select a car:</label>
<select id="selcar" name="cars">
<option value="volvo">Volvo</option>
...
</select>

Enlarging text using browser settings

To change the text size with Internet Explorer, use the Text Size menu in the View pulldown to select the Largest text size option. After selecting the Largest text size option, verify that all of the text associated with the form fields is enlarged, including the field labels and the text entered in the fields.

If the text in a form field does not get larger when setting a larger browser font size, try adding this style to the field: "font-size: 1em;". Here is an example of an entry you might add to your CSS to help text in the input and select tags inherit font size changes properly:

select, input {font-size:1em;}

Applets, multimedia viewers and players

If you include applet or object tags on your site, you must provide alt text for those tags. This is similar to the alt text requirement for image tags.

Here is what an applet tag might look like with alt text included:

<applet code="myApplet.class" alt="This is myApplet Java Applet. Link to equivalent content follows."></applet>

Here is what an object tag might look like with alt text included. Since the object tag does not support the alt attribute, you must add the alternative text to the space between the object tag, <object>, and the end object tag, </object>.

<object classid="objectClass" ...>This is objectClass object. Link to equivalent content follows.</object>

More information

Related DARS tutorials

General Web page coding resources

General Web accessibility information

Web accessibility test tools