NC Accessibility Hub

Semantic Markup

Understanding and applying semantic markup correctly is critically important to website accessibility. Without semantic markup, websites would be missing important elements that adaptive technologies need to work properly.

What is semantic markup?

When content is formatted using a WYSWYG editor semantic markup is being created.

Semantic markup is the use of HTML (Hyper Text Markup Language) to convey information about content on a web page. HTML provides semantic tags which are wrapped around text. These tags provide important information about that content’s purpose to browsers (ex. Chrome), screen readers, and other adaptive technologies.

There are semantic tags and non-semantic tags. Semantic tags always convey meaning, while non-semantic tags are used only for the design or layout elements on a web page.

One of the most important semantic tags are heading tags. There are 6 levels of headings: H1, H2, H3, H4, H5 and H6. H1s are the most important heading on a webpage, H2s are the next most important, H3s the next, and so on.

By surrounding text with semantic heading tags, the browser converts the text into headings of 6 different visual sizes. In modern web design, and to meet accessibility guidelines, we must choose our headings based on hierarchy rather than visual presentation.

Learn more about headings in the Headings section below.

---

Using WYSWIYG Editor Tools is Key

When a WYSIWYG editor is used to format headings, the text you select is being wrapped in the appropriate level HTML tag. This is why it’s critically important to use WYSIWYG tools to markup your text. If you were to bold your text or write it in all capital letters instead, the semantics of the text content would be completely lost. They’d be lost not just to your browser and how the heading looks on-screen, but to screen readers, assistive devices, and even the search engines that visit your page. This same concept can be applied to the other semantic markup elements that are covered below.

---

Semantic Markup vs. Visual Presentation

The website environment you’re working in — that is, the theme, styling, or templating that you are using — will impact the look of headings and other semantic elements. In many cases, styling options may be unavailable to you or locked out.

You may find that choosing hierarchically correct formatting creates content that looks visually poor due to issues with sizing or spacing. We encourage you to reach out to your web developer to come to a solution for any visual problems that arise, as it’s tremendously important to retain correct semantic and hierarchical formatting for accessibility purposes. 

Lists

---

Beware of bulleted list imposters

Can you tell the difference between a semantically marked up bulleted list and a bulleted list imposter?

When you created a bulleted list within a WYSIWYG editor, it is marked up using the following HTML code:

If you created a bulleted list in Microsoft Word and then paste it into a WYSIWYG editor, the editor will automatically markup the list with this code.

If this list is copy/pasted back into a rich text application like a WYSWIYG editor or Microsoft Word, you’ve got a bulleted list imposter.

Headings

There are 6 levels of semantic headings that can be marked up: H1, H2, H3, H4, H5 and H6. Headings are ranked 1 through 6, with 1 being the most important, and 6 being the least important.

• Headings must be marked up as headings.
• Do not use all caps, bold or italics instead of heading tags.
• The title of your website should be the only H1 on the page. Your page title would typically be H2, followed by H3s for the titles of sections, and H4s, H5s and H6s for sub-headings within those sections.
• Headings are hierarchical. Do not skip headings from small to large (ex. H2 to H4).
• Headings must be selected based on hierarchy and not appearance.

In the following examples, each list item represents a heading on a page. Heading levels have been indicated after each. For demonstration purposes, headings have been visually sized and arranged into an ordered list to better show hierarchical relationships.

---

Examples of Nested Headings

Example 1: Heading Hierarchy (Small Website Landing Page)

• Applebin Farms (H1) (Website Title)
  • Welcome to Our Farm (H2)
  • What We Sell (H2)
    • Produce (H3)
      • Vegetables (H4)
        • Squash (H5)
          • Squash Varieties (H6)
      • Herbs (H4)
  • Workshops on the Farm (H2)
    • Lavendar Candles (H3)
    • Flower Arranging (H3)
  • Contact Us (H2)
    • Fonthill Farm (H3)
    • Welland Farm (H3)

Example 2: Heading Hierarchy (Large Website Page)

On larger websites with sub-sites, all 6 levels of headings are used more often.

• Niagara College (H1) (Website Title)
  • Health, Wellness and Accessibility Services (H2) (Sub-Site Title)
    • Health Services (H3) (Page Title)
      • Our Services (H4)
      • Visit the Health Centre (H4)
        • Make an Appointment (H5)
          • Missed Appointment Fees (H6)
        • Cancel an Appointment (H5)
      • Contact the Health Centre (H4)

---

Which level of heading should I use?

Use of White Spaces

White spaces are the use of keys on your keyboard — tab, spacebar, enter — to add spaces, tabs, and carriage returns.

• White spaces should not be used to format content.
• White spaces should not be used to add spacing within words.
• Do not add two spaces after sentences. This practice is dated and was used for typewriters, which used monospaced typefaces. Modern computer typefaces are proportional. Learn more about monospaced vs proportional fonts.

Use the layout options within your web authoring environment — like columns, or tables for tabular data — to lay content out.

Using white spaces incorrectly has wide ranging impacts, including:

• When white spaces are used to format content, assistive devices cannot read content in a meaningful way.
• When extra spaces are used after sentences, the creation of rivers of white space through blocks of text makes it difficult to read for users with dyslexia.

---

Examples of Criterion Failures

Columns of Text

The spacebar and enter button have been used to format content into a shopping list with columns in the example below. This is an example of what not to do.

Dairy      Bakery      Pantry
milk        bread        chickpeas
eggs       muffins     soup
butter     salt            pasta

Meat       Cleaning
steak       dish soap      

Notice that the spaces between the words above can be highlighted. These are white spaces. A screen reader has no concept of how this text is laid out and will read it line by line:

• Dairy Bakery Pantry milk bread chickpeas eggs muffins soup butter salt pasta Meat Cleaning steak dish soap

Spaces in Words

Do not add white spaces within words, for example: w e l c o m e.

Keep it Simple

Avoid using too many styles when creating and editing web pages. In most cases, theming and styling will be set in advance for website content editors authoring pages within a structured environment like a Content Management System. If it isn’t, we recommend that you follow these guidelines when creating web content:

• Use no more than 2 different fonts.
• Use standard fonts that are easy to read.
• If using a heavily stylistic font, use it sparingly, and make sure it’s legible on small screens and at small font sizes.
• If your web authoring environment allows you to change the colour of portions of text — don’t. If it’s absolutely necessary, only change a few words or a brief sentence, and be sure to check that it meets Colour and Contrast requirements. If you need to change the colour of text again on the same page, use the same colour that you did the first time.