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

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

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

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

如果你的 SVG 是作為 <img> 的 src 引入的，務(wù)必為 <img> 添加 role="img" 屬性：

<img src="/upload/otherpic47/sa_logo.svg"
     role="img" alt="Simply Accessible">

<a href="#">
  <img src="/upload/otherpic47/sa_logo.svg"
       role="img" alt="Simply Accessible">
</a>

如果不加 role="img"，有些屏幕閱讀器不會(huì)將 <img src="xxx.svg"> 認(rèn)作圖片，只是讀出 alt 值。

2、作為圖標(biāo)使用的 SVG

SVG 作為圖標(biāo)使用時(shí)，請(qǐng)使用 aria-hidden="true" 對(duì)訪(fǎng)問(wèn)設(shè)備隱藏，添加一個(gè)視覺(jué)上隱藏（visually-hidden）的兄弟元素作為圖標(biāo)的文本語(yǔ)義說(shuō)明。

<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="path2" 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"，讓其對(duì)訪(fǎng)問(wèn)設(shè)備隱藏。之后的 .sr-only 就是所謂的視覺(jué)隱藏元素——只是視覺(jué)上看不見(jiàn)，但會(huì)被屏幕閱讀讀到。

3、IE 的 BUG

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

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

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

4、Safari 10 的 BUG

在 Safari 10 中，如果 <svg> 中包含 <use>，務(wù)必在兩者中間使用空格隔開(kāi)。

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

否則，使用鍵盤(pán) Tab 訪(fǎng)問(wèn)到這里的時(shí)候，跳不過(guò)去。不夠之后的版本的已經(jīng)修復(fù)了，如果你的網(wǎng)頁(yè)需要支持 Safari 10 的話(huà)，就需要注意這個(gè)。

5、作為圖片使用的 SVG

有時(shí)需要將 SVG 文件作為單獨(dú)的圖片使用，那么跟第二條類(lèi)似的是，添加一個(gè)視覺(jué)隱藏元素作為語(yǔ)義說(shuō)明使用。

<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>

之所以沒(méi)有選擇以 <svg role="img" aria-label="Simply Accessible"> 的形式添加說(shuō)明，是因?yàn)槿绻?<svg> 不是在可聚焦元素里使用的時(shí)候，有些屏幕閱讀器不會(huì)正確朗讀 aria-label 屬性。

6、支持 IE8- 瀏覽器

在 IE8- 瀏覽器中，<svg> 中的 <desc> 標(biāo)簽會(huì)被顯示出來(lái)，因此需要支持此類(lèi)瀏覽器的話(huà)需要隱藏它們。

<!-- 下面語(yǔ)句的作用范圍從 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->

7、色彩對(duì)比

設(shè)計(jì) SVG 圖標(biāo)時(shí)，一定要考慮到色弱用戶(hù)、或在高對(duì)比黑色背景主題下（High Contrast theme）使用的用戶(hù)。舉一個(gè)例子，設(shè)計(jì)圖標(biāo)的時(shí)候，可以考慮使用實(shí)心的背景加上顏色鮮明邊框。

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

網(wǎng)頁(yè)標(biāo)題：html中如何提升SVG文件可訪(fǎng)問(wèn)性
當(dāng)前鏈接：http://aaarwkj.com/article6/goohog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、標(biāo)簽優(yōu)化、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)