A brief discussion on several methods to improve the accessibility of SVG files on web pages

(Recommended tutorial: html tutorial)

SVG is an image file format. Its full English name is Scalable Vector Graphics, which means Scalable vector graphics. This article will introduce you to 7 solutions to improve the accessibility of SVG files on web pages.

1. SVG files used as images

If your SVG is imported as the src of <img>, be sure to <img> Add role="img" attribute:

<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 you do not add role="img", some screen readers will not Will recognize <img src="xxx.svg"> as an image and just read out the alt value.

2. SVG used as an icon

When using SVG as an icon, please use aria-hidden="true" to hide it from the access device , add a visually-hidden sibling element as a textual semantic description of the 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" to <svg> to hide it from access devices. The following .sr-only are the so-called visually hidden elements - they are only visually invisible, but will be read by screen readers.

3. IE BUG

If the web page needs to be compatible with IE, then when using <svg>, you need to explicitly add focusable="false" attribute.

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

The reason is: a BUG about SVG in IE browser. As we all know, SVG will not be focused by default, but in IE, if the SVG is contained in focusable elements such as links and buttons, it can be focused using Tab. This leads to the situation where the child element is focused again after the parent element is focused.

4. BUG of Safari 10

In Safari 10, if <svg> contains <use>, be sure to separate them with spaces.

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

Otherwise, when you use the keyboard Tab to access here, you will not be able to jump to it. It has been fixed in later versions. If your webpage needs to support Safari 10, you need to pay attention to this.

5. SVG used as a picture

Sometimes you need to use the SVG file as a separate picture, then similar to the second item, add a visual hidden element Used 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>

The reason why I did not choose to add a description in the form of is because if<svg&gt ; Some screen readers do not read the aria-label attribute correctly when used outside of focusable elements.

6. Support IE8- browser

In IE8- browser, <desc&gt in <svg> ; tags are displayed, so they need to be hidden to support such browsers.

<!-- 下面语句的作用范围从 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->

7. Color contrast

When designing SVG icons, be sure to consider users with color weakness or those used under high contrast black background themes (High Contrast theme) user. For example, when designing icons, consider using a solid background with a brightly colored border.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief discussion on several methods to improve the accessibility of SVG files on web pages. For more information, please follow other related articles on the PHP Chinese website!