<svg id="screen-reader-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 325" preserveAspectRatio="xMinYMin slice" role="group"
     aria-labelledby="graph-title" aria-describedby="graph-desc">
  <text id="graph-title" class="title" transform="translate(10 28.77)">Commonly Used Screen Readers</text>
  <text id="graph-desc" class="desc" transform="translate(10 317.96)">Data & original image from <a xlink:href="http://webaim.org/projects/screenreadersurvey6/#used">WebAIM's Screen Reader User Survey #6 Results</a></text>
    <g id="bars" role="list" aria-label="bar graph" transform="translate(0,58)">
    <g id="Jaws" role="listitem">
      <rect role="presentation" id="bar" class="cls-1" x="47.95" y="80.54" width="25.54" height="148.61" transform="translate(-7.92 -9.3) rotate(-0.08)"/>
      <rect role="presentation" id="key" class="cls-1" x="328.66" y="30.44" width="17.96" height="19.39" transform="translate(-7.75 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 36.45)">Jaws - 44%</text>
    </g>
    <g id="NVDA" role="listitem">
      <rect role="presentation" id="bar-2" data-name="bar" class="cls-3" x="77.83" y="92.54" width="25.44" height="136.57" transform="translate(-7.93 -9.26) rotate(-0.08)"/>
      <rect role="presentation" id="key-2" data-name="key" class="cls-3" x="328.68" y="57.11" width="17.96" height="19.39" transform="translate(-7.79 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 63.12)">NVDA - 41%</text>
    </g>
    <g id="VoiceOver" role="listitem">
      <rect role="presentation" id="bar-3" data-name="bar" class="cls-4" x="107.63" y="122.84" width="25.44" height="106.23" transform="translate(-7.95 -9.22) rotate(-0.08)"/>
      <rect role="presentation" id="key-3" data-name="key" class="cls-4" x="328.7" y="82.38" width="17.96" height="19.39" transform="translate(-7.83 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 88.39)">VoiceOver - 31%</text>
    </g>
    <g id="WindowEyes" role="listitem">
      <rect role="presentation" class="cls-5" x="137.41" y="128.08" width="25.44" height="100.96" transform="translate(-7.95 -9.17) rotate(-0.08)"/>
      <rect role="presentation" class="cls-5" x="328.72" y="107.64" width="17.96" height="19.39" transform="translate(-7.86 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 113.65)">Window-Eyes - 30%</text>
    </g>
    <g id="ZoomText" role="listitem">
      <rect role="presentation" class="cls-6" x="167.19" y="137" width="25.44" height="91.99" transform="translate(-7.96 -9.13) rotate(-0.08)"/>
      <rect role="presentation" class="cls-6" x="328.73" y="132.91" width="17.96" height="19.39" transform="translate(-7.9 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 138.92)">ZoomText - 28%</text>
    </g>
    <g id="SA" role="listitem">
      <rect role="presentation" class="cls-8" x="196.14" y="204.92" width="25.44" height="24.11" transform="translate(-8 -9.09) rotate(-0.08)"/>
      <rect role="presentation" class="cls-8" x="328.75" y="159.58" width="17.96" height="19.39" transform="translate(-7.94 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 165.59)">SA or SAToGo - 7%</text>
    </g>
    <g id="ChromeVox" role="listitem">
      <rect role="presentation" id="bar-4" data-name="bar" class="cls-9" x="226.05" y="218.33" width="25.44" height="10.69" transform="translate(-8.01 -9.05) rotate(-0.08)"/>
      <rect role="presentation" id="key-4" data-name="key" class="cls-9" x="328.77" y="184.84" width="17.96" height="19.39" transform="matrix(1, 0, 0, 1, -7.97, -8.91)"/>
      <text class="cls-2" transform="translate(345.49 190.86)">ChromeVox - 3%</text>
    </g>
    <g id="Others" role="listitem">
      <rect role="presentation" id="bar-5" data-name="bar" class="cls-10" x="255.94" y="204.91" width="25.44" height="24.11" transform="translate(-8 -9.01) rotate(-0.08)"/>
      <rect role="presentation" id="key-5" data-name="key" class="cls-10" x="328.79" y="210.11" width="17.96" height="19.39" transform="translate(-8.01 -8.91) rotate(-0.08)"/>
      <text class="cls-2" transform="translate(345.49 216.12)">Others - 7%</text>
    </g>

  </g>
  <g id="xy-axis" role="presentation">
    <line role="presentation" id="y-axis" class="cls-11" x1="39" y1="58.32" x2="39" y2="279.52"/>
    <line role="presentation" id="bottom-line" class="cls-11" x1="283.4" y1="279.02" x2="32.4" y2="279.02"/>
    <line role="presentation" id="_50_" class="cls-12" x1="32.5" y1="106.42" x2="39" y2="106.42"/>
    <line role="presentation" id="_25_" class="cls-12" x1="32.5" y1="190.42" x2="39" y2="190.42"/>
    <text role="presentation" aria-hidden="true" class="cls-13" transform="translate(0 109.92)"> 50%</text>
    <text role="presentation" aria-hidden="true" class="cls-13" transform="translate(0 193.92)"> 25%</text>
    <text role="presentation" aria-hidden="true" class="cls-13" transform="translate(0 282)">    0%</text>
  </g>
</svg>
.title{
  font-size: 30.37px;
}
.desc{
  font-size: 14px;
}
a{
  fill: #1010b2;
  text-decoration: underline;
}
.cls-1 {
  fill: red;
}

.cls-2 {
  font-size: 15.84px;
}

body {
  font-family: 'Droid Sans', sans-serif;
}

.cls-3 {
  fill: #24c62b;
}

.cls-4 {
  fill: #1010b2;
}

.cls-5 {
  fill: #e29e14;
}

.cls-6 {
  fill: #7d11c9;
}

.cls-7 {
  letter-spacing: -1px;
}

.cls-8 {
  fill: #f0f;
}

.cls-9 {
  fill: #065109;
}

.cls-10 {
  fill: #06b7f4;
}

.cls-11 {
  fill: #fff;
}

.cls-11, .cls-12 {
  stroke: #bfbbbf;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.cls-12 {
  fill: none;
}

.cls-13 {
  font-size: 12px;
  font-weight: 700;
  white-space: pre;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.