Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Use Meaningful Structure

Unit 1: Use Meaningful Structure

Learning Objectives

After completing this unit, you’ll be able to:

  • Summarize the importance of accessible content.
  • Describe some structural components that make content more accessible.

Why Is Writing with Accessibility in Mind Important?

Approximately 20% of people have some type of vision loss; are deaf or have a partial hearing loss; or have physical, speech, cognitive, or neurological disabilities. When you author content, such as product documentation or online training materials, it’s imperative that the meaning and value you provide is available to all users, regardless of their individual capabilities. 

To ensure that the same level of meaning is provided for all users, embrace accessibility content writing guidelines as you do for any set of design constraints. It is part of the challenge and impetus of creating amazing content.

The Importance of Structure

Properly formatted content paves the way for all users to get the most from your content. Proper formatting includes structural elements to organize information, which helps users quickly understand the scope of information on the page and facilitates keyboard navigation. Let’s explore how the following structural elements increase accessibility.

  • Headings
  • Lists
  • Tables
  • Link labels

The following information provides general recommendations. Your style guidelines may differ in some areas.

Headings

When there is a logical heading structure, users without vision loss can quickly scan content for titles or headings. And users with visual impairments can use a screen reader to list all the headings on a page to gain a holistic understanding of what is included. 

Headings also provide an outline of the content, which helps users understand a page’s hierarchy. This is especially beneficial for people with intellectual disabilities.

Keep in mind that good headings summarize the content underneath, but don’t include the complete content. If there isn’t more to say about a heading, consider other formatting for the content. 

Here are a few best practices to follow when using headings.

  • Use headings and subheadings to describe the content that follows.
  • Use headings and subheadings to break text into logical chunks.
  • Use only one level-one heading <h1> to provide the page’s title.
  • Headings should always be nested, consecutive, and formatted using heading levels <h2> through <h6>. When creating a new subheading, don’t skip heading levels.
  • Avoid excessive nesting. For example, limit most marketing content to heading levels <h1> through <h3>.

These additional style guidelines are also important to remember for headings.

  • Don’t create heading structure using Roman numerals, letters, or numbers.
  • Don’t use a different font or a larger font to create headings or heading structure.
  • Avoid heading-only content.

Let’s take a look at a few examples of using headings and subheadings to organize content.

Say you’re attending Dreamforce for the first time as a new Salesforce admin—how exciting! When you open your registration email, however, this is what you read. 

Welcome to Dreamforce! See the schedule for 2022—On Monday 11/14, Registration and Badge Pickup will be at Dream Forest at 12:00 PM to 6:00 PM. Registration and Badge Pickup will also be available at Garden Grove from 12:00 PM to 10:00 PM. Tuesday, 11/15, certification exams will be held at the Campground from 6:00 PM to 9:00 PM.

Was all that information difficult to understand? 

Now, let’s use heading and proper formatting to make the content more friendly to the reader. 

Dreamforce 2022 Schedule

Monday, 11/14

Registration and Badge Pickup

  • Dream Forest: 12:00 PM–6:00 PM
  • Garden Grove: 12:00 PM–10:00 PM

Tuesday, 11/15

Certification Exams

  • Campground: 6:00 PM–9:00 PM

With proper headings and sections, you can quickly determine the scope of information on the page, skip unimportant sections, and focus on items of interest. If you are looking for specific information, you can scan the headings to determine if the page has what you are looking for.

Lists

Lists are a great way to organize multiple points and help readers follow a sequence of steps. With properly structured lists, users can quickly identify information as belonging to a list, identify the number of items in the list, and easily identify where they are when performing steps. 

Here are a few best practices to follow when using lists.

  • Use a numbered list when the order of the list items is important.
  • Don’t make bulleted list items using indents, bold, symbols such as dashes or asterisks, or any other punctuation.
  • All lists, bulleted and numbered, should be structured as a list with the proper HTML tags.
  • Use concise bullet points instead of long or compound sentences.
Note

Note

Using bold text is OK to add extra emphasis, but shouldn’t be used as the indicator for a list item.

Let’s review this in action when we sign up for Dreamforce Sessions. It’s a new conference for you, so let’s review the instructions on how to register. 

On the Dreamforce Home page, select Schedule. On the Schedule page, select Register Now. Enter your name, mailing address, email address, and phone number, and then select Next. Select the sessions you plan to attend. Select Complete Registration. 

It’s hard to follow these steps because the instructions are organized in paragraph form. It’s difficult to remember where you were in the process, making it tricky to work through the steps. 

So what can we do instead? Let’s restructure these steps as a numbered list!

  1. On the Dreamforce Home page, select Schedule.
  2. From the Schedule page, select, Register Now.
  3. Enter your name, mailing address, email address, and phone number, and then select Next.
  4. Select each session you plan to attend.
  5. Select Complete Registration.

It's easy to recognize how the list improves the reader's ability to accomplish the task.

Tables

Tables are a great way to organize and display data. This table summarizes several key points to keep in mind to make sure that your tables are accessible.

Features of Accessible Tables

Table Feature

Purpose of Feature

Include a title and a brief summary or table overview preceding the table.

Screen readers use this information to describe the table for visually impaired users.

Ensure the header row or column (<th> element) and all header cells contain content. 

Empty header cells cause problems for users relying upon a screen reader.

Feature a single idea or piece of data.

Cells that contain a combination of different data types or ideas cause problems for users relying upon a screen reader.

Ensure cells do not span rows or columns.

Merged cells cause problems for users relying upon a screen reader.

Whenever possible, define cell widths in percentages (%) and not as absolute pixel widths. 

This can help reduce issues when tables are displayed on smaller screens.

Avoid defining cell heights. 

Defining absolute cell heights can result in content being truncated when users zoom in to make content larger.

Link Labels

Almost all content contains one or more links. Because screen reader users often choose to list the links on a web page, clearly and uniquely describe each link target. 

When you specify link labels:

  • Describe the link destination instead of providing the actual web address. The letters, numbers, and symbols in a typical URL are not helpful for screen reader users.
  • Avoid vague phrases, such as Learn more or Go here, which give no context for people who access links from a list.
  • Verify that there are no duplicate link labels on a page, unless you are intentionally sourcing link labels that refer to the same destination.
  • If a link is going to an external domain, use an external link icon arrow pointing outside of a container to indicate that to the user and specify alt=“opens in new window”.
  • For links that open in a new tab or window, let the reader know. One way to do this is to use link text such as: “XYZ link name [link opens in a new tab]”.

Let’s Sum It Up

Using structural elements, such as headings, lists, tables, and link labels, to organize and present information greatly improves the accessibility of your content. There are additional accessibility considerations that we discuss later, but addressing these basic principles ensures greater accessibility of your content to all users, including those with disabilities.

In the next unit, we discuss how to use language to increase accessibility of your content. 

Resources