Utdatert attributt

(Henvisende UWEM-test: 11.2_HTML_02)

Testinformasjon .
Eksempler

Testinformasjon

Feil på grunn av

Det undersøkte attributtet er utdatert.

Du har brukt et attributt som er utdatert i HTML 4.01. For en fullstendig liste over attributtene i HTML 4.01, se: HTML Techniques for WCAG 1.0 - Index of HTML attributes – utdaterte elements er markert med stjerne (*).

Hvorfor dette vil være en hindring

At et attributt er utdatert, betyr at attributtet er erstattet av nye representasjoner. W3C fraråder bruk av slike attributter, selv om de er en del av den offisielle standarden.
Utdaterte attributter kan bli avleggs i framtidige HTML-versjoner.

Løsning

Erstatt utdaterte attributter med passende nye attributter eller metoder. Bruk for eksempel stilark for formattering av innholdet.

Referanse

Henvisning til WCAG 1.0-kontrollpunkt
11.2
"Unngå utdaterte funksjoner i W3C-teknologier." [Prioritet 2]
WCAG 1.0 Checkpoint 11.2

Henvisning til UWEM-test
11.2_HTML_02
Denne testen er rettet mot å finne utdaterte HTML-attributter.

Eksempler

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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
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>

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!

Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!

Utdatert attributt

Testinformasjon

Feil på grunn av

Det undersøkte attributtet er utdatert.

Hvorfor dette vil være en hindring

Løsning

Referanse

Henvisning til WCAG 1.0-kontrollpunkt

Henvisning til UWEM-test

Eksempler

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

Utdatert attributt

Testinformasjon

Feil på grunn av

Det undersøkte attributtet er utdatert.

Hvorfor dette vil være en hindring

Løsning

Referanse

Henvisning til WCAG 1.0-kontrollpunkt

Henvisning til UWEM-test

Eksempler

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