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 defining key findings.
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 our gallery.
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 choropleth maps. 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.
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.
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.
This allows those using a keyboard to know where their cursor is and which visual is selected. Learn more about keyboard focus indicators.
Avoid using too many decorative shapes to the point where they are distracting.
Ensure that you can navigate and get all key information using a screen reader. Ensure the alt text reads any keyboard instructions needed to access the visual or data.
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 with the Windows Magnifier to see how your dashboard will be viewed by users using a magnifier tool.
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 new text box feature for dynamic text.
Power BI tip: Learn how to update tab order in Power BI.
Power BI tip: Power BI dashboards typically have a thin black focus indicator. Use our template with the light grey background. Do not use dark dashboard backgrounds, because the black focus indicator will not contrast sufficiently.
Power BI note: Unfortunately, Power BI public dashboards do not support translation at this time.
When formatting your visuals, consistency and accessibility is critical.
Much of the content below was taken directly from these two resources:
Meagan Longoria's Power BI Accessibility Checklist
Microsoft article on how to Design Power BI reports for accessibility
No font should be smaller than 12 pt.
Power BI tip: All fonts are built into the template.
Use Segoe Semibold size 15 for visual titles.
Segoe Semibold size 14 for axis titles.
Segoe UI size 13 for all other text. All font must be size 12 or larger.
Segoe UI Bold 35 for cards
Titles on each graph or data visualization are important accessibility features that orient a user. Add descriptive, purposeful titles to charts. Avoid using acronyms or jargon in your report titles.
We recommend using x-axis titles on all your charts. Make the title descriptive. For instance, if your chart is displaying data over time, try to describe how the data is mapped to a date. So the axis title may not be “Date”, but rather, “Date of incident”, “Date test was collected”, etc.
The visual title of your chart should be descriptive enough that a y-axis (value axis) title is not needed. However, if you do need the additional detail of a y-axis, add one.
Power BI tip: You can make a visual’s title dynamic by creating a measure that concatenates your title text and a specific value. For example, this COVID-19 cases chart dynamically tells you the current number of new cases
Beware of over-using data labels and cluttering your graph. A data label should not obscure the chart's visuals from the reader.
If labels are obscuring the visual, it may be best to not have labels and instead rely on the table below to reveal the data points.
Being overly precise can obscure trends. Being overly precise might mean showing unnecessary decimals or showing numbers in the millions/billions that really should be rounded. There shouldn’t be decimals shown on your public dashboards in most cases.
There are exceptions to this. For instance, if you are showing percentages and want to show that a certain percentage isn’t 0, but rather .3 or .4, that may be fine. But in those cases, only one decimal should be used.
Avoid any movement or video/audio that automatically plays.
If critical information is only accessible through an interaction or click, re-organize the dashboard. Rearrange your visuals so they are pre-filtered to make the important conclusion more obvious. Clicking should not be needed for any key information.
Test any interactions to ensure everything works with a mouse and with a keyboard.
Tooltips are not accessible to keyboard users in Power BI. In addition, users with motor issues may have difficulties accessing them.
Only add tooltips to charts to reinforce information that is also accessible in another way.
Only keep interactions (where one visual filters another) if it is helpful and clear. Most interactions add unnecessary complexity and should be turned off.
Typically, you want to be able to select a point from a graph and have the table filter. And likewise, you want to be able to select a cell in a table to see the point highlighted in the graph.
Power BI tip: Turn down the density of labels:
Power BI tip: In Power BI, beware of play axis with auto-play. This is also relevant for mapping because some mapping visuals (like Mapbox) auto-zoom by default. Turn this off. Set the zoom, latitude, and longitude according to the instructions in the Power BI template file.
Power BI tip: In Power BI, we allow the visual to filter the table, but we turn off the connection from the table to the visual. Learn more about interactions in Power BI.
Analysts and developers should consider hearing, motor, cognitive, and visual accessibility. This is in addition to key usability considerations like dashboard translations.
While we include a few key points in this section, there are much more thorough resources:
See more in the resources and links section.
Use our standard color palette, but don't rely solely on color.
Color can be an important part of the design of your dashboard. However, in a data visualization, color shouldn’t be relied on as the only way to distinguish data.
This guidance draws heavily on several excellent articles on color and data viz.
The color scheme is the standard if you are embedding dashboards in SF.gov. This is built into the Power BI template.
We do not recommend customizing the color profile. If you need to customize the color template, you will need to ensure the combinations are accessible and colorblind friendly. Ensure color contrast between title, axis label, and data label text and the background are at least 4.5:1. Use accessible colors to check color contrast for background/font. Use this contrast checker and make sure colors pass WCAG standards. Use the Viz Palette tool to test colors using different color deficiency lenses.
Power BI tip: Colors are built into the template. Do not use the lighter shades of the colors. Only use the primary colors, and darker. The lighter colors do not contrast enough with white.
Avoid using color (including conditional formatting) as the only way of conveying information. Instead, use other symbols and markers to differentiate data. You may also need to split a visual into multiple visuals if you find you are relying on color in a legend. Here is an example using shape and color:
You may want to use colors to show different categories, to shade data sequentially, or to show data centered around zero converging. No matter what, limit the number of different colors within a visual and use color sparingly to highlight key data.
If you are tempted to use several colors in one visual (more than 3), you may need to explore other types of visuals. For example, converting your visual to small multiples can be more accessible and does not solely rely on color.
Put your URL into this color checker. You could also use coblis to ensure all elements are visible.
Alt text (alternative text descriptions) describes the appearance and function of visuals and images on the report page to screen reader users.
Report authors should add alt text to every object that conveys meaningful information on a report. Most visualization programs like PowerBI and Tableau have the ability to add custom alt text to dashboard elements.
Alt text should include information about the insight that you'd like the report consumer to take away from a visual.
If you used any images or shapes to call out data points, use alt text to explain what is being called out.
Before writing alt text, test your dashboard with a screen reader to find out what is read automatically.
In Power BI: screen readers read out the title and type of a visual, so developers just need to add a description and keyboard instructions.
"Chart type" + showing + “what’s it showing”. +
Where “purpose of looking at chart”. +
"Keyboard instructions", like “Press control + right arrow to enter the chart. Press enter to read specific data points. Use escape to exit the visual.”
Avoid using explicitly spatial language like "higher bars" or “darker colors”. Use “higher values” or “higher case rates” instead.
Example: A bar chart of San Francisco COVID-19 cases by sexual orientation. Higher values show more cases associated with a specific orientation. Press control + right arrow keys to enter the chart. Press Enter key to select data. Escape to exit the visual.
Use the Hemingway editor to ensure the text is less than 5th grade.
When helpful, use conditional, dynamic alt text so that any key data values are read aloud for users.
Dynamic alt text ensures that screen readers have easy access to key information.
Be careful with dynamic alt text when there is a filter on the page. With a filter, you will want to test the dashboard and ensure the alt text makes sense within the filter environment.
All cards should have dynamic alt text. This enables users to easily get the value without having to go inside the visual.
Basic Pattern: Measure Title = “static text” & [DAX measure] & “static text”
For example: Alt Text for Card = "Card showing recent 7-day rolling average new covid cases is " & round([Most recent rolling average],0) & " new cases, as of " & LASTDATE('Date'[Date]) & ". Press Control + Right Arrow to enter the card. Use Escape to exit."
Enter this into the alt text by using the fx button:
In Power BI, the title and type of chart is automatically read aloud to users using a screen reader (the first part of the formula above). Don’t repeat this info. Instead, add what isn’t read aloud.
Make sure your alt text is less than 250 characters (the limit in Power BI).
The following are example alt texts you would create for each type of visual (cards should use dynamic alt text to read in the card value):
Visual:
Static: The number of new cases shows how much the virus is spreading in San Francisco. Press Control and Right Arrow keys to enter the chart. Use Enter to select a data point. Use Escape to exit.
Dynamic: The number of new cases shows how much the virus is spreading in San Francisco. Most recent average is [Measure of new cases] new cases. Press Control and Right Arrow keys to enter the chart. Use Enter to select a data point. Use Escape to exit.
Table: Use Control and Right Arrow keys to enter the table. Use arrow keys to navigate around the table. Press the Enter key to select a cell. Select a column header to sort by that column. Escape key to exit.
Filter: Slicer filters the dates shown on the line chart and table. The default selection is all dates with data. Use Control + right arrow keys to enter the filter. Use Spacebar or Enter keys to select items. Use Escape to exit. Charts will update.
Card: Card showing cumulative, or running total, confirmed covid cases. Most recent running total is [Cumulative Cases] cases, as of [max date]. Press Control + Right Arrow to enter the card. Use Escape to exit.
For text boxes, put the text in the alt text box as well.
Button:
Selected radio button entitled “Cumulative totals”. This button is already selected, the dashboard is showing cumulative totals of covid cases and deaths by gender.
Unselected radio button entitled “Trends over time”. Press Enter key to select this view and dashboard will update to show trends over time in covid cases by gender.
Power BI tip: To do this in Power BI, create a measure that concatenates your alt text language with a measure value.
Tables are included in all dashboards to enable users have more than one way to access data. Format your tables with the user in mind, making all data easy to access and understand.
They should have a 0 or explain they are missing. Blank cells are confusing and unclear.
Power BI tip: To force a zero to appear add a “+ 0” to your measure. Sum of Sales = Sum(Sales[SalesAmt]) + 0
This may vary based on your data. For tables showing data over time (so each row is a date or month), sort the table to have the newest or most recent values at the top. Recent data is likely most relevant for your users.
A table below a map should be sorted by the measure or variable that is shown in the map. For example, a table below a choropleth map showing population density should sort the table by population density.
If your table includes dates, they should always be rows (each date is a row). In many cases, your table will match your cleaned data structure.
While “wide” data can be more intuitive for users, sometimes a wide table is difficult to use. Therefore, long data is acceptable if the wide table doesn't fit within the template. For example, while this wide table of data by race may be intuitive, the long version is also acceptable because the wide format may not fit on most dashboards.
Data bars within tables are typically difficult to ensure visibility for most users.
If you do implement data bars, you will need to check the color contrast to ensure that the bar contrasts sufficiently with the background, and the data label contrasts sufficiently with the bar. This is difficult to do well.
