DAN STORM

• previous
• next

Correct and Semantically Diverse HTML

Writing accessible HTML is as much about writing correct HTML as it is about ensuring that certain features are present in the HTML. The first step is to write valid and semantically appropriate HTML. In the early days of writing HTML, before the advent of CSS, using tables was the only way to have discreet content in separate containers on a page. But tables were originally conceived to display tabular information. With the advent of CSS floating and positioning there is no longer a need to use tables for layout, though many years later many sites are still using tables in this manner. In short, use the TABLE element only if you need to display tabular data. If your aim is to create layouts where elements sit side by side—such as with a left navigation scheme with main content to its right—then use CSS so that your markup and styles are discreetly separated.

Along the same lines use thef BLOCKQUOTE element when you are citing an extended quote, not when you need to indent text. Do not use the P element for a simple word or two just because you need top and bottom margins around it. Use the P element to wrap a paragraph. If no tag seems to be semantically applicable use the fall back display element, DIV. The DIV element by default creates a discreet container with a line break at the end. To use CSS parlance, a DIV element assumes block display by default.

Similarly, do not use any display attributes in your HTML. This includes attributes such as border, hspace, vspace, align, cellpadding, cellspacing, etc. These attributes all have to do with display, which should be controlled by CSS. In short, there should be no immediate clues as to the appearance of a page merely by looking at its view source output. HTML should be structured so that CSS does all the formatting, where the HTML provides a semantic structure to hook into. This separation of structure and styling aids in accessibility and search engine optimization (SEO), and has other benefits as well.

When developers make the switch to CSS layout sometimes they simply start using the DIV element in place of the TD element. However, HTML does have a fairly rich arsenal of tags. A list of links could well be placed in an unordered list. A list of recent purchases is perhaps best put in a data table. An address could be placed in the overlooked ADDRESS element. Forms should make use of the FIELDSET and LEGEND elements. Using alternative tags makes your HTML documents more rich semantically, and more accessible. A screen reader, for example, will read the LEGEND element before each label associated with radio buttons (if they are all within the same FIELDSET element). This helps the user with a visual disability to better understand the document.

Color

The color contrast between the foreground and background should be dissimilar enough so that all sighted users can easily read text. Color alone should not be used to convey that a link is a link because many users are color blind. While it is true that a screen reader announces all links, it is the sighted user with a visual difficulty that we also need to consider. Therefore it is best to underline links or use some means other than color to indicate they are links. As we stated above, an exception would be in area that is obviously a navigation area, that is, a list of links where all the text is a link.

It is also common to use color—often the color red—to convey that a field is required. It is fine to use color, but another clue could be to add an asterisk and a key to indicate what the asterisk means. Similarly, color is often used when an error has occurred in form submission. Since many users cannot distinguish colors, it is best to convey that an error has occurred with text stating that the error has occurred, and an error icon with appropriate alt text.

Abbreviations and Acronyms

HTML has two tags that are useful but underused: the ABBR and ACRONYM elements. An abbreviation is rather simple. It can be a string of letters standing for something, like CSS standing for Cascading Style Sheets. It can be an initialism, that is, the first few letters of a word, like perk for perquisite. An acronym is a type of abbreviation that is pronounceable, like NASA or NASCAR. These elements use the title attribute to specify the full length meaning of the abbreviation or acronym.

Unfortunately IE6 does not support the ABBR element. There are two workarounds. One is to use the ACRONYM element, which is not quite semantically correct, since all acronyms are abbreviations, but not all abbreviations are acronyms. The other method is to use the ABBR element with a SPAN element inside as follows.

Note the style applied to the ABBR element to make it more noticeable to the sighted user. For users of assisted technologies, the title attribute will be read the first time to orient them to its meaning if their screen reader is set to read the title attribute.

Specifying Language

The default language of the website should be specified in the opening HTML element using the lang attribute and the XML-compliant xml:lang attribute if you are using XHTML.

For HTML5 use this lanaguage declaration.

Whenever you are referencing a foreign language, you need to indicate it in whatever element you use.

The hreflang attribute should be used when the material linked to is in a different language.

• previous
• next