Most Common Web Standards and Accessibility Errors

HTML Tags Affected

<img>, <area>

Detailed Error Description

All images should have equivalent textual descriptions. The ALT attribute describes the associated image so that users without graphics-enabled browsers can still effectively navigate the page. In the past, ALT tags were commonly left empty for images used as spacers. However, there is no need for spacer images anymore, as Cascading Style Sheets (CSS) should be used for all visual formatting.

Suggested Solution

Add ALT tags to all images. The ALT tag description should explain the role of the image in the page, and should be in the following format:

<img src="#" alt="image description" />

Spacer images (with empty ALT values) should no longer be used, in favor of CSS.

HTML Tags Affected

<table>, <tr>, <th>, <td>

Detailed Error Description

These attributes for the given HTML tags are deprecated in HTML 4.01 and XHTML, in favor of style sheets (CSS). By converting all presentational elements to style sheets, there is no need for these deprecated attributes.

Suggested Solution

Most of these errors are caused by using tables for presentational purposes. Tables should only be used for tabular data - not for styling. Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.

HTML Tags Affected

<ul>, <ol>

Detailed Error Description

The level directly below an (un)ordered list declaration (<ul> or <ol>) must be one or more list items (<li>). List item tags (<li>) are allowed to contain tags such as <p>. However, the list declaration tag cannot contain anything besides list items, directly.

Suggested Solution

Make sure the (un)ordered list is properly being utilized. There is no need for an (un)ordered list declaration if it is not going to contain any list items (<li>). Below is an incorrect example:

<ul>

<p>Lorem ipsum dolor sit amet</p>

</ul>

There must be at least one <li>, and only <li>'s within a list:

<ul>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

</ul>

HTML Tags Affected

Any HTML tag

Detailed Error Description

HTML 4.01 or XHTML 1.0 has certain specifications regarding the hierarchy of using tags. For example, <img> cannot be directly contained in <ul>, and <td> cannot be within <p> without being contained in <table>.

Suggested Solution

Errors like this are many times caused by forgetting to close a previous tag or other typographical errors. They need to be taken care of on a case-by-case basis because of the thousands of different possibilities of this error occurring. For help, visit the HTML 4.01 or XHTML 1.0 specifications.

HTML Tags Affected

<font>

Detailed Error Description

The <font> tag is deprecated in HTML 4.01 and XHTML in favor of using style sheets (CSS). By converting all presentational elements to style sheets, there is no need for this deprecated tag.

Suggested Solution

The same effects that the <font> tag creates can be achieved via the font-family, font-size, color, and text-align attributes in CSS. Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.

HTML Tags Affected

The align attribute on any tag

Detailed Error Description

The align attribute is deprecated in HTML 4.01 and XHTML in favor of using style sheets (CSS). By converting all presentational elements to style sheets, there is no need for this deprecated attribute.

Suggested Solution

The same effects that the <font> tag creates can be achieved via the text-align, position, or float attributes in CSS. For example, the following markup and CSS diplays a simple box with all of the text right-aligned. Notice that the markup itself contains no presentational elements:

<div id="box1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div>

The style sheet for the above markup:

#box1 {
border: 1px solid #000000;
width: 300px;
}

#box1 p {
text-align: right;
color: #0000cc;
}

The final result:

Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.

HTML Tags Affected

<script>, <style>

Detailed Error Description

The "language" attribute is deprecated in HTML 4.01 and XHTML. "TYPE" is now required for both <script> and <style>. For example:

• <script type="text/javascript"> to open a section of JavaScript
• <style type="text/css"> to define a local style sheet

The other strange errors occuring within a <script> or <style> element are many times caused by a browser incorrectly parsing the element's contents. It can be very helpful, and is recommended, to contain anything within a <script> or <style> element in HTML comment tags (<!-- contents -->)

Suggested Solution

