Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SVG Icons and Screen Reader Accessibility


Published on

SVG is often used for content, linked icons, and buttons. Learn which coding methods perform best across a variety of screen reader and browser combinations. By @DennisL

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SVG Icons and Screen Reader Accessibility

  1. 1. Dennis Lembrée (@DennisL) #CSUNATC19 SVG Icons and Screen Reader Accessibility
  2. 2. Link to this PowerPoint: • About @DennisL & You • About SVG • SVG Support • Embedding SVG (on web) • Screen Reader Test Page • Summary (Recommendations) • Moving Forward • Discussion Agenda
  3. 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. 4. • Scalable Vector Graphics • • 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. 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. 6. Great support: SVG Support
  7. 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. 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. 9. Inline <svg version="1.1"> <title>red square</title> <rect width="40" height="40" fill="#cc0000" /> </svg> Embedding SVG - inline
  10. 10. Will need to add somethin’ here Image element <img src="checkmark.svg" width="50" alt="checkmark"> Embedding SVG - <img>
  11. 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. 12. Background • Use the same accessibility techniques as any other CSS background .hero { background-image:url(‘awesomeSVG.svg’); } Embedding SVG - background
  13. 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. 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. 15. (or: • 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. 16. Screen Reader Test Page: Screen Shot
  17. 17. • On Dennis’ personal GitHub: • • How you can help • Add test results • Confirm data • Add popular test cases not included Screen Reader Test Page: Open Source
  18. 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. 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. 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. 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. 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. 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. 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. 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. 26. WAI-ARIA Graphics Module • W3C Recommendation 02 October 2018 • Definition of Roles: • 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. 27. • Is SVG used in your web projects? • How do your findings compare? • Questions? Discussion Link to this PowerPoint: