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

What's hot

What's hot (20)

Accessibility
AccessibilityAccessibility
Accessibility
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Lecture 02 fundamental concepts of internet and www khalid khan
Lecture 02 fundamental concepts of internet and www khalid khanLecture 02 fundamental concepts of internet and www khalid khan
Lecture 02 fundamental concepts of internet and www khalid khan
 
WCAG 2.1 Mobile Accessibility
WCAG 2.1 Mobile AccessibilityWCAG 2.1 Mobile Accessibility
WCAG 2.1 Mobile Accessibility
 
Advantages And Disadvantages Of Joomla
Advantages And Disadvantages Of JoomlaAdvantages And Disadvantages Of Joomla
Advantages And Disadvantages Of Joomla
 
Snapchat
SnapchatSnapchat
Snapchat
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designing
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
Wordpress ppt
Wordpress pptWordpress ppt
Wordpress ppt
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
SNAPCHAT
SNAPCHATSNAPCHAT
SNAPCHAT
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development Process
 
Java script
Java scriptJava script
Java script
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
CSS Grid vs. Flexbox
CSS Grid vs. FlexboxCSS Grid vs. Flexbox
CSS Grid vs. Flexbox
 
Web Development
Web DevelopmentWeb Development
Web Development
 

Similar to SVG Icons and Screen Reader Accessibility

Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Graham Armfield
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2Graham Armfield
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2Graham Armfield
 
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 SEOReinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOCentro Web
 
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
 

Similar to SVG Icons and Screen Reader Accessibility (20)

Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2
 
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
 

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

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Recently uploaded (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

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"