無障礙(Accessible) SVG 實踐方法

要在 SVG 上實踐無障礙(Accessible)的話可以參考以下方法：

1. 以 img src 讀入的 SVG 圖片

這個就跟讀入傳統類型(jpg, png, gif)圖片一樣，加上 alt 屬性即可。

<img src="pic.jpg" alt="這是圖片">

2. inline SVG

inline SVG 就是這篇的重點，當我們在頁面內使用 svg 的標籤，像是：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

遵循以下設定：

1. 在 svg 的標籤內加上 title 及 desc 的標籤來標是圖片名稱及敘述。
2. 在 svg 的標籤加上 aria-labelledby 並設定指向 title 及 desc 的 id。
3. 在 svg 的標籤加上 role="img"

設定完的 svg 會大概長這樣：

<svg height="100" width="100" aria-labelledby="svgTitle svgDesc" role="img">
  <title id="svgTitle">Circle</title>
  <desc id="svgDesc">This is a red circle</desc>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

這樣就設定完成了，給有需要的朋友參考。