问SVG有从屏幕阅读器标题属性出现在视野中的文本解码器。

EN

<figure>
  <figcaption>A barchart comparison</figcaption>
  <svg id="bar-chart-current-year" role="group" aria-labelledby="graph-title" aria-describedby="graph-description" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 799.2 598.59">
  <defs>
    <style>
    .cls-1,
    .cls-2,
    .cls-7 {
      fill: none;
    }

    .cls-1,
    .cls-2 {
      stroke: #d8d8d8;
    }

    .cls-1,
    .cls-7 {
      stroke-linejoin: round;
    }

    .cls-2 {
      stroke-miterlimit: 10;
    }

    .cls-3,
    .cls-8 {
      opacity: 0.5;
    }

    .cls-3,
    .cls-6,
    .cls-9 {
      font-size: 1.75rem; /* 28px */
      font-family: ArialMT, Arial;
    }


    .cls-4 {
      fill: #00654e;
    }

    .cls-5 {
      fill: #94d500;
    }

    .cls-7 {
      stroke: #37474f;
      stroke-width: 2px;
    }

    .cls-10 {
      opacity: 0.7;
    }

    </style>
  </defs>
  <title id="graph-title">Bar Chart Comparison</title>
  <desc id="graph-description">A bar graph of the last 5 years ...</desc>
  <text id="screenreader-title">Bar Chart Comparison - A bar graph of the last 5 years ...</text>
  <g id="bar-chart" data-name="bar-chart">
    <path id="gridlines" class="cls-1" d="M1.81,1H799.67M1.81,165.46H799.67M1.81,329.91H799.67" transform="translate(-0.47 -0.5)" />
    <g id="annotation">
      ...
    </g>
    <g id="bar-graphics">
      ...
    </g>
    <g id="bar-graphic-labels" class="cls-10">
    ...
    </g>
    <line id="baseline" class="cls-7" x1="0.53" y1="491.64" x2="798.06" y2="491.64" />
    <g id="y-axis" class="cls-8">
    ...
    </g>
    <g id="x-axis" class="cls-10">
    ...
    </g>
  </g>
  </svg>
</figure>