This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines (Structured content)
Method: Visually Distinct
Platform
All
Technology
All
Summary
- Visually distinct headings help sighted users to more easily find blocks of content and understand the relationship between each block.
- Visually distinct headings can help users to maintain focus, can help them orientate, and help them restore context when it is lost.
- People with a language impairment, learning disability, and/or an impaired memory want layouts that help them follow and understand the content without getting overwhelmed.
How it solves user need
Rather than reading a page from start to finish, users scan content to understand if what they’re looking at is helpful to the task they’re trying to complete. Visually distinct headings help users to make quicker decisions on the usefulness of the section.
Outcome
This method supports the outcome Use visually distinct headings.
Detailed description
Although there is nothing stopping a designer or developer picking font sizes on whim, using a typographic scale to create a series of type sizes, line heights, and margins creates a feeling of connectedness in the components in a view. This, combined with well-chosen margins and font weight will make headings more visually distinct than their surrounding body text.
Creating whitespace that is visually closer to its related block of content than the preceding content provides a further visual clue to the relationship between the heading and its content. There should be more whitespace before the heading and less after it.
For plain text where markdown isn’t used, a heading is created by leaving two lines of whitespace before, and one line of whitespace after, a line of text.
Dependencies
None
Languages that use CSS for styling:
In CSS, size text using relative units such as rem and em for text sizing and margins. If a user scales their browser’s text size, text sized in relative elements will resize and still keep their visual connectedness. Line heights are unitless so that they are based on the size of the computed size of the text and will also adapt with any text resizing.
:root{
font-size:100%;
}
body{
font-size:1rem;
}
h1, .h1{
font-size:2.441rem;
font-weight:700;
line-height:1.25;
margin:0.8em 0 0.262em;
}
h2, .h2{
font-size:1.953rem;
font-weight:700;
line-height:1.25;
margin:1em 0 0.262em;
}
p{
margin-top:0;
}
Plain text
----- Here’s the end of a paragraph about something very interesting that you’re fascinated in and want to read more about. Here’s a heading to describe the next block of text Here’s the beginning of a new paragraph about something even more interesting than the previous paragraph that was, frankly, amazing. -----
Plain text with markdown
Markdown syntax can create headings that can be converted into multiple other formats. Because markdown documents are frequently converted into other formats, spacing is more important than purely plain-text documents. Headings in markdown should have one line of blank space before them and no space after them. The # symbol is used to create six levels of headings.
# Heading level one ## Heading level two ### Heading level three #### Heading level four ##### Heading level five ###### Heading level six ----- # An exciting document title Here’s the introduction to the document, hopefully with a summary to help readers understand if the contents will be useful to them. ## Here’s an interesting second-level heading This is the beginning of an interesting paragraph of text that you, dear reader, will hopefully enthuse about. -----
Atomic Tests
For non-plain-text views
Unit Tested: Headings
Method: Create a percentage of the headings within a view that are visually distinct.
Compare heading content with non-heading content. The size, weight, or spacing around headings should be larger than that of non-heading content.
Testing for plain text
For plain text documents that don’t use markdown, read the document and look for content that acts as headings. Check that there are two blank lines above the heading and one blank line after the heading.
Testing for Markdown
Markdown supports two different styles for headings, but only one style supports more than two levels of headings. For visual consistency, check that one style is used consistently in the document, for example: each heading starts with one or more # characters.
Markdown can also be tested using applications that support in-application markdown previews. Markdown, and a preview of the converted file, can be tested as the file is being written.
Holistic Tests
- Still to be developed. We will include this in a future working draft.
W3C Resources
- None currently documented.
Non-W3C Resources
- None currently documented.
Status
first draft