提高網頁 SVG 文件可訪問性的 7 個方案

SA 團隊 在本身的網站中使用 SVG 開發已經有一段時間了，根據在不一樣屏幕閱讀器上的實驗結果，總結了本身的一套經驗。

下面是我根據他們發佈的文章 《7 solutions for creating more accessible SVGs》，對 7 個方案作的扼要羅列，方便你們閱讀。

一、做爲圖片使用的 SVG 文件

若是你的 SVG 是做爲 <img> 的 src 引入的，務必爲 <img> 添加 role="img" 屬性：

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg" role="img" alt="Simply Accessible">

<a href="#">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg" role="img" alt="Simply Accessible">
</a>
複製代碼

若是不加 role="img"，有些屏幕閱讀器不會將 <img src="xxx.svg"> 認做圖片，只是讀出 alt 值。

二、做爲圖標使用的 SVG

SVG 做爲圖標使用時，請使用 aria-hidden="true" 對訪問設備隱藏，添加一個視覺上隱藏（visually-hidden）的兄弟元素做爲圖標的文本語義說明。

<a href="#">
  <svg class="icon icon-close" viewBox="0 0 32 32" aria-hidden="true">
    <use xlink:href="#icon-close"></use>
  </svg>
  <span class="sr-only">Close</span>
</a>

<svg display="none" version="1.1" viewBox="0 0 32 32">
  <defs>
    <g id="icon-close">
      <path class="path1" d="M31.708 25.707v0l-9.708-9.708 9.708-9.708c0.104-0.104 0.18-0.227 0.229-0.356 0.134-0.355 0.058-0.771-0.229-1.058l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.131 0.049-0.254 0.125-0.357 0.229l-9.708 9.708-9.708-9.708c-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.585c-0.286 0.286-0.361 0.702-0.231 1.058 0.051 0.13 0.125 0.252 0.23 0.356l9.709 9.708-9.708 9.708c-0.105 0.104-0.18 0.228-0.23 0.357-0.132 0.354-0.056 0.771 0.23 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.131-0.050 0.252-0.125 0.357-0.229l9.708-9.708 9.708 9.708c0.104 0.104 0.227 0.18 0.357 0.229 0.355 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.129-0.126-0.253-0.229-0.357z"></path>
    </g>
  </defs>
</svg>

<style> .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } </style>
複製代碼

如上，爲 <svg> 添加了  aria-hidden="true"，讓其對訪問設備隱藏。以後的 .sr-only 就是所謂的視覺隱藏元素——只是視覺上看不見，但會被屏幕閱讀讀到。

三、IE 的 BUG

網頁若是須要兼容 IE，那麼在使用 <svg> 的時候，須要顯式添加 focusable="false" 屬性。

<svg focusable="false">...</svg>
複製代碼

緣由是爲：在 IE 瀏覽器上關於 SVG 的一個 BUG。你們知道，SVG 默認是不會被聚焦的，但在 IE 中，若是 SVG 包含在像連接、按鈕這樣的可聚焦元素裏時，使用 Tab 是能夠被聚焦的。這就致使父元素聚焦後，子元素又被聚焦的狀況發生。

四、Safari 10 的 BUG

在 Safari 10 中，若是 <svg> 中包含 <use>，務必在二者中間使用空格隔開。

<svg> <use>...</use> </svg>
複製代碼

不然，使用鍵盤 Tab 訪問到這裏的時候，跳不過去。不夠以後的版本的已經修復了，若是你的網頁須要支持 Safari 10 的話，就須要注意這個。

五、做爲圖片使用的 SVG

有時須要將 SVG 文件做爲單獨的圖片使用，那麼跟第二條相似的是，添加一個視覺隱藏元素做爲語義說明使用。

<a href="https://simplyaccessible.com">
  <svg role="img" focusable="false"> <use xlink:href="#sa_logo"></use> </svg>
  <span class="sr-only">Simply Accessible</span>
</a>
複製代碼

之因此沒有選擇以 <svg role="img" aria-label="Simply Accessible"> 的形式添加說明，是由於若是 <svg> 不是在可聚焦元素裏使用的時候，有些屏幕閱讀器不會正確朗讀 aria-label 屬性。

六、支持 IE8- 瀏覽器

在 IE8- 瀏覽器中，<svg> 中的 <desc> 標籤會被顯示出來，所以須要支持此類瀏覽器的話須要隱藏它們。

<!-- 下面語句的做用範圍從 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->
複製代碼

七、色彩對比

設計 SVG 圖標時，必定要考慮到色弱用戶、或在高對比黑色背景主題下（High Contrast theme）使用的用戶。舉一個例子，設計圖標的時候，能夠考慮使用實心的背景加上顏色鮮明邊框。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）