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?
Does it have surrounding text that serves as the alternative?
NOPE.
Surrounding text != Alternative text
Does the graphic have a function?
Does the graphic have a function?
SVG Icons
Replace the Icon Font with SVG
Icon Generating Tools
Base Code
Better title
Add a Role
Add aria-labelledby and id
Decorative Icon
Success! Your order went through.
Add aria-hidden="true"
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
Image src: http://www.radicalcartography.net/index.html?stars
SVG as img src
Image src: http://www.radicalcartography.net/index.html?stars
Inline SVG
Add a title and a description
Add aria-labelledby and id
Add a role
Add some twinkle
Update the title
Demo Example
Thank You, Sarah!
Responsive GreenSock-Teaching Monster by Sarah Drasner
Embed SVG via object or iframe
Couldn't make object and iframe SVGs accessible :(
Complex
Graphics
Complex Graphics
Image src: http://www.radicalcartography.net/index.html?stars
Layer Name
Layer Order
Keep two versions
Use Source Control
Optimize
https://jakearchibald.github.io/svgomg/
Let’s make it accessible!
Screen reader traversable
Title (and desc if needed)
Add semantic roles
Add a label to the list
Let's Test!
- Safari + VO - Pass
- IE + JAWS - Pass
- FF + NVDA - Fail (won't read the title)
The fix for NVDA + Firefox
Let's Test...Again!
- FF + NVDA - Pass
Interactive
Graphics
Finish design and optimization steps
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!
- Safari + VO - Pass
- IE + JAWS - Fail (won't read star description)
- FF + NVDA - Pass
The fix for JAWS + IE
Let's Test...Again!
- IE + JAWS - Pass
Take Aways...
Remember "P"erceivable and determine if alternative text is needed
- If no, hide the image/SVG
aria-hidden="true" - If yes:
- Add/link up title and/or description to the SVG element
- Use roles to add semantic value (e.g.
role="list",role="listitem")
Remember "O"perable and determine if the SVG is interactive
- If no - do nothing else
- If yes:
- Set focus with xlink +
tabindex="0" - If the link is not an actual link, add a role to ensure it is semantic
- Add JS for setting window focus
- Set visual CSS for focus: outline
- Set focus with xlink +
TEST ... a lot
- with various screen readers + browsers
- different contrast modes
- keyboard navigation
- with real users