Improving accessibility with semantics, structure and presentation

archived because information is provided elsewhere

Web pages comprise of five basic layers:

1. Content
2. Semantics
3. Structure
4. Presentation
5. Behavior

Content refers to the text, images and multimedia components of web pages. Behavior refers mainly to JavaScript, which is covered in the page on JavaScript and Ajax. This page concentrates on the other three layers.

Semantics

With regards to theme development, semantics refers to use of markup (HTML) to convey meaning rather than presentation. For example, we can use list code (ol, ul, li, dl, dt, dd) to say "this is a list" or heading tags such as h1, h2, h3 to say "these are headings and subheadings."

Fortunately Drupal takes care of a lot of this for us, such as outputting menus as lists and using an h1 tag for page titles and h2 tags for block titles. However, in the theme layer we can radically change the default output by providing our own template overrides and overriding themeable functions. You should be mindful when overriding output that you are not reducing the semantics of the markup, especially if your changes are purely for presentational purposes.

You can learn more about semantic markup by reviewing: Making your theme semantically correct.

Structure

Structure refers to the practice of using semantic HTML to describe how blocks of information relate to one another.

The relations between data are primary built using proximity and correct use of semantic elements. You can think of proximity as simply content source order—that is, the order in which the content appears in the HTML. With the correct use of semantic HTML we can describe what content items mean in terms of the content around it.

Source Order and Linearised Content

Source order is the order in which the content appears in the markup. Correctly linearised content makes sense when there is no layout applied to the page, such as viewing a text only version of the page, for example in the Lynx browser or some mobile phone browsers.

Tool: RightLynx browser addon for Firefox and Internet Explorer (emulates Lynx).

Web page structure is vitally important to accessibility because the content must make sense when linearized.

Many web pages use tables for page layout. This is frowned upon because its difficult to linearize the content. It is strongly advised to use CSS for layout rather than tables.

Please note that in this context we are just talking about the deprecated practice of using tables for layout design. Of course you should use tables to mark up tabular data (such as spreadsheets) and there are special considerations for building accessible tables.

By using CSS for layout, it is possible to structure the source order so that it makes logical sense when linearized, yet the visual layout can be different.

Structural Markup to Provide Meaning

Primarily this pertains to the use of heading tags, such as <h1>, <h2> and <h3>, to break pages into logical sections and subsections.

There are a few simple rules to follow when using headings:

1. Only one h1 tag is allowed per page.
2. Every page should have an h1 heading.
3. Headings must be properly nested.

Learn more about Headings. Related topic: Headings for navigation.

Presentation

HTML should never be used for presentation. Use of the font tag and many other HTML 4 elements are now deprecated in favor of their more semantic replacements. In order to style web page content you should use CSS, preferably in an external stylesheet.

By using CSS to separate the content from the presentation you can improve the accessibility of web pages in a number of ways:

• Provide meaning to your documents without worrying about what it looks like (CSS will take care of the style).
• Structure the main content to be first in the markup, but display it anywhere you want (CSS will provide the layout).

You can learn more about using CSS to separate content from presentation and linearized layout by reviewing the WebAIM article: Creating Accessible CSS — Using CSS to Your Advantage.