Accessible SVG Chart
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%">
<title>Accessible SVG Chart</title>
<g id="ChartRoot" font-family="Arial">
<g>
<rect id="backdrop" x="-10%" y="-10%" width="120%" height="120%" fill="#fff"/>
</g>
<g id="yScale" display="inline">
<text x="15" y="222.5" font-size="20"
pointer-events="none"
text-anchor="middle"
transform="rotate(-90,15,202.5)">
Hours Working on this Presentation</text>
<!-- background tickmarks here -->
</g>
<g id="ChartArea" stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" fill-rule="nonzero">
<g id="datapoint_0" fill="rgb(97, 115, 169)" stroke="rgb(0, 0, 49)">
<path d="M93.5,136.7 H167.7 V360 H93.5 V136.7 M83.5,146.7 L93.5,136.7 V360
L83.5,370 V146.7 M83.5,370 L93.5,360 H167.7 L157.7,370 H83.5"/>
<path d="M157.7,146.7 L167.7,136.7 V360 L157.7,370 V146.7
M83.5,146.7 L93.5,136.7 H167.7 L157.7,146.7 H83.5"
fill="rgb(17, 35, 89)"/>
<path d="M83.5,146.7 H157.7 V370 H83.5 V146.7"/>
<title>Saturday: 8 Hours</title>
</g>
<g id="datapoint_1" fill="rgb(141, 166, 66)" stroke="rgb(21, 46, 0)">
<path d="M204.8,192.5 H278.9 V360 H204.8 V192.5 M194.8,202.5 L204.8,192.5 V360
L194.8,370 V202.5 M194.8,370 L204.8,360 H278.9 L268.9,370 H194.8"/>
<!-- fancy 3D graphics here -->
<title>Sunday: 6 Hours</title>
</g>
<g id="datapoint_2" fill="rgb(152, 52, 28)" stroke="rgb(32, 0, 0)">
<path d="M316.1,248.4 H390.2 V360 H316.1 V248.4 M306.1,258.4 L316.1,248.4 V360
L306.1,370 V258.4 M306.1,370 L316.1,360 H390.2 L380.2,370 H306.1"/>
<!-- fancy 3D graphics here -->
<title>Monday: 4 Hours</title>
</g>
<g id="datapoint_3" fill="rgb(253, 200, 97)" stroke="rgb(133, 80, 0)">
<path d="M427.3,25 H501.5 V360 H427.3 V25 M417.3,35 L427.3,25 V360
L417.3,370 V35 M417.3,370 L427.3,360 H501.5 L491.5,370 H417.3"/>
<!-- fancy 3D graphics here -->
<title>Tuesday: 12 Hours</title>
</g>
</g>
<!-- X and Y Axis labels here here -->
</svg>