html中如何提升SVG文件可訪問性

小編給大家分享一下html中如何提升SVG文件可訪問性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了浙江免費建站歡迎大家使用！

SVG是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。

1、作為圖片使用的 SVG 文件

如果你的 SVG 是作為 的 src 引入的，務必為 添加 role="img" 屬性：

如果不加 role="img"，有些屏幕閱讀器不會將 認作圖片，只是讀出 alt 值。

2、作為圖標使用的 SVG

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

  
    
  
  Close



  
    
      
      
    
  

如上，為 aria-hidden="true"，讓其對訪問設備隱藏。之后的 .sr-only 就是所謂的視覺隱藏元素——只是視覺上看不見，但會被屏幕閱讀讀到。

3、IE 的 BUG

網(wǎng)頁如果需要兼容 IE，那么在使用 的時候，需要顯式添加 focusable="false" 屬性。

...

原因是為：在 IE 瀏覽器上關于 SVG 的一個 BUG。大家知道，SVG 默認是不會被聚焦的，但在 IE 中，如果 SVG 包含在像鏈接、按鈕這樣的可聚焦元素里時，使用 Tab 是可以被聚焦的。這就導致父元素聚焦后，子元素又被聚焦的情況發(fā)生。

4、Safari 10 的 BUG

在 Safari 10 中，如果 中包含 ，務必在兩者中間使用空格隔開。

否則，使用鍵盤 Tab 訪問到這里的時候，跳不過去。不夠之后的版本的已經(jīng)修復了，如果你的網(wǎng)頁需要支持 Safari 10 的話，就需要注意這個。

5、作為圖片使用的 SVG

有時需要將 SVG 文件作為單獨的圖片使用，那么跟第二條類似的是，添加一個視覺隱藏元素作為語義說明使用。

    
  Simply Accessible

之所以沒有選擇以 的形式添加說明，是因為如果 不是在可聚焦元素里使用的時候，有些屏幕閱讀器不會正確朗讀 aria-label 屬性。

6、支持 IE8- 瀏覽器

在 IE8- 瀏覽器中， 中的 標簽會被顯示出來，因此需要支持此類瀏覽器的話需要隱藏它們。

 ... 

7、色彩對比

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

以上是“html中如何提升SVG文件可訪問性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：html中如何提升SVG文件可訪問性
標題鏈接：http://m.jiaotiyi.com/article/goohog.html