7個提升網頁SVG文件可訪問性的方案 seven solutions to improve the accessibility of svg files on web pages

seven solutions to improve the accessibility of svg files on web pages

---

svg is a format of picture file, it’s short for scalable vector graphics, which means is a vector graphics that scalable. then we introduce seven solution to improve the accessibility of svg file on web page.

1. svg file used as picture

if your svg is introduced as a src attribute on <img> tag, and then we must be sure to add role="img" arrtibute to <img> tag.

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

if we not add role="img" arrtribute, there are some screen readers will not recognized as a <img src="xxx.svg"> to a picture, which only read the alt value.

2. svg file used as icon

when the svg file is used as a icon, please hide the accessibility of device with using aria-hidden="true", and a visually-hidden on visual sibling element as a text semantic description of icon.

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

as above, add aria-hidden="true" attribute to <svg> tag, which can hide it from the the access of device. and the .sr-only is so-called visual hidden element – just only we can’t see, it will be read by screen reader.

3. the bug of ie

yeah, if your web page need to compatible with internet explorer. then we need to add the arrtibute focusable=false explicitly when we using <svg> tags.

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

the reason is: there is a big bug about svg in internet explorer. yeah, as we know the svg will not be focused by default. but in ie, if the svg is wappered by focusbale elments such as links and buttons. and use tab will be focused, which will causes the situation what the parent element is focused and the child elements is focused again.

4. the bug of safari 10

in safari 10, if the <use> is included in <svg>, and we must be sure to use spaces separate between them.

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

otherwise, when we access here used keyboard Tab , we can’t skip it. but the safari that the later version has repaired this bug, yeah, you need to pay attention to this bug that if your web page needs to support safari 10.

5. svg used as image

somatimes we need to use the svg file as a unique image, then it’s similar to the second one, add a visual hide element as a semantic description.

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

6. support ie8- browser

in ie8- brwoser, the <desc> in <svg> will be displayed, therefore, it needs to hide them if you want to support this kind of brwosers.

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

7. color contract

when we designing the icon of svg, we must take into account the users who are color-weak and use high contract theme. for example, when designng an icon, we can consider using a soild background with blight border.

more related front-end knowledge, please pay attention to 小青蛙的博客.

Reference article: https://www.html.cn/web/html/19078.html