(推薦教學:html教學)
SVG是一種圖片檔案格式,它的英文全稱為Scalable Vector Graphics,意思為可縮放的向量圖形。本文就來為大家介紹7個提升網頁SVG文件可訪問性的方案。
1、作為圖片使用的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 值。
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>
如上,為 <svg> 新增了 aria-hidden="true"
,讓其隱藏存取裝置。之後的 .sr-only
就是所謂的視覺隱藏元素-只是視覺上看不見,但會被螢幕閱讀讀到。
3、IE 的BUG
網頁如果需要相容IE,那麼在使用<svg>
的時候,需要明確加入 focusable="false"
屬性。
<svg focusable="false">...</svg>
原因是為:在 IE 瀏覽器上關於 SVG 的一個 BUG。大家知道,SVG 預設是不會被聚焦的,但在 IE 中,如果 SVG 包含在像連結、按鈕這樣的可聚焦元素裡時,使用 Tab 是可以被聚焦的。這就導致父元素聚焦後,子元素又被聚焦的情況發生。
4、Safari 10 的BUG
在 Safari 10 中,如果 <svg>
#<use>
########################################################。 ##,務必在兩者中間使用空格隔開。 ###
<svg> <use>...</use> </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檔案可訪問性的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!