<svg> imgロールを持つ要素には代替テキストが必要です

以下の方法の1つまたは組み合わせを使用して、HTMLにマークアップとして追加されるすべてのSVG要素にアクセス可能な名前が付けられていることを確認します。

<title> 属性の使用

例：

  
    <svg role="img" title="A brown circle">
      <circle
        cx="30"
        cy="30"
        r="10"
        fill="brown"
      ></circle>
    </svg>
  

SVG <title> 要素の使用

<title> 要素は、SVGのコンテナ要素やグラフィック要素のアクセス可能な短いテキストの説明を提供します。

例：

  
    <svg role="img">
      <title>A descriptive title for the SVG element</title>
      <path d="...." />
    </svg>
  

`aria-label` 属性の使用

例：

  
    <svg xmlns="https://www.w3.org/2000/svg">
    <circle role="img" cx="50" cy="50" r="40" stroke="black" fill="red"  aria-label="A red circle with black border">
    </circle>
    </svg>
  

`aria-labelledby` 属性の使用

例：

  
    <div id="first">First</div>
    <div id="name">Name</div>
    <svg role="img"  aria-labelledby="first name">
      <path d="...." />
    </svg>