Accessible charts

README.md

Examples of accessible charts generated with Vega.

fruit.svg

<svg class="marks" width="444" height="264" viewBox="0 0 444 264" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(39,27)"><g class="mark-group role-frame root"><g role="group" aria-roledescription="group" transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h400v200h-400Z" style="fill: none;"></path><g><g class="mark-group role-axis"><g aria-label="x axis for Fruit represents values 🍎,🍏,🍌,🍐,🍋,🍊,🍇,🍉" role="graphics-object" aria-roledescription="axis" transform="translate(0.5,200.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" aria-hidden="true" style="pointer-events: none;"><line transform="translate(28,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(77,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(126,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(175,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(224,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(273,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(322,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(371,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" aria-hidden="true" style="pointer-events: none;"><text text-anchor="middle" transform="translate(28,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍎</text><text text-anchor="middle" transform="translate(77,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍏</text><text text-anchor="middle" transform="translate(126,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍌</text><text text-anchor="middle" transform="translate(175,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍐</text><text text-anchor="middle" transform="translate(224,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍋</text><text text-anchor="middle" transform="translate(273,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍊</text><text text-anchor="middle" transform="translate(322,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍇</text><text text-anchor="middle" transform="translate(371,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">🍉</text></g><g class="mark-rule role-axis-domain" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,0)" x2="400" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" aria-hidden="true" style="pointer-events: none;"><text text-anchor="middle" transform="translate(200,30)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">Fruit</text></g></g><path class="foreground" aria-hidden="true" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-group role-axis"><g aria-label="y axis for Count represents values from 0 to 10" role="graphics-object" aria-roledescription="axis" transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-grid" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,200)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,180)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,160)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,140)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,120)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,100)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,80)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,60)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,40)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,20)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,0)" x2="400" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line></g><g class="mark-rule role-axis-tick" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,200)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,180)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,160)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,140)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,120)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,100)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,80)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,60)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,40)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,20)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,0)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" aria-hidden="true" style="pointer-events: none;"><text text-anchor="end" transform="translate(-7,203)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">0</text><text text-anchor="end" transform="translate(-7,183)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">1</text><text text-anchor="end" transform="translate(-7,163)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">2</text><text text-anchor="end" transform="translate(-7,143)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">3</text><text text-anchor="end" transform="translate(-7,123)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">4</text><text text-anchor="end" transform="translate(-7,103)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">5</text><text text-anchor="end" transform="translate(-7,83)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">6</text><text text-anchor="end" transform="translate(-7,63.00000000000001)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">7</text><text text-anchor="end" transform="translate(-7,42.99999999999999)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">8</text><text text-anchor="end" transform="translate(-7,22.999999999999996)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">9</text><text text-anchor="end" transform="translate(-7,3)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">10</text></g><g class="mark-rule role-axis-domain" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,200)" x2="0" y2="-200" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" aria-hidden="true" style="pointer-events: none;"><text text-anchor="middle" transform="translate(-22.123046875,100) rotate(-90) translate(0,-2)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">Count</text></g></g><path class="foreground" aria-hidden="true" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-group role-figure"><g aria-label="chart data" transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" style="fill: none;"></path><g><g class="mark-rect role-mark"><path aria-label="🍎 7" role="graphics-symbol" aria-roledescription="bar" d="M5,60.00000000000001h47v140h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍏 10" role="graphics-symbol" aria-roledescription="bar" d="M54,0h47v200h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍌 6" role="graphics-symbol" aria-roledescription="bar" d="M103,80h47v120h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍐 3" role="graphics-symbol" aria-roledescription="bar" d="M152,140h47v60h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍋 2" role="graphics-symbol" aria-roledescription="bar" d="M201,160h47v40h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍊 6" role="graphics-symbol" aria-roledescription="bar" d="M250,80h47v120h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍇 2" role="graphics-symbol" aria-roledescription="bar" d="M299,160h47v40h-47Z" style="fill: #4c78a8;"></path><path aria-label="🍉 1" role="graphics-symbol" aria-roledescription="bar" d="M348,180h47v20h-47Z" style="fill: #4c78a8;"></path></g></g><path class="foreground" aria-hidden="true" d="" style="display: none; fill: none;"></path></g></g><g class="mark-group role-title"><g transform="translate(183.4384765625,-22)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-text role-title-text" style="pointer-events: none;"><text aria-roledescription="title" text-anchor="middle" transform="translate(0,10)" style="font-family: sans-serif; font-size: 13px; font-weight: bold; fill: #000; opacity: 1;">A bar chart of available fruit in the smoothie shop</text></g></g><path class="foreground" aria-hidden="true" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g></g><path class="foreground" aria-hidden="true" d="" style="display: none; fill: none;"></path></g></g></g></svg>

index.html

empty

weather.svg