Accessible charts

README.md

Examples of accessible charts generated with Vega.

fruit.svg

index.html

empty

weather.svg

<svg class="marks" width="238" height="242" viewBox="0 0 238 242" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(33,5)"><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,0h200v200h-200Z" style="fill: none;"></path><g><g class="mark-group role-axis"><g aria-label="x axis for Mean temperature in centigrades represents values from 0 to 28" 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(0,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(36,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(71,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(107,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(143,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(179,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="start" transform="translate(0,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">0</text><text text-anchor="middle" transform="translate(35.714285714285715,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">5</text><text text-anchor="middle" transform="translate(71.42857142857143,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">10</text><text text-anchor="middle" transform="translate(107.14285714285714,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">15</text><text text-anchor="middle" transform="translate(142.85714285714286,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">20</text><text text-anchor="middle" transform="translate(178.57142857142858,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">25</text></g><g class="mark-rule role-axis-domain" aria-hidden="true" style="pointer-events: none;"><line transform="translate(0,0)" x2="200" 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(100,30)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">Mean temperature in centigrades</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 Mean precipitation in centimeters represents values from 0 to 5.5" 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-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,164)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,127)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,91)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,55)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,18)" 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,166.63636363636363)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">1</text><text text-anchor="end" transform="translate(-7,130.27272727272725)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">2</text><text text-anchor="end" transform="translate(-7,93.90909090909092)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">3</text><text text-anchor="end" transform="translate(-7,57.54545454545454)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">4</text><text text-anchor="end" transform="translate(-7,21.181818181818187)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">5</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(-16.5615234375,100) rotate(-90) translate(0,-2)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">Mean precipitation in centimeters</text></g></g><path class="foreground" aria-hidden="true" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-symbol role-mark marks"><path aria-label="January, 8.2 centigrades and 3.8 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(58.778801843317986,63.34310850439879)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="February, 9.9 centigrades and 3.7 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(70.42983565107457,64.19951729686248)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="March, 12.4 centigrades and 4.9 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(88.47926267281106,22.228739002932496)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="April, 15.0 centigrades and 3.1 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(107.28571428571428,86.24242424242424)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="May, 19.3 centigrades and 1.7 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(137.82834101382494,139.14956011730206)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="June, 22.4 centigrades and 1.1 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(159.99999999999997,159.72727272727272)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="July, 26.0 centigrades and 0.4 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(185.7027649769586,185.8651026392962)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="August, 26.1 centigrades and 1.3 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(186.5149769585253,151.99413489736068)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="September, 21.9 centigrades and 2.0 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(156.60119047619048,128.63636363636357)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="October, 16.4 centigrades and 4.1 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(117.06797235023039,52.37536656891493)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="November, 11.0 centigrades and 5.4 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(78.73809523809524,5.303030303030365)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path><path aria-label="December, 8.2 centigrades and 5.0 centimeters" role="graphics-symbol" aria-roledescription="point" transform="translate(58.5311059907834,17.39002932551328)" d="M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0" style="fill: none; stroke: #4c78a8; stroke-width: 2;"></path></g></g><path class="foreground" aria-hidden="true" d="" style="display: none; fill: none;"></path></g></g></g></svg>