Make sure all <script> and <style> elements have an appropriate and recognized "type" defined. Put the contents of <script> and <style> elements in HTML comment tags (<!-- contents -->). This will keep browsers from incorrectcly parsing the contents. Also, use minimal to no JavaScript, in favor of only server-side scripting. Client-side scripts, like JavaScript, pose a serious accessibility issue with certain types of users and browsers.

HTML Tags Affected

All HTML tags

Detailed Error Description

In plain terms, an element consists of a start tag, the element content, and an end tag. HTML 4.01 and XHTML require that all tags have end tags, including tags like <br> (which would be <br /> - starting and closing in the same tag). The only tag that does not have an end tag is DOCTYPE.

Suggested Solution

Make sure all tags are ended in the order which they were opened. Even tags like <br> and <img> need to be closed, although it is appropriate to close them by adding a forward slash (/) to the end of the tag. For example:

<img src="picture.jpg" alt="Image for demonstration purposes" height="20" width="20" /><br />

Notice that these tag are opened and closed in the same line, by adding a forward slash to the end.

HTML Tags Affected

Page content and all tags using URLs in attribute values

Detailed Error Description

This type of error is probably one of the most intimidating errors given out by validators. It is also one of the easiest errors to fix! They are generally brought on by a non-standard character being used that is not properly marked-up: "&", for example. This especially becomes a problem when "&" is used in URLs. Some validators incorrectly diagnose this single error to multiple errors, such as the ones listed here.

Suggested Solution

Make sure all non-standard ASCII and ISO symbol entities are properly marked-up. Visit http://www.w3schools.com/html/html_entitiesref.asp to see a list of the common character codes. A lot of the time, these errors can be solved by doing one of the following:

• Change all &'s to &amp;, both in content, href, and src attributes
  • <a href="http://google.com/search?hl=en&amp;q=puppies&amp;btnG=Google">
  • "Marketing & Communications" should be "Marketing &amp; Communications" in the markup
• Change all " symbols to &quot; in the markup
  • "How to Adopt Web Standards" should be &quot;How to Adopt Web Standards&quot; in the markup

HTML Tags Affected

Any attribute value on any tag

Detailed Error Description

According to HTML 4.01 and XHTML, any attribute value that contains characters other than A-Z, a-z, 0-9, hyphens, periods, underscores, and colons must be contained in quotes. For example, in <a href="http://google.com" onMouseOver="clearall()">, both "http://google.com" and "clearall()" must be in quotes, because they contain characters out of the given range.

Suggested Solution

Simply adding quotes around the attribute with the error will fix this. However, it is recommended that quotes be added to all attribute values, regardless of the character types they may contain.

HTML Tags Affected

Any series of tags

Detailed Error Description

Tags must be closed in the same order they were opened. Some validators are better at pin-pointing this error than others. However, in other validators, this single error can report multiple errors, such as the ones listed in this table.

For this single piece of markup:

• <ul><li>Lorem ipsum</ul></li>

W3C reports the following 2 errors:

• End tag for "li" omitted, but OMITTAG NO was specified
• End tag for element "li" which is not open

This minor error can begin to esculate quickly into multiple errors, depending on the complexity of the markup. Many times, a small mixup at the beginning of a page can result in hundreds of errors later on - when, really, the only problem is ending a tag too soon.

Suggested Solution

It is sometimes hard to pin-point the actual location of errors like this, especially if you are unfamiliar with the markup. It is very helpful to either manually make indentations to the markup, or use software such as HTML Tidy to help. Once the block elements of markup are indented appropriately, it is much easier to find the source of these errors.

For example, it is difficult to see that the following line contains an error:

<ul><li>Lorem ipsum</ul> </li>

Once this code is properly indented, it is much easier to see that </ul> is closed too soon:

<ul>

<li>

Lorem ipsum

</ul>

</li>

HTML Tags Affected

<body>

Detailed Error Description

All of these <body> attributes are deprecated in HTML 4.01 and XHTML in favor of style sheets

