πŸ“Š
Public Data Visualization Guide
  • Data visualization standards for SF.gov
  • Why do this?
    • Now you try!
  • Thoughtful design
  • Accessibility
    • Some basics
    • Color
    • Formatting Data Visualizations
    • Formatting tables
    • Alt Text
  • Mobile view
  • More resources
  • Analyst checklist
  • Using the Power BI template: A step-by-step guide
  • Data management
  • Webpage content for data pages
  • Publishing Power BI dashboards to SF.gov
  • Resources and links
  • Gallery of dashboard transformations
Powered by GitBook
On this page
  • Ensure that the data message in a visual is accessible in 3 ways: chart, table, sentence.
  • Choose data visualizations that are familiar to viewers.
  • Do not put text or explanatory content within the dashboard where it cannot be translated.
  • Curate the tab order to provide intentional experience for screen readers.
  • Ensure the keyboard focus indicator is easily visible.
  • Minimize use of decorative images and shapes.
  • Test your dashboard with a screen reader as you develop the dashboard.
  • Test for low vision.
  • Translate your dashboard.

Was this helpful?

Export as PDF
  1. Accessibility

Some basics

PreviousAccessibilityNextColor

Last updated 3 years ago

Was this helpful?

Ensure that the data message in a visual is accessible in 3 ways: chart, table, sentence.

We want to ensure that all users can learn and interact with data. Often one visual may be great for some users, but inaccessible for others.

The best case scenario here is to have a text-based equivalent of every data visual. This text summarizes and explains the visual and key findings. Learn more about the importance of .

At the minimum, include a table of the summarized data on your dashboard below the figure(s). Test your tables with your keyboard and a screen reader. Find some examples of tables in .

Choose data visualizations that are familiar to viewers.

In general, beware of overly complicated graphs. The increase in cognitive load for users trying to decipher a new type of visual may not be worth it.

Test your visuals to ensure everything is large enough to view and click. Tiny shapes or widgets are difficult to click.

Aim to use vetted, widely-used visuals. Smaller, homegrown, custom visuals may not be reliable enough for public reporting (or may require additional purchase).

For more guidance, check out these tools:

Maps are particularly challenging and should be tested for accessibility and color contrast.

  • Power BI tip: For point maps, feel free to use Power BI’s Bing map - but ensure the color of your points contrasts sufficiently with the light grey background. Using the dark blue is best.

  • Power BI tip: Visuals change often. In Power BI, we recommend using the built-in visuals. Custom visuals are less reliable and often lack robust accessibility features and are not appropriate for publication.

    • The only exception to this rule is for . For choropleth maps, the Mapbox mapping visual is the best option in Power BI, though it does come with specific challenges. The Power BI template includes several examples and several important specifications for these maps.

Do not put text or explanatory content within the dashboard where it cannot be translated.

Your dashboard should contain data visualizations and any necessary supporting widgets (like filters or slicers). All other supporting content, like explanatory information or data notes, should be embedded into the webpage directly. It should not be inside your dashboard where it is harder for translations and screen readers to access.

The only text that may be included on the dashboard is the name of the publisher β€œCity and County of San Francisco” and information on the refresh date or schedule.

Curate the tab order to provide intentional experience for screen readers.

The tab order is the order that visuals are highlighted for keyboard users and screen readers. Make sure figures are read in the same order a sighted user would read the figures.

Filters must be before the visuals they impact in the tab order.

Make sure any decorative shapes or images are marked as hidden in tab order, so they aren't announced by a screen reader.

Ensure the keyboard focus indicator is easily visible.

Minimize use of decorative images and shapes.

Avoid using too many decorative shapes to the point where they are distracting.

Test your dashboard with a screen reader as you develop the dashboard.

When embedding Power BI dashboards onto SF.gov, the keyboard instructions appear automatically when a user tabs through the website.

Some of the most popular screen readers:

Test for low vision.

Translate your dashboard.

Best practice is to ensure that dashboards are translated at the same time a user selects the language of the page.

Power BI tip: Use the for dynamic text.

Power BI tip: Learn how to .

This allows those using a keyboard to know where their cursor is and which visual is selected.

Power BI tip: Power BI dashboards typically have a thin black focus indicator. with the light grey background. Do not use dark dashboard backgrounds, because the black focus indicator will not contrast sufficiently.

Ensure that you can navigate and get all key information using a screen reader. Ensure the reads any keyboard instructions needed to access the visual or data.

(for Mac)

(plugin for Google Chrome)

Test with the to see how your dashboard will be viewed by users using a magnifier tool.

Power BI note: Unfortunately, Power BI public dashboards do not support translation at this time.

πŸ“Œ
πŸ“Œ
πŸ“Œ
defining key findings
our gallery
https://www.data-to-viz.com/
https://datavizproject.com/
choropleth maps
πŸ“Œ
new text box feature
πŸ“Œ
update tab order in Power BI
Learn more about keyboard focus indicators.
πŸ“Œ
Use our template
alt text
NVDA
JAWS
VoiceOver
Microsoft Narrator
ChromeVox
Windows Magnifier