Loading

SVG

Sonya Pechersky

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

SVG

accessibility of

S

V

G

Vector

Scalable

Graphic

raster

pixel

vector

math functions

paths (bezier curves)

shapes

coordinates

clear images no matter what screen size and resolution

graphic

DEMO

SVG

  • contrast color
  • live text (not outline)
  • organizing and ordering of elements for the best presentation, animation and scripting
  • and more...

DEMO

<img src="image.svg" alt="..." />
<svg width="300px" height="300px">
...
</svg>

"inline" SVG

accessible to Assistive Technologies (AT)

like screen readers and speech recognition tools

title

<svg version="1.1" width="300" height="200">
<title>Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

title

<svg version="1.1" width="300" height="200" 
aria-labelledby="title">
<title id="title">Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

description

<svg version="1.1" width="300" height="200">
<title>Green rectangle</title>
<desc>A light green rectangle with rounded corners and a dark green border</desc><rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

description

<svg version="1.1" width="300" height="200" aria-describedby="desc">
<title>Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

live text

<svg version="1.1" width="300" height="200">
<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text></svg>

keyboard FOCUS

for interactive content 

keyboard users can focus on the element when using the TAB key to move through the content

<polygon role="button" tabindex="0" />
<a xlink:href="#">
<polygon />
<a>

DEMO

role

<svg role="img">
...
</svg>

purely graphical content

<svg>
<a xlink:href="#" role="link">
<polygon />
<a>
</svg>

interactive content

  • W3C recommendation
  • can be searched, indexed, scripted, and compressed
  • do NOT lose any quality if it's zoomed or resized
  • every element / attribute can be CSS animated
  • pure XML format
  • declarative language
  • main competitor to Flash

SVG

more accessible Web graphics for users with disabilities

users with low vision, color blind or blind users, users of assistive technologies

 

increase usability of content for users without disabilities

further reading

 

Made with Slides.com