When writing documentation and in-UI copy, make sure to use informative language and
semantic code for your titles and headings.
This is critical to your content organization and readability for those with and without
accessibility needs.
Headings should be short, high-level summaries of what to expect in an article or section.
Short summaries require less cognitive effort.
Headings should be understandable without additional context.
If the reader skips ahead in a document or interface, the headings should be clear enough
that the reader still knows what to expect in that section.
Keep your language action-oriented.
Some example of action-oriented headings include: “Get started with this feature” and “Store
your data on a server”.
Action-oriented doesn’t always mean your heading should begin with a verb but headings
should tell the user what they’ll learn or what action they should take in the section.
The way your content is structured is just as important as the content itself.
Visually, headings help our eyes navigate around a page.
But when considering accessibility, we should always write and design our content for more
than just visual needs.
Write semantic HTML.
Semantic HTML means that the HTML tags which surround your content correctly align with
the value of the content between the tags.
HTML Headings are ranked <h1> through <h6>. <h1> represents the title, or the most important
idea on the page, and the top section headings are <h2>s.
Sections can be divided further with <h3> headings, which can be divided with h4s and
so on and so forth.
When you write content in any content management system or digital document, it’s important
to prioritize heading format over visual aesthetics.
In other words, focus on function over fashion.
Screen readers and other assistive technologies rely on your content organization matching
the value of the content.
Let’s look at a real life example.
The Google Ad Manager help center has a short article about how to pre-populate data in
an audience segment.
This article is broken into two sections: one tells users how to create new audience
segments and the other section tells users how to update existing segments.
This article is short but difficult to scan.
We can make it easier for our users to skip to the instructions they need by adding the
appropriate subheadings.
We can improve this article by adding two section headings.
These sections have equal value, which means they should have equal semantic HTML.
I’ll add two <h2> headings, as the title uses the <h1> value.
If you look at the visual design of this article, there’s a clear difference in content organization.
Screen readers can also tell the difference, and help users navigate to the section that
they need.
Writing semantic HTML in a document is fairly straight-forward.
How do we think about product UI and semantic HTML?
Let’s take a look at another example.
Here's the Media Interface on the Google Home app.
What do you think is a heading in this UI?
What makes the headings good or bad?
Pause the video and take a moment to reflect.
In this example, there are three headings: “Play music”, “Listen on” and “Manage
your system”.
These headings are short summaries of tasks to help the user act.
These headings are:
Scannable.
They provide just enough context to help the person complete a task.
These headings are Short.
These headings exclude unnecessary words.
Filler words like “a” or “your” aren’t needed.
These headings are Action-oriented.
They are loaded with action keywords, like “manage” and “listen”
Meaningful semantic titles and headings set the right expectations for everyone.
In conclusion:
Remember to use concise and action-oriented language and
Always write semantic HTML.
Using the correct HTML values is more important than the visual appearance.
Visit goo.gle/accessible-content to learn more about this and other accessibility writing tips
tips.