Components

Labels

Labels make it easier for users to understand data visualizations by using text to reinforce visual concepts.

Labels are traditionally used to label axes and legends, however, they can also be used inside of data visualizations to communicate categories, values, or annotations. Where possible, labels should be used instead of legends or tooltips to make it easier for users to understand data visualizations.

Chart and Graph Labels

Data Labels

Data labels are applied directly to elements inside of a visualization to show the value of a datapoint or the category of the data. When using data labels, you can omit the corresponding axis to reduce redundancies.

When using data labels for categories, such as in a line graph, you can omit using a legend as this is the prefered method for representing categorical data.

Failed Example

Why it Fails

While it is acceptable to place text labels inside of visualization elements, the text color must contrast the background element enough to meet Section 508 guidelines. For more information, refer to the color accessibility guidance.

Preferred Example

Why it Meets the Requirements

In this example, the background color has been changed to meet the minimum contrast ratio when paired with white text. Alternatively, text elements can also be displayed just outside of visualization elements.

Annotations

Annotations can be used to help tell the story of a data visualization. Before choosing to use annotations, make sure they do not reduce a user’s ability to understand the data inside of your data visualization.

Typography

Labels in charts and graphs should be displayed in sentence case. Sentence case is a type of letter casing, like uppercase or lowercase, where only the first word and proper nouns are capitalized.

Example: Sentence Casing vs. Other Casings

Under 5 years – Sentence case
Under 5 Years – Title case
under 5 years – Lowercase

Map Labels

Depending on the type of map being used, labels may or may not be necessary. For example, a United States-based thematic map may not need labels if the map is showing general trends.

Labeling States, Territories, and Districts

When labeling states, territories, or districts in a United States-based map, it is important to be consistent. For small format or page-sized maps, the 2-letter USPS abbreviation is preferred. Each label should be easy to ready without interfering with the map’s content.

Example: Label for Washington, D.C.

DC – USPS Abbreviation
D.C.
Wash. D.C.

Styling Map Labels

When labeling different geographic area types in a map, try using different fonts and font styles, such as bold, italics, color, size, and casing (such as uppercase or sentence case). Using identical typography for different geographic labels may result in users confusing different types of labels.

Label 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.

To ensure your labels are 508 and WCAG 2.0 AA compliant, ensure your labels adhere to the typographic and color guidance outlined in their respective components and follow the guidance below for web-based visualizations.

Label Fallbacks for Web-based Visualizations

Static Images

Labels should be inserted into images as comma-separated key value pairs (i.e. "Lumber: 10%, Coal: 15%") using the aria-label 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 desc element may be used by including data labels as comma-separated key value pairs (i.e. "Lumber: 10%, Coal: 15%").

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 data labels inside the aria-label attribute using comma-separated key value pairs (i.e. "Lumber: 10%, Coal: 15%").

Tabular Alternatives

In addition to the above methods, tables may also be included as a fallback method for representing data belonging to a data visualization.

Label 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

Recommendations

Recommended