McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

Content Design

The content sections of websites should be designed in a structured manner and should also comply with the Accessibility for Ontarians with Disabilities Act (AODA) that took effect Jan 1, 2012. Using these techniques will not only make your web pages accessible for the visually impaired but will also allow search engines such as Google to index the content better, it will make it easier for mulitple browsers to render the content more consistently and it will make it easier to maintain the pages consistently across the website using style sheets.

  • Images
  • Links
  • Structure content with header tags

Images

All images should have corresponding and meaningful alternate text (alt attribute). An example of alternate text that is not meaningful is entering "photo" for a portrait of a person instead of entering the person's name, such as "John Smith".

In Contribute, when you insert an image, there's a text box for alternate text in the insert image dialog box that pops up.

Links

The text for links should be meaningful when viewed out of context with the surrounding text. Avoid text for links such as click here. Instead use a link that is meaningful when read on its own such as click here for more information on content design or simply content design.

Structure content with header tags

The content of the pages should be structured using header tags in an hierarchical fashion like an outline: Header 1 is the page title in the template and should not be used again in the content below, Header 2 is used for the first level of section titles, Header 3 for the second level of section titles and Header 4 for the third level. The header tags should not skip levels; in other words, a Header 3 tag should not be directly under the Header 1 tag without a Header 2 tag in between.

The structure should be something like this:

Header 1

Here is the text of the section under header 1

Header 2

Here is the text of the section under header 2

Header 3

Here is the text for the section under header 3

Header 3

Here is the text of the section under header 3

Header 2

Here is the text of the section under header 2

etc.