The document outlines the presentation on scalable vector graphics (SVG) and their accessibility features, focusing on how to embed SVGs and their support across different browsers and assistive technologies. It discusses the advantages and limitations of using SVGs, especially in relation to screen readers, along with recommendations for ensuring better accessibility. The document also highlights the WAI-ARIA graphics module and future standards for improving SVG accessibility.

1. Dennis Lembrée (@DennisL)
#CSUNATC19
SVG Icons and Screen Reader
Accessibility

2. Link to this PowerPoint:
bit.ly/svgcsun19
• About @DennisL & You
• About SVG
• SVG Support
• Embedding SVG (on web)
• Screen Reader Test Page
• Summary (Recommendations)
• Moving Forward
• Discussion
Agenda

3. • Senior Accessibility Consultant at Deque Systems
• Formerly on eBay and PayPal accessibility teams
• Author of @EasyChirp and @WebAxe
• You!
• From where?
• Your title?
• SVG experience?
About @DennisL & You

4. • Scalable Vector Graphics
• w3.org/Graphics/SVG/
• SVG is a widely-deployed royalty-free graphics
format developed and maintained by the W3C
SVG Working Group.
• V1 2001
• V1.1 (2nd Ed.) 2011
About SVG

5. • Why use SVG?
• Small file sizes that compress well
• Scales to any size without losing clarity
• Arguably better for icons than fonts
• Possible to modify design with JavaScript and CSS
(more than font icons)
• Well supported
About SVG - why

6. Great support: caniuse.com/#feat=svg
SVG Support

7. EXCEPT
• IE9-Edge12, Safari 5.1-6, and UC Browser 11 do not
support referencing external files via <use xlink:href>
• So cannot cache SVG files
• Since SVG code must be rendered inline instead, causes bloated
HTML pages
• Polyfills are available such as svg4everybody
• adds to page weight
• doesn’t work without JS
SVG Support - <use>

8. Examples of <use xlink>
<svg version="1.1">
<title>red square</title>
<desc>A plain red square is nice.</desc>
<use xlink:href="external-file.svg#square"></use>
</svg>
<svg version="1.1">
<title>red square</title>
<desc>A plain red square is nice.</desc>
<use xlink:href="#icon-play"></use>
</svg>
SVG Support - <use> examples

9. Inline
<svg version="1.1">
<title>red square</title>
<rect width="40" height="40" fill="#cc0000" />
</svg>
Embedding SVG - inline

10. Will need to add
somethin’ here
Image element
<img src="checkmark.svg" width="50" alt="checkmark">
Embedding SVG - <img>

11. Image element
Advantages:
• The HTML file size will be smaller than embedding the <svg> element inline.
• The image can be cached by the browser.
• If using the SVG in multiple places, one image file makes maintenance simpler.
Disadvantages:
• JavaScript and CSS cannot be applied to the <svg> contents to animate or
manipulate images.
Embedding SVG - <img> cont.

12. Background
• Use the same accessibility techniques as any
other CSS background
.hero {
background-image:url(‘awesomeSVG.svg’);
}
Embedding SVG - background

13. Object, iFrame, Embed
• Little usage; outdated techniques
• Poorly supported by assistive technologies
<object type="image/svg+xml" data="svglogo.svg"></object>
<iframe src="image.svg"></iframe>
<embed type="image/svg+xml" src="image.svg" />
Embedding SVG - other

14. Why is ARIA needed?
<svg version="1.1">
<title>red square</title>
<desc>A plain red square is nice.</desc>
<rect width="40" height="40" fill="#cc0000" />
</svg>
Embedding SVG - ARIA

15. weboverhauls.github.io/demos/svg/ (or: bit.ly/svgsr)
• Let’s explore!
• What’s NOT here
• SVG with more than title and description text (no <text> elements)
• SVG as background images, objects, iframes, embed
• Testing with Dragon Naturally Speaking
Screen Reader Test Page

16. Screen Reader Test
Page: Screen Shot

17. • On Dennis’ personal GitHub:
• github.com/weboverhauls/demos/tree/master/svg
• How you can help
• Add test results
• Confirm data
• Add popular test cases not included
Screen Reader Test Page: Open Source

18. For content, support for inline SVG is much better.
• Support for title and description greatly improved.
• Combinations with latest browser/screen reader version passed.
• Use role, aria-labelledby, and aria-describedby
<svg role="img" aria-labelledby="title-1" aria-describedby="desc-1">
<title id="title-1">red square</title>
<desc id="desc-1">A plain red square is nice.</desc>
<rect width="40" height="40" fill="#cc0000" />
</svg>
Summary - 1

19. For content, all combinations support an IMG with an alt attribute
and role=“img” (to support older VO).
<img src="checkmark.svg" width="50" alt="checkmark"
role="img">
Summary - 2

20. For links and buttons, all combinations except Narrator support
aria-label when SVG used as content.
<a href="warning.html" aria-label="view warning">
<svg>
<use xlink:href="#warning"></use>
</svg>
</a>
Summary - 3

21. For links and buttons, all combinations except Narrator support an
IMG with an alt attribute as content (no role required).
<a href="alert.html">
<img src="alert.svg" width="50" alt="view alert">
</a>
Summary - 4

22. JAWS + IE is best combination!
• JAWS 2019 + IE 11 passed all tests
• JAWS 18 + IE 11 passed all tests!
• Nearly perfect:
• Talkback (Android 7 & 9) passed all tests but one.
• Latest VO on Mac passed all tests but one.
Summary - 5
+

23. For IE
• The attribute focusable="false" should be added to the SVG element
to ensure:
• no double focus for links and buttons (implemented on test page)
• a decorative SVG is not focusable (not implemented on test page)
• Hey, that’s not so bad…
Summary - IE focusing

24. For IE
<a href="warning.html" aria-label="view warning">
<svg focusable="false">
<use xlink:href="#warning"></use>
</svg>
</a>
Summary - IE focusing code

25. Will the standard be supported in the future?
<svg version="1.1">
<title>red square</title>
<desc>A plain red square is nice.</desc>
<use xlink:href="external.svg#square"></use>
</svg>
Moving Forward

26. WAI-ARIA Graphics Module
• W3C Recommendation 02 October 2018
• Definition of Roles: w3.org/TR/graphics-aria-1.0/#role_definitions
• graphics-document
• Use in structured graphics such as charts, maps, diagrams, technical drawing, blue prints and
instructional graphics
• graphics-object
• A section of a graphics-document that represents a distinct object or sub-component with
semantic meaning
• graphics-symbol
• A graphical object used to convey a simple meaning
• Use with fallback roles such as img and group, document
Moving Forward – Graphics Module

27. • Is SVG used in your web projects?
• How do your findings compare?
• Questions?
Discussion Link to this PowerPoint:
bit.ly/svgcsun19