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.
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.
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.
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.
When changing text size, the recommended method is to use relative sizes, and not specific sizes.
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.
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.
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:
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!
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.
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" />
In this example, the image and the text that immediately follows it impart the same information, that is, they both link to 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>
<img src="images/lettera.jpg" alt="" ... /> <a href="#link-to-sectiona">Section A</a>
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." />
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" />
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.
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.
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." />
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:
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.)
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 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:
Here is an example of a simple data table, with both column and row headers.
|Invested in Capital Assets, Net of Related Debt||53,815||55,473||56,438||58,208|
|Total Governmental Activities Net Assets||81,678||90,162||98,350||100,671|
Optional return to Governmental Activities Net Assets bar chart.
<th scope="row" class="row-header-1">Restricted</th>
<caption> Net Assets for ... 2008. Amounts in millions of dollars. </caption>
<table ... summary="Net Assets. Simple column and row headers used.">
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:
Here is an example of a complex, with multiple column headers for each data cell.
|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.|
<td headers="ph wk1">512-123-4567</td>
<th scope="row" ...>Joe Worker</th>
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.
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.
If you include form fields on your page, you must do the following.
Here are some examples of form labels.
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>