DMP

Accessible Structure Elements

This section extends the text content accessibility section and focuses on how to make text even more accesible, by using four basic structure elements. Headings, paragraphs, lists and tables.

Headings

Purpose of Headings

Headings in a document are not meant to assist formatting, but to provide information on the structural hierarchy of a document. It is important to use them appropriately to convey document structure, since some users skim through a document by navigating its headings.

Proper Structure

There are six levels of headings (Heading 1 up to Heading 6). Normally, as the heading number gets bigger, the font gets smaller, indicating the proper structure of headings. Having in mind that Heading 1 is larger than Heading 2 and Heading 2 is larger than Heading 3 and so on, you always have to include the smaller heading inside the larger one and in the right numerical order.

This is a nesting heading structure example:

Heading One
	Heading Two
		Heading Three
		Another Heading Three
	Another Heading Two
Another Heading One

You should think of headings as sections and subsections in content.

Let’s say you want to create a document about recipes. Then you could have this heading structure:

John’s Recipes (Heading One)
	Main Dish (Heading Two)
		Burgers (Heading Three)
		Casserole (Heading Three)

Proper format

Headings should be descriptive.

• Identify the subject of the Web page
• Make sense when read out of context, for example by a screen reader or in a site map or list of search results
• Be short

Check that each heading is preceded by two blank lines and followed by one blank line.

A blank line contains any number of non-printing characters, such as space or tab, followed by a new line.

How to insert headings

Probably when adding new content, this is done through an editor that has already formatting options for you. In this case the steps to convert a text into heading are these:

• Select the text that you want to be converted into a heading.
• Select from a dropdown select field the style you need.

If the drop down select field that allows you to choose heading is not visible, try to find a button that will expand your current tools.

Let’s see how this is done in two popular control management systems:

Wordpress

First select the text you are going to convert into a heading.

In Wordpress, the button to expand the tools and reveal the headings select field is called "Kitchen Sink". You can click it or just use the keyboard shortcut "Alt + Shift + Z".

Then you can select headings from a drop down select field, which usually has as default value “Paragraph”.

Joomla

In Joomla, the select field is already there. Just select your text and choose the heading you need.

When to use headings

To provide better readability, accessibility and structural hierarchy of your document, you should always use headings, as long as you are using them properly.

Remember that headings should correspond to each section/subsection.

Quick Tips for Developers

Here is a list of the most important tips on headings.

• All visual headings in web pages must have a heading structure applied using “h1” to “h6” tags.
• Headings must be used to describe a page’s structure and not used for visual effects.
• Headings should not be coded around content that is by itself, they should always be followed by associated content.
• Headings should not be coded around form labels i.e. the text label “Search” that comes before an input field.
• Heading structure should be consistent throughout the site.
• Keep headings short and succinct and therefore easy to scan and understand.

A simple example for coding nested headings:

<h1>Cooking techniques</h1>
...
<h2>Cooking with oil</h2>
...
    <h3>Sautéeing</h3>
    ...
    <h3>Deep frying</h3>
    ...

If you have sidebars on your website, it’s a good practice to use H2 tag for the title of the content inside those sidebars.

Paragraphs

What is a Paragraph

A paragraph is a coherent block of text, such as a group of related sentences that develop a single topic or a coherent part of a larger topic.

Publishing any kind of written work requires the use of a paragraph. This way your content will be semantically correct.

How to Insert Paragraphs

Most text editors wrap text in paragraphs automatically by default. So no manual work or coding is needed.

If when typing text you press “Enter” on your keyboard and you see a blank line right above your cursor, it means that the text editor has just created a new paragraph.

If you want to change line, but you do not want to change paragraph, then press “Shift + Enter”.

Lists

What is a List

A list is a sequence of list items. A list item is a paragraph that begins with a label. More simply, a list is a text formatting convention to create simple lists of related items.

List Types

There are two types of lists. The ordered list (ol) and the unordered list (ul).

For unordered lists, asterisks, dashes, and bullet characters may be used as the label, but the same label characters must be used for all the items in a list.

Example of an unordered list:

• Unordered List Item
• Unordered List Item

Example of an ordered list:

1. First Ordered List Item
2. Second Ordered List Item
3. Third Ordered List Item

Which List Type to Use

When creating a list of items where order does not matter, use an unordered list. Otherwise use an ordered list.

Only exception to use ordered list for unordered list items, is when the list is very long. Numbering a long list allows for easier recall of a particular list item.

How to Insert Lists

To start a new list is as simple as clicking the corresponding button in your text editor.

“Unordered list” button in Wordpress.

Tables

Unfortunately, accessible tables are not yet supported by text editors (as of January 2013).

As such, if the display of tabular content is necessary, please refer to an expert. If that's not possible, just use the text editor’s default table if it exists, otherwise use an image.