Deprecated attribute

(Referring UWEM Test: 11.2_HTML_02)

Test info .
Examples .

Test info

Failure cause

The inspected attribute is deprecated.

You use an attribute deprecated in HTML 4.01. For a full list of HTML 4.01 attributes see: HTML Techniques for WCAG 1.0 - Index of HTML attributes – deprecated elements are marked by an asterisk (*).

Why this may be a barrier

A deprecated attribute is one that has been outdated by newer constructs. Even though they are part of the official standard, the W3C discourages the use of deprecated features.
Deprecated attributes may become obsolete in future versions of HTML.

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page WITHOUT DEPRECATED ATTRIBUTE</title></head>
<body>

<h2 style="text-align: right">This is the header without deprecated attribute</h2>

</body>
</html>

Solution

Replace the deprecated attribute with the appropriate new attribute or methods. For instance use styles for font-formating.

References

Related WCAG 1.0 Checkpoint
11.2
"Avoid deprecated features of W3C technologies." [Priority 2]
WCAG 1.0 Checkpoint 11.2

Referring UWEM Test
11.2_HTML_02
This test is targeted to find deprecated HTML attributes.

Examples

Attributes that define visual formatting are deprecated and should be replaced by style definitions.
Below you find examples of deprecated attributes and how to avoid them, grouped by HTML elements.

The body element
Deprecated attributes of the body element are:
- bgcolor
- background
- text
- link
- alink
- vlink
The easiest way to replace the deprecated style-attributes, is to define document style definitions in the header.

<head>



</head>

<body bgcolor="white" background="images/background.jpg" text="black" link="blue" alink="red" vlink="gray" >

Some content ...

</body>

<head>



<style type="text/css">

body {

background-color: white;

background-image: url(images/background.jpg);

color: black;

}

a:link {

color: blue;

}

a:active {

color: red;

}

a:visited {

color: gray;

}

/* to enhace accessibility also include styles for a:hover and a:focus */

a:hover {

color: navy;

}

a:focus {

color: maroon;

}

</style>

</head>

<body>

Some content ...

</body>

Questions, suggestions, objections? Give us feedback!
The caption, frame, iframe, input, legend, p, div and h1-h6 elements

The align attribute defines the alignment of the text, but is deprecated. Replace it by a text-align style definition.

<body>

<h1 align="left">This heading is aligned left</h1>

<p align="right">The text of this paragraph is aligned right.</p>

<h2 align="center">This heading is centered left</h2>

<p align="justify">The text of this paragraph is justified.</p>

</body>

<body>

<h1 style="text-align:left">This heading is aligned left</h1>

<p style="text-align:right">The text of this paragraph is aligned right.</p>

<h2 style="text-align:center">This heading is centered left</h2>

<p style="text-align:justify">The text of this paragraph is justified.</p>

</body>

Questions, suggestions, objections? Give us feedback!
The img and object elements

Replace the align, border, hspace and vspace attributes by styles.

<body>

<img src="images/myDogSuFrisbee.jpg" width="120" height="160" alt="German Shepard mix playing frisbee" align="left" border="0" hspace="15" vspace="10" />

<img src="images/myDogSuTouchscreen.jpg" width="150" height="200" alt="Dog working on a touch screen computer" align="right" border="1" hspace="15" />

The first image is shown on the left, the second image on the right, and the next image at the end of this text.

<img src="images/myDogSuSleeping.jpg" width="60" height="80" alt="German Shepard mix sleeping" border="1" vspace="10" />

</body>

<body>

<img src="images/myDogSuFrisbee.jpg" width="120" height="160" alt="German Shepard mix playing frisbee" style="float: left; border: 0px; margin: 10px 15px" />

<img src="images/myDogSuTouchscreen.jpg" width="150" height="200" alt="Dog working on a touch screen computer" style="float: right; border: 1px; margin-left: 15px; margin-right: 15px" />

The first image is shown on the left, the second image on the right, and the next image at the end of this text.

<img src="images/myDogSuSleeping.jpg" width="60" height="80" alt="German Shepard mix sleeping" style="border: 1px; margin-top: 10px; margin-bottom: 10px" />

</body>

Questions, suggestions, objections? Give us feedback!
The li element

The type attribute defines the type of the marker of the list element. This attribute should be replaced by an appropriate style definition.
The value attribute sets the basis for counting the current and consecutive elements. As the numbering of listelements should be continuous, this attribute should be deleted.

