The SA team has been using SVG for its own web site for some time and has developed its own set of experiences based on experiments with different screen readers.

Here’s a rundown of 7 solutions based on their article 7 Solutions for Creating More Accessible SVGs.

1. SVG files used as images

If your SVG is introduced as SRC, be sure to add role=”img” to :

<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>
Copy the code

If role=”img” is not added, some screen readers will not recognize as an image, but simply read the Alt value.

2. SVG for ICONS

When using SVG as an icon, hide access devices with aria-Hidden =”true” and add a visually hidden sibling element as the text semantics 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.707 v0L-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.058 l - 4.586-4.586 - c - 0.286-0.286-0.702-0.361-1.057-0.229-0.131 0.049 0.254 0.125 0.357 0.229 l - 9.708 9.708-9.708-9.708 - c - 0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057-0.229 l - 4.586-0.286 4.585 c 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.708 C-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.229 L9.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 C0.286 l4.586 1.057 0.229 4.586 0.286 0.362 0.702 0.229-1.057-0.049-0.129-0.126-0.253-0.229-0.357 - z"></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>
Copy the code

As above, add aria-hidden=”true” to < SVG > to make it hidden from access devices. After that,.SR-only is what’s called a visually hidden element — it’s not visually visible, but it’s read by screen readers.

3, IE BUG

Pages that need to be IE compatible need to explicitly add the focusable=”false” attribute when using < SVG >.

<svg focusable="false">.</svg>
Copy the code

The reason: there is a BUG with SVG in Internet Explorer. As you know, SVG is not focused by default, but in IE it is possible to focus using tabs if SVG is contained in focatable elements like links and buttons. This causes the child element to be focused after the parent element is focused.

Bugs in Safari 10

In Safari 10, if < SVG > contains

, be sure to use a space between the two.

<svg> <use>.</use> </svg>
Copy the code

Otherwise, when you use the keyboard Tab to access it, you can’t skip it. Not enough later versions have been fixed, so be aware of this if your web page needs to support Safari 10.

5. SVG for images

Sometimes you need to use an SVG file as a separate image, so similar to the second one, add a visual hide element as a semantic illustration.

<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>
Copy the code

I chose not to add a description in the form of < SVG role=”img” aria-label=”Simply Accessible”> because some screen readers will not read the aria-label attribute correctly if < SVG > is not used in a focused element.

6, support IE8- browser

In IE8-browsers, the

tags in < SVG > are displayed, so you need to hide them if you want to support such browsers.

<! The following statement ranges from IE5 to IE9 -->
<! --[if !IE]> --> <desc>.</desc> <! - <! [endif]-->
Copy the code

7. Color contrast

When designing SVG ICONS, it is important to consider users with weak colors, or those using a High Contrast theme. For example, when designing a logo, consider using a solid background with a bright color border.

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)