Accessible SVG Chart

Hours Working on this Presentation Saturday: 8 Hours Sunday: 6 Hours Monday: 4 Hours Tuesday: 12 Hours Y-axis labels 1 2 3 4 5 6 7 8 9 10 11 12 X-axis labels Saturday Sunday Monday Tuesday

  <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>