Correct Markup

• Use heading elements (H1-H6) appropriately
• Use quote elements (Q and BLOCKQUOTE) appropriately
• Use list elements (OL, UL, DL) appropriately

Because markup elements are used extensively in making Web pages work, it is important to understand how improper use of markup elements hinders accessibility. Using structural markup for a presentation effect, such as block quotes or list elements to control indentation, makes it difficult for users with assistive technology to understand the page or to navigate through the page. The problem occurs when assistive technology interprets and delivers information differently from the way you intended because of the markup. For example, assistive technology interprets list elements and reads them accordingly. However, your objective was simply to indent a paragraph.

Using presentation markup rather than structural markup to convey structure in a graphical browser makes it difficult to render a page intelligibly to devices other than displays. For example, when bold font is used instead of a heading element, it is only recognized as a heading by someone who can see the bold font and the surrounding white space. Someone using a nongraphical browser can read the text but might not know it is a heading.

Improper markup also affects tools, like search engines, and software tools that rely on markup to identify important information, such as summaries. For example, only heading text marked with the heading element is used in summaries and collapsed views of a page. Frequently, authoring tools incorporate inappropriate markup. Consider using the latest version of an authoring tool that supports the creation of valid HTML and check the tool's output for appropriate markup.

You might be tempted to use or misuse constructs that achieve a desired formatting effect on older browsers, but be aware that these practices can cause accessibility problems. Consider whether the formatting effect is critical enough to warrant making the document inaccessible to some users. However, you must not sacrifice appropriate markup because a certain browser or assistive technology does not process it correctly. For example, it is appropriate to use the TABLE element to mark up tabular information even though some older screen readers might not handle side-by-side text correctly (refer to Checkpoint 9). Using TABLE markup correctly makes it possible for assistive technologies to render tabular information in an understandable way.

Back to top

The following techniques and examples support better ease of us and are recommended to improve accessibility. For additional information, refer to the W3C's Techniques for Web Content Accessibility Guidelines section on "Document structure and metadata".

Heading Elements

Headings that have been coded with structural markup style heading elements (such as, H1 and H2) enable users who are using assistive technology, like a screen reader, to skim through a page by navigating the headings. When information is presented to "look like a heading", but not marked-up using heading elements, assistive technologies do not understand the various stylistic presentations without the underlying structural mark-up.

Misuse of structural markup makes the Web page confusing for users who use tools that rely on heading elements for navigation. If the document uses bold or font effects instead of heading elements, the visual appearance might be the same, but the user cannot navigate the headings.

Do not use heading elements for bold or font effects. Use presentation style markup (such as, <B> or style="font-weight: bold") for bold or font effects. Heading elements should only be used to distinguish headings, so a person using assistive technology can properly navigate through them.

Use heading elements to convey logical structure, and use them according to specification. Headings should also be used in consecutive order. Do not skip from H1 to H3. Use H2 to indicate a subsection of H1. For example:

<H1>Unit 5, Lesson 1: Working with Correct Markup</H1>
<H2>Introduction</H2>



Quote Elements

Use the Q or BLOCKQUOTE element for quotations. Do not use quotation markup for visual indentation because assistive technology might interpret and deliver information differently from what was intended. Use the Q element to mark up short inline quotations and the BLOCKQUOTE element to mark up longer quotations. For example:

<BLOCKQUOTE>
This is what we call e-business. It's a term we coined to describe all of the ways individuals and institutions will derive value from the Net as well as our strategic direction in the emerging networked economy. --Lou Gerstner, IBM Chairman and Chief Executive Officer.
</BLOCKQUOTE>

List Elements

Use list elements (OL, UL, and DL) to properly convey lists of information. Do not use list elements for visual indentation because assistive technology will interpret and deliver information differently from what was intended. For example, if the Web author or authoring tool used incorrect <DL> markup to indent a paragraph, a screen reader will read it as a definition list.

Also common is when information is presented to "look like a list", but not marked-up using list elements. Assistive technologies do not understand the various stylistic presentation without the underlying structural mark-up.

List elements should also be nested correctly as specified in the following example:

<UL>
<li>IBM sales specialists
   <ol>
   <li>Joe Salesman</li>
   <li>Sally Rep</li>
   </ol>
</li>
<li>IBM support specialists</li>
<li>IBM development specialists</li>
<li>IBM accounting specialists</li>
</UL>


• IBM sales specialists
  1. Joe Salesman
  2. Sally Rep
• IBM support specialists
• IBM development specialists
• IBM accounting specialists

Back to top

After a Web site or template has been created, check the site to ensure that it complies with accessibility requirements. Several techniques are available to verify that the markup on Web pages is accessible to people with disabilities.