SlideShare a Scribd company logo
1 of 27
Download to read offline
Dennis Lembrée (@DennisL)
#CSUNATC19
SVG Icons and Screen Reader
Accessibility
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
• 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
• 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
• 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
Great support: caniuse.com/#feat=svg
SVG Support
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>
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
Inline
<svg version="1.1">
<title>red square</title>
<rect width="40" height="40" fill="#cc0000" />
</svg>
Embedding SVG - inline
Will need to add
somethin’ here
Image element
<img src="checkmark.svg" width="50" alt="checkmark">
Embedding SVG - <img>
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.
Background
• Use the same accessibility techniques as any
other CSS background
.hero {
background-image:url(‘awesomeSVG.svg’);
}
Embedding SVG - background
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
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
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
Screen Reader Test
Page: Screen Shot
• 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
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
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
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
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
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
+
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
For IE
<a href="warning.html" aria-label="view warning">
<svg focusable="false">
<use xlink:href="#warning"></use>
</svg>
</a>
Summary - IE focusing code
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
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
• Is SVG used in your web projects?
• How do your findings compare?
• Questions?
Discussion Link to this PowerPoint:
bit.ly/svgcsun19

More Related Content

Similar to SVG Icons and Screen Reader Accessibility

Switch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVGSwitch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVGExove
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOCentro Web
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOReinaldo Ferraz
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesMario Heiderich
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicAkila Iroshan
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
Html5 Canvas Detail
Html5 Canvas DetailHtml5 Canvas Detail
Html5 Canvas DetailNisa Soomro
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 featuresGill Cleeren
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes BackMatt Baxter
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptGjokica Zafirovski
 

Similar to SVG Icons and Screen Reader Accessibility (20)

SVG 101
SVG 101SVG 101
SVG 101
 
Chapter 7: Images
Chapter 7: ImagesChapter 7: Images
Chapter 7: Images
 
Switch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVGSwitch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVG
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
Next generation Graphics: SVG
Next generation Graphics: SVGNext generation Graphics: SVG
Next generation Graphics: SVG
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Svghtml5 Meetup
Svghtml5 MeetupSvghtml5 Meetup
Svghtml5 Meetup
 
Html5 Canvas Detail
Html5 Canvas DetailHtml5 Canvas Detail
Html5 Canvas Detail
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 

More from Dennis Lembree

HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosDennis Lembree
 
Networking with Twitter, Part 2
Networking with Twitter, Part 2Networking with Twitter, Part 2
Networking with Twitter, Part 2Dennis Lembree
 
Networking with Twitter, Part 1
Networking with Twitter, Part 1Networking with Twitter, Part 1
Networking with Twitter, Part 1Dennis Lembree
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web ApplicationDennis Lembree
 
Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)Dennis Lembree
 
Accessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 TweetupAccessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 TweetupDennis Lembree
 
"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010Dennis Lembree
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript AccessibleDennis Lembree
 
Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010Dennis Lembree
 
EASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web AccessibilityEASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web AccessibilityDennis Lembree
 
Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12Dennis Lembree
 
Accessible Twitter at Open Web Camp
Accessible Twitter at Open Web CampAccessible Twitter at Open Web Camp
Accessible Twitter at Open Web CampDennis Lembree
 
Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Dennis Lembree
 

More from Dennis Lembree (15)

HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
Networking with Twitter, Part 2
Networking with Twitter, Part 2Networking with Twitter, Part 2
Networking with Twitter, Part 2
 
Networking with Twitter, Part 1
Networking with Twitter, Part 1Networking with Twitter, Part 1
Networking with Twitter, Part 1
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)
 
AccessU 2011 Keynote
AccessU 2011 KeynoteAccessU 2011 Keynote
AccessU 2011 Keynote
 
Accessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 TweetupAccessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 Tweetup
 
"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010
 
EASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web AccessibilityEASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web Accessibility
 
Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12
 
Accessible Twitter at Open Web Camp
Accessible Twitter at Open Web CampAccessible Twitter at Open Web Camp
Accessible Twitter at Open Web Camp
 
Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0
 

Recently uploaded

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 

Recently uploaded (20)

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 

SVG Icons and Screen Reader 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
  • 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
  • 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

Editor's Notes

  1. https://css-tricks.com/icon-fonts-vs-svg/ https://css-tricks.com/using-svg/
  2. Can use server-side techniques to embed on page https://css-tricks.com/svg-use-external-source/ https://codepen.io/hexalys/pen/epErZj/ https://github.com/jonathantneal/svg4everybody (polyfill) https://en.wikipedia.org/wiki/UC_Browser (world’s 4th most popular browser)
  3. icon-play svg in link: http://www.easychirp.com/status/1102712072922492928
  4. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
  5. VO (Mac 10.14.2) + Safari (Mac 12.0.2)
  6. HTML Accessibility API Mappings 1.0 (W3C Working Draft 31 Jan 2019) API Mappings: w3.org/TR/html-aam-1.0/#details-id-130 <svg> element has role of "graphics-document"