<body>

<h1>Deprecated attributes for the li element</h1>

<h2>Ordered lists</h2>

<ol>

<li type="1">This list element has a numerical marker (1, 2, 3, etc. - this is the default)</li>

<li type="A">This list element has an alphabetical marker, upper case (A, B, C, etc.)</li>

<li type="a">This list element has an alphabetical marker, lower case (a, b, c, etc.)</li>

<li value="100">From here the list continues with the value 100.</li>
<li type="I">This list element has a roman number marker, upper case (I, II, III, etc.)</li>

<li type="i">This list element has a roman number marker, lower case (i, ii, iii, etc.)</li>

</ol>

<h2>Unordered lists</h2>

<ul>

<li type="disc">This list element is marked with a filled circle</li>

<li type="square">This list element is marked with a square</li>

<li type="circle">This list element is marked with an outlined circle</li>

</ul>

</body>

<body>

<h1>Formatting of list elements with styles</h1>

<h2>Ordered lists</h2>

<ol>

<li style="list-style-type: decimal">This list element has a numerical marker (1, 2, 3, etc. - this is the default)</li>

<li style="list-style-type: upper-alpha">This list element has an alphabetical marker, upper case (A, B, C, etc.)</li>

<li style="list-style-type: lower-alpha">This list element has an alphabetical marker, lower case (a, b, c, etc.)</li>

<li >The numbering of list items should be continuous! There is no valid replacement for the "value" attribute</li>
<li style="list-style-type: upper-roman">This list element has a roman number marker, upper case (I, II, III, etc.)</li>

<li style="list-style-type: lower-roman">This list element has a roman number marker, lower case (i, ii, iii, etc.)</li>

</ol>

<h2>Unordered lists</h2>

<ul>

<li style="list-style-type: disc">This list element is marked with a filled circle</li>

<li style="list-style-type: square">This list element is marked with a square</li>

<li style="list-style-type: circle">This list element is marked with an outlined circle</li>

</ul>

</body>

Questions, suggestions, objections? Give us feedback!
The table element

The alignment and background color of tables should be set with styles.

<body>

<table align="right" bgcolor="silver" border="1">
<thead>

<tr>

<th>Month</th>
<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>
<td>$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</tbody>
</table>

</body>

<body>

<table style="float: right; background: silver" border="1">
<thead>

<tr>

<th>Month</th>
<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>
<td>$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</tbody>
</table>

</body>

Questions, suggestions, objections? Give us feedback!
The tr element

Set the background color of table rows with styles.

<body>

<table border="1">
<thead>

<tr bgcolor="red">

<th>Month</th>
<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>
<td>$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</tbody>
</table>

</body>

<body>

<table border="1">
<thead>

<tr style="background: red">

<th>Month</th>
<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>
<td>$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</tbody>
</table>

</body>

Questions, suggestions, objections? Give us feedback!
The th and td elements

Set the width, height and background color of table cells with styles.
Try to avoid "nowrap", as this hinders the natural text flow and can cause problems for perceivability.

<body>

<table border="1">
<thead>

<tr bgcolor="red">

<th height="50" width="70%">Month</th>
<th nowrap="nowrap">Savings from eating home</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>
<td bgcolor="fuchsia">$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</tbody>
</table>

</body>

<body>

<table border="1">
<thead>

<tr bgcolor="red">

<th style="height: 50px; width: 70%">Month</th>
<th style="white-space: nowrap">Savings from eating home</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>
<td style="background: fuchsia">$100</td>

</tr>
<tr>

<td>February</td>
<td>$80</td>

</tr>

</tbody>
</table>

</body>

Questions, suggestions, objections? Give us feedback!
The hr element

All attributes of the hr element are deprecated and should be replaced by styles.

<body>

<p>Some text ... The following line is aligned left.</p>

<hr align="left" width="50%" />

<p>Some text ... The following line is aligned right.</p>

<hr align="right" width="200" size="10"/>

<p>Some text ... The following line is centered.</p>

<hr align="center" width="50%" />

<p>Some text ... The following line has no shade</p>

<hr noshade="noshade" />

</body>

<body>

<p>Some text ... The following line is aligned left.</p>

<hr style="text-align: left; margin-left: 0px; width: 50%" />

