cart phone checkmark twitter

Accessible SVGs

Heather Migliorisi

Disclaimer: Everything presented here is my own and does not reflect the views of my employer.

What are SVGs?

Scalable Vector Graphic (SVG) is a generalized graphics markup language

  • icons
  • complex images
  • data visualizations
  • animated pictures
  • interactive applications
Responsive Huggy Laser Panda Factory by Sarah Drasner

What does it mean to be accessible?

Accessible - easy to approach, enter, use, or understand. @ dictionary.com

Accessible - easy to approach, enter, use or understand. @ dictionary.com

  • Ability?
  • Age?
  • Device?
  • Bandwidth?

Disability Classifications

  • Vision - color blind, low vision and blind
  • Hearing - deaf and hard of hearing
  • Motor - loss/limitation of function in muscle control
  • Cognitive - any limitations in the ability to think or reason that affect a person’s capacity to perform a task

Remember "POUR"

The four main guiding principles of accessibility are:

Perceivable - provide content alternatives (images, audio, video)

Operable (without a mouse/trackpad)

Understandable - clear and simple (writing and functionality)

Robust - works across many devices

ARIA - Accessible Rich Internet Applications

  • role (role="img")
  • state (aria-hidden="true")
  • property (aria-label="actual label text for item")

Udacity Course

https://www.udacity.com/course/web-accessibility--ud891

Graphics &
Alternative Text

Is alternative text needed?

Is it purely decorative?

Weather Radar Report for Pittsburgh, PA on June 6, 2016 at 5:45 PM EDT showing several scattered storms heading west to east.

Does it have surrounding text that serves as the alternative?

NOPE.

Surrounding text != Alternative text

Does the graphic have a function?

Apple App Store


    Apple App Store


Does the graphic have a function?

Apple App Store


    Download the Totally Awesome App from the Apple App Store


SVG Icons

Replace the Icon Font with SVG

Icon Generating Tools

Base Code

Supports Mobile Devices

    
        phone
        
    

Better title

Supports Mobile Devices

    
        Supports Mobile Devices
        
    

Add a Role

Supports Mobile Devices

    
        Supports Mobile Devices
        
    

Add aria-labelledby and id

Supports Mobile Devices

    
        Supports Mobile Devices
        
    

Demo Video

Decorative Icon

Success! Your order went through.

    
        checkmark
        
    
    Success! Your order went through.

Add aria-hidden="true"

Success! Your order went through.

    
    Success! Your order went through.

Linked icon, no text


    
        
            
        
    

Linked icon, no text


    
        
            
        
    

Linked Icon, with static text


    
        
            
         Twitter
    

Linked icon, no text


    
        
            
         Twitter
    

Linked Icon, with dynamic text


    
        0
        
            
        
    

Linked Icon, with dynamic text


    
        10
        items in your shopping cart
        
    

    
        .offscreen-text{
        position: absolute!important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px,1px,1px,1px);
        clip-path: polygon(0 0,0 0,0 0,0 0);
        }
    

SVGs and High Contrast Mode

SVGs and High Contrast Mode

Media Queries to the rescue

SVGs and High Contrast Mode

SVGs and High Contrast Mode

Complete set of examples:

https://codepen.io/hmig/live/2e4067d4d66f414aa6f71d437af8af86

Basic Image
Replacement

SVG as img src

A snapshot of the entire celestial sky with the Milky Way running through the center.
Image src: http://www.radicalcartography.net/index.html?stars

    The celestial sky with the Milky Way running through the center.

SVG as img src

The celestial sky with the Milky Way running through the center.
Image src: http://www.radicalcartography.net/index.html?stars

    The celestial sky with the Milky Way running through the center.

Inline SVG

A split screen capture of the celestial sky svg and the code behind it.

Add a title and a description

A split screen capture of the celestial sky svg and the code with a title element added.

Add aria-labelledby and id

A split screen capture of the celestial sky svg and the code with a title element added.

Add a role

A split screen capture of the celestial sky svg and the code with the role=img added.

Add some twinkle

A split screen capture of the celestial sky svg and the code with the twinkle js added.

Update the title

A split screen capture sky svg and the code with the title updated to reflect the stars twinkling. Demo Example

Thank You, Sarah!

Sarah Drasner's super cute SVG monster Responsive GreenSock-Teaching Monster by Sarah Drasner

Embed SVG via object or iframe

Disney's Brave character, 'Merida' doing a full face palm/wipe down in frustration.

Couldn't make object and iframe SVGs accessible :(

Complex
Graphics

Complex Graphics

Complete Western Hemisphere Celestial Map
Image src: http://www.radicalcartography.net/index.html?stars

Layer Name

Split screen view showing svg code and illustrator showing all the layers have names

Layer Order

Split screen view showing svg code and illustrator with arrows showing how the layer orders translate in reverse order in the code.

Keep two versions

dude crying gif

Use Source Control

octocat

Optimize

gif of using svgomg
https://jakearchibald.github.io/svgomg/

Let’s make it accessible!

split screen of 5 constellations image and the svg code that made it

Screen reader traversable

split screen of 5 constellations image and the svg code with the group role added

Title (and desc if needed)

split screen of 5 constellations image and the svg code with the title added

Add semantic roles

split screen of 5 constellations image and the svg code with the list and listitem roles added

Add a label to the list

split screen of 5 constellations image and the svg code with a label added to the list

Let's Test!

The fix for NVDA + Firefox

split screen of 5 constellations image and the svg code with the title and desc switched to text

Let's Test...Again!

Interactive
Graphics

5 constellations
corvus constellations

Finish design and optimization steps

svgomg gif

Starting point

Traversable with role=group

Title and description

Code clean up

Add semantic roles

Add more semantic roles

Keyboard accessible

Focusable with tabindex="0"

Fix the semantics of the link

Set visual CSS for focus

Remove the outline

Let's Test!

The fix for JAWS + IE

split screen of corvus image and the svg code with the aria-labelledby='id of decsription' added to the xlink

Let's Test...Again!

Take Aways...

Remember "P"erceivable and determine if alternative text is needed

  1. If no, hide the image/SVG aria-hidden="true"
  2. If yes:
    1. Add/link up title and/or description to the SVG element
    2. Use roles to add semantic value (e.g. role="list", role="listitem")

Remember "O"perable and determine if the SVG is interactive

  1. If no - do nothing else
  2. If yes:
    1. Set focus with xlink + tabindex="0"
    2. If the link is not an actual link, add a role to ensure it is semantic
    3. Add JS for setting window focus
    4. Set visual CSS for focus: outline

TEST ... a lot

  • with various screen readers + browsers
  • different contrast modes
  • keyboard navigation
  • with real users

Progress is Better than Perfection

Article
https://css-tricks.com/accessible-svgs

Twitter - @_hmig
hit me up on twitter

When You Need Help
A11y Slackers: http://web-a11y.herokuapp.com/ or #a11y on twitter

Thank you.