Michael.Mistak.org

SVG Bar Chart (Work In Progress)

Example 1: Simple Bar Chart with Minimal Text Alternative (via aria-labelledby / <title> / <desc>)

Originally from CSS-Tricks: https://css-tricks.com/how-to-make-charts-with-svg/

A graph that shows the number of fruit collected
A bar chart showing information 4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons 4 apples 8 bananas 15 kiwis 16 oranges 23 lemons

This chart, as expected, will simply output the date in the <title> and <desc> tags as it is written due to being programatically associated via use of the aria-labelledby attribute. In this case the expected output is "A bar chart showing information 4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons". While this may be considered by some to be an appropriate text equivalent in the strictest sence, it should be abundantly clear that this text alternative does not match the intent of the individual that decided that a visual made a more appropriately compelling form factor for telling the intended story. If the simple text recitation of this data adequately communicated the intent of an author we would not need charts or graphs. All such data would instead be communicated in a narative form or via data tables.

Testing Results

Example 2: Simple Bar Chart with Attempt to Allow Keyboard Navigation / Basic Parsing of Data (adding focasable / tabindex & aria-labelledby to individual bars to Example 1)

A graph that shows the number of fruit collected
A bar chart showing information 4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons 4 apples 8 bananas 15 kiwis 16 oranges 23 lemons

Unfortunately using this implementation, each focusable data point gets the desired data point value, but also reports the SVG-wide <title> and <desc> values.

Testing Results

Example 3: Simple Bar Chart similar to Example 2, but where the role and aria-labelledby attributes have been removed from the base <SVG> Tag

A graph that shows the number of fruit collected
A bar chart showing information 4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons 4 apples 8 bananas 15 kiwis 16 oranges 23 lemons

Testing Results