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/
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
- Mozilla Firefox (v67) & NVDA (2019.1.1): SVG <title> and <desc> tag content is read as expected.
- Google Chrome (v74) & NVDA (2019.1.1): SVG <title> and <desc> tag content is read as expected.
- Internet Explorer (v11) & NVDA (2019.1.1): SVG <title> and <desc> tag content is read as expected.
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)
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
- Mozilla Firefox (v67) & NVDA (2019.1.1): Individual Bars are Keyboard (Tab) Navigable and Screen Readers are able to access
aria-labelledbyvalues, but thearia-labelledbyvalues for the entire SVG graph also get read for each focused data point.- Note: The
aria-labelledbyvalues for the entire SVG graph also get read for each focused data point. This added content confused what is meant to be communicated, rendering this implementation ultimately ineffective.
- Note: The
- Google Chrome (v74) & NVDA (2019.1.1): Individual Bars are Keyboard (Tab) Navigable and Screen Readers are able to access
aria-labelledbyvalues- Note: The
aria-labelledbyvalues for the entire SVG graph also get read for each focused data point. This added content confused what is meant to be communicated, rendering this implementation ultimately ineffective.
- Note: The
- Internet Explorer (v11) & NVDA (2019.1.1): Individual Bars are Keyboard (Tab) Navigable and Screen Readers are able to access
aria-labelledbyvalues, but thearia-labelledbyvalues for the entire SVG graph also get read for each focused data point.- Note: The
aria-labelledbyvalues for the entire SVG graph also get read for each focused data point. This added content confused what is meant to be communicated, rendering this implementation ultimately ineffective.
- Note: The
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
Testing Results
- Mozilla Firefox (v67) & NVDA (2019.1.1): Individual Bars are Keyboard (Tab) Navigable and Screen Readers are able to access
aria-labelledbyvalues. The value of the<figcaption>get announced as keyboard (tab) focus enters the SVG. - Google Chrome (v74) & NVDA (2019.1.1): Individual Bars are Keyboard (Tab) Navigable and Screen Readers are able to access
aria-labelledbyvalues. The value of the<figcaption>gets announced for each keyboard focused data point within the SVG. - Internet Explorer (v11) & NVDA (2019.1.1): In progress.