Website adaptation for people with disabilities: Provide alternative text for images

[DarWik]

Tool: https://www.webaccessibility.com/results/?url=http%3A%2F%2Fncov-dashboard.herokuapp.com%2F

All images within a page must be given an alternate text equivalent. Text equivalents for non-text elements communicate the meaning of images to users who cannot perceive the image such as users of screen readers. Proper equivalents provide text which contributes the same level of understanding to the content of the page as the image itself. In instances where the image does not contribute to the understanding of the content and is purely decorative, it needs to be marked in a way to indicate its purely decorative purpose.

Violations Identified (4)
<svg style="background: rgba(0, 0, 0, 0);" height="450" width="1082.66" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="main-svg">
   <defs id="defs-fd54b0">
      <g class="clips"></g>
      <g class="gradients">
         <lineargradient id="gfd54b0-cb9614b7" y2="0" y1="1" x2="0" x1="0">
            <stop stop-opacity="1" stop-color="rgb(35, 3, 129)" offset="0%"></stop>
            <stop stop-opacity="1" stop-color="rgb(204, 51, 128)" offset="50%"></stop>
            <stop stop-opacity="1" stop-color="rgb(255, 255, 51)" offset="100%"></stop>
         </lineargradient>
      </g>
   </defs>
   <g class="bglayer"></g>
   <g class="draglayer"></g>
   <g class="layer-below">
      <g class="imagelayer"></g>
      <g class="shapelayer"></g>
   </g>
   <g class="cartesianlayer"></g>
   <g class="polarlayer"></g>
   <g class="ternarylayer"></g>
   <g class="geolayer"></g>
   <g class="funnelarealayer"></g>
   <g class="pielayer"></g>
   <g class="treemaplayer"></g>
   <g class="sunburstlayer"></g>
   <g class="glimages"></g>
</svg>
<svg height="450" width="1082.66" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="main-svg">
   <defs id="topdefs-fd54b0">
      <g class="clips"></g>
   </defs>
   <g class="indicatorlayer"></g>
   <g class="layer-above">
      <g class="imagelayer"></g>
      <g class="shapelayer"></g>
   </g>
   <g class="infolayer">
      <g transform="translate(0,0)" class="cb9614b7 colorbar">
         <rect style="fill: rgb(0, 0, 0); fill-opacity: 0; stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 0;" height="450" width="78.703125" y="0" x="1005" class="cbbg"></rect>
         <g transform="translate(0,32)" class="cbfills">
            <rect style="stroke: none; fill: url(" #gfd54b0-cb9614b7");" height="408" y="0" width="30" x="1015" class="cbfill"></rect>
         </g>
         <g transform="translate(0,32)" class="cblines"></g>
         <g transform="translate(0,0)" class="cbaxis crisp">
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,440)" data-math="N" data-unformatted="0" y="4.199999999999999" x="1047.9" text-anchor="start">0</text></g>
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,373.28)" data-math="N" data-unformatted="0.5M" y="4.199999999999999" x="1047.9" text-anchor="start">0.5M</text></g>
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,306.57)" data-math="N" data-unformatted="1M" y="4.199999999999999" x="1047.9" text-anchor="start">1M</text></g>
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,239.85)" data-math="N" data-unformatted="1.5M" y="4.199999999999999" x="1047.9" text-anchor="start">1.5M</text></g>
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,173.13)" data-math="N" data-unformatted="2M" y="4.199999999999999" x="1047.9" text-anchor="start">2M</text></g>
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,106.41)" data-math="N" data-unformatted="2.5M" y="4.199999999999999" x="1047.9" text-anchor="start">2.5M</text></g>
            <g class="ycb9614b7tick"><text style="font-family: " Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" transform="translate(0,39.70000000000001)" data-math="N" data-unformatted="3M" y="4.199999999999999" x="1047.9
<svg height="450" width="1082.66" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="main-svg">
   <g class="hoverlayer"></g>
</svg>
<svg style="position: absolute; left: -10000px; top: -10000px; width: 9000px; height: 9000px; z-index: 1;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="js-plotly-tester">
   <path style="stroke-width: 0; fill: black;" d="M0,0H1V1H0Z" class="js-reference-point"></path>
</svg>