Suggested Solution

Remove these attributes. All presentational elements should be contained in Cascading Style Sheets (CSS). Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.

HTML Tags Affected

<b>, <i>

Detailed Error Description

Typically, <strong> is used for a stronger emphasis than <em>. It is no longer appropriate to use font-formatting tags, like <b> and <i>, because all presenational elements should be in Cascading Style Sheets (CSS). <strong> and <em> should be used to emphasize content, rather than being used for styling purposes.

Suggested Solution

If content of a page is being emphasized, use either <strong> or <em>. To just apply bold or italics for visual purposes, do so in the style sheets (CSS). Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.

HTML Tags Affected

<!DOCTYPE>

Detailed Error Description

Every page needs to have a valid DOCTYPE either as the first line, or as the second line if an XML declaration is included in the page. A valid DOCTYPE must be used. If a page has an invalid DOCTYPE, it is likely to come back with validation errors.

Suggested Solution

If you are unsure how to define a DOCTYPE and which DOCTYPE to use, visit Fix Your Site With the Right DOCTYPE, an article by Jeffery Zeldman.

HTML Tags Affected

Content: &128;-&159;

Detailed Error Description

Characters between &128; and &159; are typically Microsoft specific and are illegal in XHTML.

Suggested Solution

Make sure all characters are coded correctly and are defined in HTML 4.01 or XHTML. Visit http://www.w3schools.com/html/html_entitiesref.asp to see a list of the common character codes.

HTML Tags Affected

<hr>

Detailed Error Description

All of these <body> attributes are deprecated in HTML 4.01 and XHTML in favor of style sheets

Suggested Solution

Remove these attributes. All presentational elements should be contained in Cascading Style Sheets (CSS). Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.

HTML Tags Affected

<ul>, <ol>, <li>

Detailed Error Description

Many times, the following result for listed items is desired:

• List item 1
• List item 2
  • Sub list item 2a
  • Sub list item 2b
• List item 3

These errors can occur when a sub-list (such as item 2a and item 2b above) is not contained all within an <li> element. The last error mentioned pin-points the exact cause of the error, where the first 3 are only indirectly related. Fixing this problem many times clears up multiple errors.

Suggested Solution

Make sure to include entire sub-list elements within an <li> element. The markup below produces the example shown in this table:

<ul>

<li>List item 1</li>
<li>List item 2

<ul>

<li>Sub list item 2a</li>
<li>Sub list item 2b</li>

</ul>

</li>
<li>List item 3</li>

</ul>

Notice that the entire sub-<ul> list is contained in "List item 2's" <li> element. The same is true for <ol> elements.

HTML Tags Affected

<img>

Detailed Error Description

Using the height and width attributes to specify the exact size of an image in pixels will result in more accurate page layouts and faster HTML rendering

Suggested Solution

Make sure all <img> tags contain the width and height attributes, giving the image size in pixels.

HTML Tags Affected

<body>

Detailed Error Description

<body> can only be used once in an HTML or XHTML document

Suggested Solution

Make sure there are no typographical errors in the markup. There must be one and only one <body> element in HTML or XHTML markup.

HTML Tags Affected

id and name attribute on any tag

Detailed Error Description

ID or name value has already been used in the document. According to HTML and XHTML specification, they must be unique in order to properly identify them.

Suggested Solution

Do not use the same ID or name value more than once in a single document. To use a specific style once in a document, it is appropriate to use ID. For a repetitive style in a single document, the "class" attribute is more appropriate.

HTML Tags Affected

<center>

Detailed Error Description

<center> is deprecated in HTML 4.01 and XHTML in favor of style sheets

Suggested Solution

Remove these attributes. All presentational elements should be contained in Cascading Style Sheets (CSS). Converting all visual aspects of the page to CSS allows much more flexibility, produces cleaner markup, pushes it much closer to standards compliance, and creates a more accessibile interface.