How to use this template

Introductory blurb - still need to write this...

Headings

Note The Heading 1 style for this template is used for the "How to use this template" heading above.

The first heading level, Heading 1, of any document (HTML file, MS Word document, Adobe PDF, etc.) should be the title of the main content. You should only use one Heading 1 in each HTML topic. This heading, or title, helps readers understand the purpose of the topic. If you feel like you need more than one Heading 1 for your topic, consider breaking the content topic into multiple topics. Short, consistently laid out topics help readers manage your content without being overwhelmed. This can be particularly important to individuals with cognitive disabilities.

You should also define a title for your document that matches your Heading 1.

Heading 2

Sub-headings are important for a number of reasons:

They visually break up a page which makes it more interesting and reduces eye strain.
They help you logically order your content.
They help learners identify and internalize transitions in information.
They provide an easy way for individuals using screen readers (and other assistive technologies that interact with HTML content) to skim the page and jump between content.

All headings in your content topic should use proper heading tags. If you copy and paste the different heading elements in this template your headings should be tagged correctly. You can also use the formatting options available with most HTML editors (WYSIWYG editors) to select the appropriate heading level.

Heading 3

Your headings should be properly nested. For example, a Heading 3 element should only be used after a Heading 2 element or another Heading 3 element. Just as you shouldn't format a paragraph tag to look like a heading without actually using a heading tag, you shouldn't use a heading tag unless you are indicating a new section or sub-section of information.

Heading 4

A good design tip is to never use more than four levels of headings. If your content topic uses more than four levels of headings, consider reorganizing. Chances are the content topic will be clearer and less intimidating to readers after you have reorganized it.

Main content

Paragraphs

The paragraph element should be used for your main text. When formatting paragraph text you should ask yourself:

Is the text large enough and simple enough that most readers won't strain their eyes if they read multiple pages (or topics) of information?
Will the text still look good when readers use their browser's zoom functionality and screen magnifiers to increase the font size?
Is there a strong contrast between the text color and the page background?

The default paragraph font in this template has been specifically chosen for online reading and resizes well when zoomed.

Paragraph formatting

The following is a list of alternative paragraph styles that can be used to draw attention to a paragraph or section of text.

A blockquote style:
What's in a name? That which we call a rose
By any other name would smell as sweet
A noteparagraph style:
Important Place essential information in a paragraph style with a background or border for visual emphasis.
An emphasisparagraph style:
Use this paragraph style to highlight or draw attention to an interesting paragraph or concept.

List formatting

Lists are a great way of breaking up information on a page and drawing attention to key information and procedures. It is important that lists use the correct list tags and do not use breaks or empty paragraphs for formatting. Correctly tagging and formatting your lists ensures that non-visual readers can quickly assess how many items are in the list and readers who navigate by keyboard can move between list items without having to tab through empty paragraphs.

The following examples show a properly formatted unordered list, ordered list and definition list.

List Item 1

Sub-item 1
Sub-item 2

List Item 2

Step 1

Sub-step 1
Sub-step 2

Step 2

Text formatting

Most word processing tools (such as MS Word) and HTML editors (such as Dreamweaver) provide simple interfaces for formatting paragraph text in order to add emphasis or call out the importance of a specific word, phrase or sentence. Typically this includes options to underline, bold, italicize, etc. Although these options are easy to use, they aren't always the best design choices. We suggest you use the formatted text options available in this template instead.

Images

Red rose denoting love

From a design perspective, there are two types of images used in HTML content: decorative images and informative images.

Decorative images
Graphics that are used for layout and design purposes that do not contribute any meaning to the page, such as: spacers, box corners, dividing lines and subtle background images.

Informative images
Any other graphics on the page, such as: photos, line drawings, graphics and icons. Background images that include text or pictures that convey information or mood are informative.

All images on a page, whether decorative or informative, need alternative text so they can be recognized by assistive technologies that interpret HTML. Alternative text is defined using the alt attribute. For decorative images the alt attribute should be marked as "". This tells screen readers and other assistive technologies that the image is decorative and does not need to be read. This is often described as setting a null value for the image. For informative images the alternative text should concisely describe what the image is trying to communicate rather than describing its appearance.

You should also add an image caption below your image. The caption should explain the purpose of the image. It may be the same or different than the alternative text.

This style sheet uses a div element to float images to the left or right of your paragraph text. If you are copying code for an image, make sure you copy the opening and closing div tags.

Tables

From a design perspective, there are also two types of table: layout tables and data tables.

Layout tables
Used to divide larger sections of information on a page into columns or segments for design purposes. Many designers consider layout tables a misuse of HTML tables; however, layout tables are very popular because they provide an easy way to group information in columns or panels.

Data tables
Use rows and columns to present relationships between sets of information. They display information in a grid and use row and column headers to communicate how data in different cells relate.

Tables can be very difficult for non-visual readers to interpret since screen readers and other assistive technologies always read the HTML code for a page from top to bottom, left to right (in a linear order). Therefore, in order for tables to make sense you must associate cells with the row and column headers and compare them to other cells so that non-visual readers can understand the context of a cell as their assistive technology reads cells from top to bottom, left to right.

There are a number of things you can do to improve the accessibility of tables:

Keep your tables as simple as possible. Use paragraphs or lists to display information when possible.
Include a table summary. The summary should explain the purpose of the table and a general description of its layout.
Use heading tags and the scope attribute to define row and column headers in simple tables. The scope attribute helps browsers and screen readers interpret how cells relate.
Use headers and id attributes for tables that have more than one heading level (nested tables). Nested tables are difficult to make accessible using an HTML Editor. To set up an accessible nested table you must assign an id attribute to each of your headings and then define which headings apply to each cell using the source code.

The following examples show a simple and complex (nested) table with correct markup. You will need to apply the principles outlined in the sample code to your own tables.

Romeo and Juliet Characters simple table
Character	Family loyalty	Living?
Romeo	Montague	Deceased
Mercutio	Montague	Deceased
Benvolio	Montague	Living
Juliet	Capulet	Deceased
Tybalt	Capulet	Deceased
Nurse	Capulet	Living
Count Paris	Capulet	Deceased

Romeo and Juliet Characters nested table
	Character	Relation	Living?
Montague	Romeo	Son of Lord Montague	Deceased
	Mercutio	Friend of Romeo	Deceased
	Benvolio	Cousin of Romeo	Living
Capulet	Juliet	Daughter of Lord Capulet	Deceased
	Tybalt	Cousin of Juliet	Deceased
	Nurse	Nurse to Juliet	Livin

Helpful resources

Web Accessibility for Online Learning A well-organized tutorial on creating accessible courses funded by the Sloan Foundation and CANnect, a consortium of schools and philanthropists committed to promoting accessible course design.
W3C Web Accessibility Initiative The World Wide Web Consortium's Web Accessibility Initiative is the leading body for international web accessibility standards. Their site provides basic information about web accessibility as well as the Web Content Accessibility Guidelines, which are the basis of many accessibility compliance laws around the world.
Web Accessibility in Mind (WebAIM) A leading provider of accessibility resources and information. A great site for finding general information about accessibility issues and resources for solving specific accessibility problems.
WAVE Toolbar A free Firefox extension from WebAIM for evaluating the accessibility compliance of web pages. This tool allows you to check the accessibility of your HTML files similar to checking for spelling errors.

How to use this template (Heading 1)