Content structure

Overview – Content structure

In order to understand a document, everyone depends on understanding its structure. Screen reader users need to build a mental model of the page, and are dependent on content authors to:

• identify, with the appropriate markup, any headings, menus, banners, paragraphs, lists, quotes, code, tables and other features; and,
• when writing instructions for understanding and operating content, identify items by their visible names

Common page structures

Define the basics of your page structure with the right HTML element for the job, aka using semantic markup. This is a partial list of structure-defining semantic HTML elements. Others -- such as lists, links, tables, forms and images -- are described elsewhere in this course

Articles

The HTML5 <article> element represents a complete or self-contained composition in a web page. Examples of articles include an item at a shopping site or a news article on a news site.

HTML

Code begins

<article> 
   <h2>Tooth Paste Classic</h2>
</article>
<article>  
   <h2>Tooth Paste Extreme</h2>
</article>

Code ends

Sections

The HTML5 <section> element marks a general region of a web page or an article. It is used for thematic grouping of content and should open with a heading.

If the <section> element is named (using aria-label, aria-labelledby or title attribute), it is identified as a Landmark.

HTML

Code begins

<section>
   <h2>Chapter 2</h2>
</section>

Code ends

Paragraphs

Use the paragraph element (<p>) to markup paragraphs of text, such as this one. The consistent styling of paragraphs improves text readability. It also gives users more control when customizing their view.

Quotes

Identifying a quotation helps clarify that the content is attributed to another author. Quotes can be marked up as inline or as blocks of text. Assistive technologies can convey to users where a quote starts and ends, which can avoid misunderstandings.

<p>The following is a definition on <cite>Page Structure Concept</cite> from W3 WAI.</p>
<blockquote>
   <p>Well-structured content allows more efficient navigation and processing. Use HTML and WAI-ARIA to improve navigation and orientation on web pages and in applications. </p>
</blockquote>

<p>Helen Keller said, <q>"Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world."</q></p>

Strong (bold) and em (italics) tags

STRONG and EM are semantic tags meaning the author wishes to provide emphasis, which is rendered as bold (<strong>) or italic (<em>) on a visual browser. The <b> and <i> elements should not be used.

The <strong> and <em> elements are often used to highlight words or phrases in a paragraph of text. For example:

Screen reader support for <strong> and <em> is weak.

Related WCAG resources

The description of the page structures is from the Web Accessibility Initiative (WAI) document: Content Structure (WAI) in the Page Structure Tutorial of the Web Accessibility Tutorials. Eric Eggert and Shadi Abou-Zahra. Contributors: The Education and Outreach Working Group (EOWG). Copyright © 2019 W3C® (MIT, ERCIM, Keio). Updated 27 July 2019 (first published April 2017). https://www.w3.org/WAI/tutorials/page-structure/content/

Abbreviations

The Canada.ca Style Guide requires that abbreviations be expanded on first use on the page, with the abbreviation accompanying the expansion, one or the other in brackets, e.g., “Employment and Social Development Canada (ESDC)” or “ESDC (Employment and Social Development Canada).”

Related WCAG resources

Page title

The page title is the first thing declared by screen readers on page load. Browsers display it in the page tab, in the back button history list, and as a bookmark name. The title can also appear in site maps, search results and link text. This one piece of information helps all users find content, orient themselves within it, and navigate through it.

Best practice for page titles:

• Ensure each web page defines its topic or purpose in a descriptive title.
• Set the title in a <title> element in the HTML <head> element.
• Optionally, identify the larger collection of Web pages after the page description.

<head>
   <title>Java developer - Job board - Company XYZ</title> 
</head>

Related WCAG resources

Orientation instructions

When phrasing instructions on where to find or how to use content, avoid descriptions that rely exclusively on being able to see or hear. Sensory characteristics of things on the page, such as their shape, color, size, visual location, orientation, or sound, is useless information to people with related sensory disabilities. The instructions "Read the review to the right" and "Click the red button, below" are both barriers since they rely on sensory characteristics. Instead, be sure to include a text label in the instruction and at the item of interest; for instance, "Read the review A Night at the Opera, to the right" and "Click the red Preview button, below."

Related WCAG resources