Data visulization that uses vertical bars to show discrete, numerical comparisons among categories.
Usage Guidelines
Every instance of a Bar Chart should use this component. Future versions of the progress bar will include more detailed meta information.
Features
Dependencies
None
Documents
The Single Axis Vertical Bar Chart uses vertical bars to show discrete, numerical comparisons, relationships and trends among categories.
Bars charts are distinguished from histograms because they do not display continuous developments over an interval of time.
A bar charts discrete data is categorical data. It answers the question of “how many?” in each category.
One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value.
The Vertical Bar Chart consists of a Plot Area and Chart Grid.
The Plot Area is labeled with a Plot Title, Vertical Axis Group Label and Horizontal Group Label.
The Horizontal and Vertical Axis values are identified by their Axis Labels.
The Plot itself is comprised a Chart Grid that is a series of lines called Ticks.
The vertical bars are called a Series and their values are known as Series Labels.
In order for screen readers to determine the Series values, a numeric needs to be assigned to the Series Labels.
This numeric value should be coded as an invisible link that only screen readers can “see” so that it does not clutter the data visualization for sighted users.
Here’s how a screen reader would read aloud and call out the Series Label as the user tabs through the Class Average Grade Distribution visualization:
“Class Average Grade Distribution. Grade Group. Zero to Fifty Nine. Number of Students. 19.”
The reader would then repeat this flow through to the end of the visualization.
In order for screen readers to properly read through the Vertical Bar Chart, the HTML 5 / Aria Landmarks must be coded appropriately.
The tagging flow should proceed in the following order:
The Horizontal and Vertical Axis values are identified by their Axis Labels.
Which would cause the screen reader to read aloud:
“Class Average Grade Distribution. Grade Group. Zero to Fifty Nine. Number of Students. 19”.
The reader would then proceed in the same manner and flow through to the end of the visualization.
Remember that the Series Label should be coded that that it is only visible to the screen reader.
Standard Color palettes should be used unless User Research identifies a rationale for an exception that mandates Custom Colors.
Standard Color palettes are identified and documented in the Colors Component.
In addition to demonstrating Value Amount for Categories with vertical bars, Custom Color can be applied to depict an additional information variable that quickly provides insight.
For example, color can quickly depict performance grouping.
Custom Color should only be applied when User Research identifies a rationale for an exception to the Standard Colors in the Color Component.
If a Custom Color does not immediately meet WCAG 2.0 AA guidelines, this should be mitigated by using a dark color stroke.
Custom Color should be validated by User Research before being applied to the Single Axis Vertical Bar Chart.
Initial version
Bar Chart