<p>Some text ... The following line is aligned right.</p>

<hr style="text-align: right; margin-right: 0px; width: 200px; height: 10px" />

<p>Some text ... The following line is centered.</p>

<hr style="text-align: center; margin-right: auto; margin-left: auto" />

<p>Some text ... The following line has no shade</p>

<hr style="height: 2px; border-width: 0px; color: gray; background-color: gray" />

</body>

Questions, suggestions, objections? Give us feedback!
The br element

With the clear attribute of the line break element, the effect of an aligned element can be stopped. Use styles to achieve this visual effect.

<body>

<img src="images/myDogSuFrisbee.jpg" width="120" height="160" alt="German Shepard mix playing frisbee" style="float: left" />

The image is shown on the left side of this text.

<br clear="left" />

After the cleared line break, this text is shown under the image.

</body>

<body>

<img src="images/myDogSuFrisbee.jpg" width="120" height="160" alt="German Shepard mix playing frisbee" style="float: left" />

The image is shown on the left side of this text.

<br style="clear: left" />

After the cleared line break, this text is shown under the image.

</body>

Questions, suggestions, objections? Give us feedback!
The dl element

The compact attribute defines a tighter line-hight for lists. Use styles to achive this visual effect.

<body>

FAQs

<dl compact="compact">

<dt>What does accessible mean?</dt>
<dd>Something is accessible, if it has no barriers.</dd>
<dt>What is a barrier?</dt>
<dd>A barrier is an obstacle.</dd>

</dl>

</body>

<body>

FAQs

<dl style="line-height: 80%">

<dt>What does accessible mean?</dt>
<dd>Something is accessible, if it has no barriers.</dd>
<dt>What is a barrier?</dt>
<dd>A barrier is an obstacle.</dd>

</dl>

</body>

Questions, suggestions, objections? Give us feedback!
The ul element

The compact attribute defines a tighter line-hight for lists. Use styles to achive this visual effect.
Define the line-height of list elements and the marker-type with styles.

<body>

Things to do

<ul compact="compact" type="disc">

<li>List possible barriers</li>

<li>Find examples</li>

<li>Present results</li>

</ul>

</body>

<body>

Things to do

<ul style="line-height: 80%; list-style-type: disc">

<li>List possible barriers</li>

<li>Find examples</li>

<li>Present results</li>

</ul>

</body>

Questions, suggestions, objections? Give us feedback!
The ol element

Define the spacing (line height) of list elements and the marker-type with styles.
The start attribute is deprecated and should be deleted, as there is no CSS alternative available and listelements should be numbered sequentially.

<body>

Things to do

<ol compact="compact" type="a" start="3">

<li>List possible barriers</li>

<li>Find examples</li>

<li>Present results</li>

</ol>

</body>

<body>

Things to do

<ol style="line-height: 80%; list-style-type: lower-alpha">

<li>List possible barriers</li>

<li>Find examples</li>

<li>Present results</li>

</ol>

</body>

Questions, suggestions, objections? Give us feedback!

Questions, suggestions, objections? Give us feedback!

Deprecated attribute

Test info

Failure cause

The inspected attribute is deprecated.

Why this may be a barrier

Good Example

Solution

References

Related WCAG 1.0 Checkpoint

Referring UWEM Test

Examples

The `body` element

The `caption`, `frame`, `iframe`, `input`, `legend`, `p`, `div` and `h1`-`h6` elements

The `img` and `object` elements

The `li` element

The `table` element

The `tr` element

The `th` and `td` elements

The `hr` element

The `br` element

The `dl` element

The `ul` element

The `ol` element

Deprecated attribute

Test info

Failure cause

The inspected attribute is deprecated.

Why this may be a barrier

Good Example

Solution

References

Related WCAG 1.0 Checkpoint

Referring UWEM Test

Examples

The body element

The caption, frame, iframe, input, legend, p, div and h1-h6 elements

The img and object elements

The li element

The table element

The tr element

The th and td elements

The hr element

The br element

The dl element

The ul element

The ol element

The `body` element

The `caption`, `frame`, `iframe`, `input`, `legend`, `p`, `div` and `h1`-`h6` elements

The `img` and `object` elements

The `li` element

The `table` element

The `tr` element

The `th` and `td` elements

The `hr` element

The `br` element

The `dl` element

The `ul` element

The `ol` element