Skip to content

Latest commit

 

History

History
90 lines (71 loc) · 5.86 KB

index.md

File metadata and controls

90 lines (71 loc) · 5.86 KB
Raw
layout title permalink nav_order
home
Welcome
/
1

Welcome!

These guidelines highlight best practices for creating clear and accessible data visualizations. They include guidance on the data visualization process, tools, and accessibility best practices. These guidelines were developed for Connecticut state employees who want to visualize their data.

{: .note-title }

{: .opaque } 💡 What is data visualization?

Data visualization is the representation of information and data in a visual format such as charts, graphs, maps, etc. Data visualization makes it easier for people to quickly understand complex ideas in data and can give us a quick "at-a-glance" understanding of trends or patterns.

{: .note-title }

{: .opaque } 💡 What is accessibility?

Accessibility (also referred to as a11y) is the practice of making your content usable by as many people as possible. MDN Web Docs{:target="_blank"} adds: "You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances."

We should all prioritize accessibility from the start of our data visualization process and should consider hearing, motor, cognitive, and visual accessibility. Use these guidelines as a starting place for designing accessible data visualizations.

How to use these guidelines

These guidelines include a high-level overview of the steps for designing data visualizations, as well as more detailed guidance on accessibility and equity in data visualization. The sections are outlined below as well as in the navigation panel to the left.

Data visualization steps

  1. Define your goal
  2. Know your audience
  3. Identify the data you want to highlight
  4. Match your story with a chart type
  5. Choose a software program
  6. Design your chart

Accessibility

Data

  1. Provide an accessible table format
  2. Use familiar data visualizations

Color

  1. Don't use color as the only way to convey information
  2. Ensure that there is enough contrast between colors
  3. Choose colorblind friendly color palettes
  4. Use white space

Text

  1. Provide a text-based equivalent for every viz
  2. Use alt text to describe all non-decorative visuals
  3. Use plain language
  4. Ensure text is readable
  5. Use meaningful labels and titles

Interaction

  1. Make your visualizations keyboard-accessible
  2. Ensure the keyboard focus indicator is visible
  3. Check that the tab order is logical
  4. Don’t require interactions to access key information

Testing

  1. Test your viz with a screen reader
  2. Test for low vision
  3. Test on mobile

Equity

  1. Equity and data visualization

Get started!

[Data visualization](/data-visualization-guidelines/data_visualization/data_visualization_steps){: .btn .btn-outline } [Accessibility](/data-visualization-guidelines/accessibility/intro){: .btn .btn-outline } [Equity](/data-visualization-guidelines/equity){: .btn .btn-outline } [Resources](/data-visualization-guidelines/resources){: .btn .btn-outline }

Get in touch!

This resource is maintained by the Data and Policy Analytics team in the Office of Policy and Management. We will continue to develop the Data Visualization Guidelines as a resource for Connecticut state agencies.

Let us know what other information you’d like to see included in this resource by emailing dapa@ct.gov or writing a message in the Open Data channel{:target="_blank"} in Microsoft Teams.

Connecticut state employees can request to join the Open Data channel using this form{:target="_blank"}.