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.