無障礙(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> 

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

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。