Alt tags are what a screen reader will say instead of the image. This is important for not only web materials, but charts that are in pdfs and charts that are placed as images into word documents.

Screen readers read all of the text in an alt tag without allowing users to speed up, or skip. Make sure the information in the alt tag is descriptive but succinct.

Alt tags should include:

• One sentence of what the chart is, including the chart type for users with limited vision who can see part of it, but may not be able to have a full understanding of the graph. Example: “Bar chart showing complaints by type for New York metro area, New York state and the United States.”

• A link to a CSV or other machine-readable data format with the data so people with impaired vision can tab through the data with a screen reader. The data should have descriptive column labels and provide a link.

See the color section of these data visualization guidelines.

When using charts that show percentages, users expect things to add up to 100%. If they don’t it undermines the integrity of the visuals by leaving the user with missing pieces.

To remedy this effect add a note at the bottom to explain the missing data.

Example: Percentages may not sum to 100% due to rounding.

Use notes to add in other caveats around the data like if it was taken from a specific time period.

Example: Percent change is based on a 3 month period (October-December) and compared to the previous year.

Example: Company-level information should be considered in context of total complaints, company size and market share in a given geographic area.

Including the source of the data in the visualization is a must. It adds credibility and transparency to the graph. The visualization could then be replicated using the mentioned sources which adds credibility.

If you’re unable to link to the source, link to a spreadsheet of the data used to create the visualization.

If your user group is general (i.e. the American public), stick with basic and most common chart types that people can easily understand. Adding emphasis and labels will help highlight the point of the visual and tell the story of the information. Consider using multiple simple charts to step the user through the data, rather than one big complex visualization.

If your data visualizations are designed with a specific audience in mind, take into consideration their familiarity with the data, visualization types, and the terminology used to label and describe data. More complex stories might necessitate more complex visuals, however, this does not mean it should lack emphasis.

All data, labels and titles for data visualizations should be in a sans-serif font. The preferred choices for fonts are: Avenir Next over Arial, and Arial over another sans serif font.

While serif fonts are generally easier to read for long blocks of text, data visualizations rarely include long blocks. The lack of serifs, especially on numbers, helps cut down on the amount of lines and visual clutter. This lack also increases the legibility of small text by eliminating thin serifs.

Titles should be as descriptive as possible to give users a sense of what the chart will be about. This not only provides users a framework of what they are looking at, but also helps with 508 accessibility and decreases the amount of text necessary in alt tags.

Wherever possible, charts should not include a key, and data should be directly labeled. This reduces the cognitive burden for the user so they are not hunting for labels and trying to connect colors to the data.

All variations use these base styles and guidelines unless otherwise noted.

Title

• Gives an overview of what the graph is about
• Uses the h3 heading style
• 2 lines of text maximum

Subtitle

• Explains the general trends of the graph and what that means, including why it is important
• Uses the body text paragraph style
• 3 lines of text maximum

Notes

• Describes any caveats or inconsistencies with the data such as explaining why numbers do not add up to 100% or the specific dates that the data is pulled from

Data source information

• Provides a link to the URL of a spreadsheet or to the source of the data
• Important to include for trustworthiness and validity
• Allows people to dive deeper into the data and explore the nuances for themselves or to replicate the visualization

Figure number

• Uses the Figure number style (all caps)

Generally presented as interactive visualizations rather than static images.

Figure number

• Uses the H5 heading style

Uses standard styles, no figure number.

CFPB logo

• Include the CFPB logo; helps with identification and determining origin if the graphic gets re-used

We use specific color combinations to create accessible, on-brand data visualizations. View our data visualization color palettes.

We also have a set of guidelines around the accessible use of color in both web and print. View color accessibility guidelines .

Good visual hierarchy allows the user to focus on the most important piece of content first and work their way into the graphic. The title and subtitle should be the first thing that the user reads when viewing the chart to give them context of what the chart is about. Therefore, they should be the biggest thing on the chart (see the Data visualization chart components section).

Use the squint test (take a step back from your graph, squint your eyes, and say what you see first, second, third…) to get a sense of what your users will automatically identify first.

Goals, trends, and important outliers should be highlighted to help the user discern what is going on with the data. Labels will help the user understand the data and make sense of what it is showing.

When dealing with projected or predicted data, the predicted data should be deemphasized. Use a color change to a lighter tint or dashed outline for bar charts, a dotted line for line charts, and a label explaining what part of the data is predicted or projected.