淺談網頁中提升SVG檔案可訪問性的幾種方法

（推薦教學：html教學）

SVG是一種圖片檔案格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的向量圖形。本文就來為大家介紹7個提升網頁SVG文件可訪問性的方案。

1、作為圖片使用的SVG 檔案

如果你的SVG 是作為 a1f02c36ba31691bcfe87b2722de723b 的 src 引入的，請務必為 a1f02c36ba31691bcfe87b2722de723b 添加 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"，有些螢幕閱讀器不會將8f4d26a8d4146deeefa23295da381051 認作圖片，只讀出alt 值。

2、當圖示使用的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>

如上，為 486d7a50595533609bc98d44595dc670 新增了  aria-hidden="true"，讓其隱藏存取裝置。之後的 .sr-only 就是所謂的視覺隱藏元素－只是視覺上看不見，但會被螢幕閱讀讀到。

3、IE 的BUG

網頁如果需要相容IE，那麼在使用486d7a50595533609bc98d44595dc670 的時候，需要明確加入 focusable="false" 屬性。

<svg focusable="false">...</svg>

原因是為：在 IE 瀏覽器上關於 SVG 的一個 BUG。大家知道，SVG 預設是不會被聚焦的，但在 IE 中，如果 SVG 包含在像連結、按鈕這樣的可聚焦元素裡時，使用 Tab 是可以被聚焦的。這就導致父元素聚焦後，子元素又被聚焦的情況發生。

4、Safari 10 的BUG

在 Safari 10 中，如果 486d7a50595533609bc98d44595dc670#2199a63ce40299beb55b2a8b469dfcd6

########################################################。 ##，務必在兩者中間使用空格隔開。 ###

<svg> <use>...</use> </svg>

###否則，使用鍵盤 Tab 造訪到這裡的時候，跳不過去。不夠之後的版本的已經修復了，如果你的網頁需要支援 Safari 10 的話，就需要注意這個。 #########5、作為圖片使用的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>

###之所以沒有選擇以###a4fbf62f59d705957b881d6ac0f37829### 的形式加入說明，是因為如果###<!-- 下面语句的作用范围从 IE5~IE9 --> <!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->######7、色彩對比#########設計SVG 圖示時，一定要考慮到色弱使用者、或在高對比黑色背景主題下（High Contrast theme）使用的用戶。舉一個例子，設計圖示的時候，可以考慮使用實心的背景加上顏色鮮明邊框。 ######更多程式相關知識，請造訪：###程式設計入門###！ ！ ###

以上是淺談網頁中提升SVG檔案可訪問性的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！