Components
Titles
Titles give users a clear overview of what a data visualization is about.
In addition to a traditional title element, data visualizations can also contain subtitles and axis titles to further clarify the purpose of a data visualization to users.
Title
Titles should be present on all data visualizations and contain no more than two lines of text. A title should broadly describe what is contained in a data visualization without identifying any trends or highlights in the data.
Titles should appear above a visualization or as the first element directly adjacent to it.
Subtitle
Subtitles can be used to describe any trends or highlights in a data visualization. Subtitles can also be used to indicate the unit of measurement if preferable to an axis title. While subtitles are optional, their presence helps to clarify the purpose of a visualization to users.
Subtitles should appear directly below the Title of a visualization.
Examples
Acceptable Example
Age in the United States
Why it’s Only Acceptable
While the title is short and to the point, it doesn’t reveal much about what’s inside the data visualization. This title could be paired with a subtitle to contextualize the data visualization more.
Good Example
Age in the United States
Older adults are projected to outnumber children by 2035.
Why it’s Better
Now that the title has been paired with a subtitle, users will better understand what the data visualization is trying to communicate.
Title Accessibility
The WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone. WCAG 2.0 AA conformance is required by the Revised 508 Standards, which means that conformance to these guidelines is a requirement for all web-based data visualizations produced by the U.S. Government.
Conformance to these guidelines can be achieved by being as descriptive as possible in your titles, per the guidance above, and by providing alt text fallbacks inside of your data visualizations.
Title Fallbacks for Web-based Visualizations
Depending on the format of your data visualization, title fallbacks for screen readers can be included in a number of ways:
Static Images
Title and subtitle content should be inserted into images using the
alt attribute of the img tag.
SVG
SVGs (Scalable Vector Graphics) are a type of graphic that can be displayed
in one of two ways: as a static image or inline. When using an SVG inline, a
title element should be included containing the
visualization’s title. A desc element may also be added that
can contain the visualization’s subtitle and description.
Canvas
Unlike SVGs, canvas elements are rendered using Javascript and contain no
HTML elements inside. Canvas elements accept a limited number of attributes,
so we recommend including a visualization’s title and subtitle content
inside the aria-label attribute.
Title Fallbacks for Documents and Presentations
Did you know that documents and presentations must also be 508 compliant? Similar to the guidance for web-based visualizations, documents and presentations support alt-text fallbacks for static images and interactive elements.
For guidance on creating 508-compliant documents and presentations, refer to Section 508’s guide for creating accessible electronic documents.
Guidance
Requirements
Always
-
Include a title with your data visualization.
-
Write a user-friendly title that tells people what your data visualization is about.
-
Place subtitles directly below the title when a subtitle is included.
Recommendations
Recommended
-
Include a subtitle to give users with more context about the data visualization.
-
A title should contain no more than 2 lines of text or 8 words.
-
Place titles directly above or immediately adjacent to your data visualization.