Below are some common HTML mistakes that affect accessibility of web content. Review these carefully and be sure to validate your page for proper HTML.
The DOCTYPE tells Web browsers what version of HTML your page is
using. Technically, it refers to a Document Type Definition (DTD)
that basically specifies the rules for that version of HTML.
The DOCTYPE should always the the very first line of your HTML code
and it IS case sensitive.
In HTML 4.01 there are three primary DOCTYPE's
The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
All Web pages should define the character set that they are currently using. Though character sets are rather technical, they simply tell the Web browser what set of characters are used in the page.
If a page containing English characters found on typical keyboards will have a different character set than one that should display Japanese characters. The character encoding tells the user agent (browser or assistive device) what kind of data to read and display. For most English Web pages, the character encoding will be entered into the Web page like this: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> This meta tag should be within the <head> and </head> tags of your Web page and is not case sensitive. http-equiv="Content-Type" tells the browser what type of meta tag this is (there are several types). content="text/html; tells it that this is an html document that contains text only. charset=ISO-8859-1 tells the browser that it is using the ISO-8859-1 character set - which defines common English characters. Another common English character set is windows-1252. A Japanese Web page's might have charset=shift_jis. Here's a list of common character sets.
Use of code that is not part of the HTML standards is not appropriate. These include the <BLINK> and <MARQUEE> tags, among others. There are also many attributes of HTML tags that many browser will recognize, but that are not part of the HTML standard. Commonly used attributes that are improper are attributes in the <body> tags that modify margin size, such as <body marginwidth="0">. These tags and attributes vary based on the version of HTML that you are developing in. For accessibility and compatibility reasons, we should all be using AT LEAST HTML version 4.01. To find out if your page contains unsupported HTML tags or attributes, validate it at the W3C's HTML Validator. If you don't have a DOCTYPE, then it won't know which version of HTML to validate your page with.
The most common mistakes in HTML are usually just plain human mistakes. Here's a list of HTML no-no's:
Tables are a common culprit of improper HTML. It is easy to incorrectly code tables and most browsers will let you get away with it. Assistive technologies are very strict about proper table structure. Common table mistakes are:
All images must have the alt attribute: <img src="image.gif" alt="image description">. As of HTML version 4.01, this is required.
<title>, <meta>, and <style> tags must be within the <head> and </head> tags.
The form tag is a block-level tag, meaning that it starts a new
section of your page (much like <h1> and <p> do).
It is a common mistake to use the form tags to surround smaller
sections
of your page. To avoid having the form insert a blank line when
it begins. This is especially common within tables.
Incorrect:
<table><form><tr><td>..... </td></tr></form></table>
Correct: <form><table><tr>.... </tr></table></form>
This commonly used HTML extension is not proper HTML for the img tag (i.e., <img src="image.gif" align="absmiddle">). This attribute IS supported by the major browsers, but if you want your code to be correct, use either align=middle or CSS to align text to the middle of images.
Scripting languages such as JavaScript and VBScript are becoming
very popular. HTML standards require that you identify the type
of scripting language that is being used. Most scripts include the
language attribute. This alone is not enough, you must also include
a type attribute. In fact, in the future, the language attribute
will be replaced with the type attribute.
<script type="text/javascript">
Any JavaScript that performs a function or outputs information must have a <noscript> tag that provides an alternative or explanation for what the JavaScript does.
<script type="text/javascript">
.... javascript stuff here ...
</script>
<noscript>
<P>Access the <A href="http://someplace.com/data">data.</A>
</noscript>
This list could probably go on and on. The best way to determine what mistakes you are making is to validate your page. A common misconception about proper HTML is that if you use a WYSIWYG Web development program to design your page that your HTML will automatically be valid. This is incorrect. Many popular development programs will create improper code or allow you the functionality to create improper code. Always check your HTML for validity to be sure.
This page was made in thanks of www.webaim.org
© Copyright 2000-2002 WebAIM. All Rights Reserved. Terms of Use.
