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 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.
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.
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 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.
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
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.
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.
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
Labels should be inserted into images as comma-separated key value pairs
(i.e. "Lumber: 10%, Coal: 15%") using the
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%").
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%").
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.