SlideShare a Scribd company logo
Accessibility on SVG and SEO
Reinaldo Ferraz – CEWEB.br
Objective
• Facilitate the participation of Brazilian community in global Web development
enviroment
Mission
• Promote activities that encourage the use of open technologies and
standardized on the Web.
Web Technologies Study Center
• SVG format vs bitmap format
• Accessible images on the web
• Describing images on the Web
• Screen readers and browser tests
• Search Engine Optimization
• The experiment
• Conclusion
Summary
SVG format vs bitmap format
• Images on the web needs alternative text, for screen readers users
Accessible images on the web
Picture of
keyboard
keys W, 3
and C
<img src=” star.svg” alt=”an illustration of a star”>
<svg xmlns="http://www.w3.org/2000/svg" width="200"
height="200">
<!—rest of SVG code-->
</svg>
Accessible images on the web
The <desc> and <title> elements:
According to SVG documentation, these two elements are intended to
describe images. Both elements are rendered as text and are not
visible in the browser. The <title> element could show a tooltip when
the user mouse over it (this depends on its implementation by
browsers).
Describing SVG images on the Web
The <text> element:
Defines a composite graphic element of text. Some attributes may
define visual characteristics, such as direction of the text, position and
filling-in of the text. This element is rendered in text on the page, and
is displayed visually by the Web browser. Its position on the page and
also in the SVG graph depends on their position in the code and also
the X and Y co-ordinates that define their position within the
container.
Describing SVG images on the Web
The role=”img” and aria-label=”description” attributes:
The role=”img” attribute changes the semantics of the element so it
behaves as an image, while the attribute aria-label=”description”
provide a description of the element in which it has been inserted.
Describing SVG images on the Web
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" id="svg01"aria-
labelledby="title-star" aria-describedby="desc-star">
<title id="title-star">Estrela azul no elemento TITLE</title>
<desc id="desc-star">Imagem de uma estrela azul sobre um círculo vermelho
no elemento DESC</desc>
<g transform="translate(0,-852.36218)">
<path style="fill:#ff0000;stroke:#9b0000;stroke-width:10;" d="m 144.10177,103.8611
a 51.799896,51.799896 0 1 1 -103.599794,0 51.799896,51.799896 0 1 1
103.599794,0 z" transform="translate(5.6978374,845.45332)" role="img" aria-
label="Imagem de uma estrela azul no atributo ARIA-LABEL" />
<path style="fill:#006a92;stroke:navy;stroke-width:10;" d="M 106.58415,98.958225
69.586242,79.647381 32.703751,99.177762 39.636472,58.023282
9.6646592,28.981168 50.947225,22.857144 69.306117,-14.622251
87.887424,22.747375 129.20566,28.625949 99.40697,57.845672 z"
transform="translate(28.564552,907.03667)" />
<text style="fill:#ffffff;">
<tspan x="62.024254" y="948.65192">This is a star</tspan>
</text>
</g>
</svg>
Text alternatives on SVG
<TITLE> <DESC> <TEXT> "ARIA-LABEL"
SAFARI 9 / VOICEOVER 7 / MACOS X Yes Yes Yes Yes
FIREFOX 44 / VOICEOVER 7 / MACOS X No No Yes Yes
CHROME 48 / VOICEOVER 7 MACOS X Yes No Yes Yes
IE11/ JAWS 17 / WINDOWS 7 Yes Yes Yes Yes
FIREFOX 44 / JAWS 17 / WINDOWS 7 No No Yes Yes
CHROME 48 / JAWS 17 / WINDOWS 7 No No Yes Yes
IE11 / NVDA 2016 / WINDOWS 7 Yes No Yes No
FIREFOX 44 / NVDA 2016 / WINDOWS 7 No No Yes Yes
CHROME 48 / NVDA 2016 / WINDOWS 7 Yes No Yes Yes
Screen Readers and Browsers tests
• The technique of developing websites in a way that they are search-
engine friendly is called Search Engine Optimization (SEO).
• This technique consists of a group of technical strategies used to
increase the number of visitors to a website by obtaining a high-
ranking position in the search engine results page
• Search engine optimization is based on making small modifications
to parts of websites (including image descriptions).
Search Engine Optimization
• Alternative texts are important for Web Accessibility but how this
texts are indexed by search engines on the Web?
• One image in SVG format was published on a Website
• Images were published using the following resources:
• Elements <desc>, <title> and <text>
• Attributes role=“img” and aria-label=“description”
• The tests were made using Google, Bing, DuckDuckGo and Yahoo
search engines
The experiment
The content was indexed by search engines.
Text alternatives and indexation
The content was indexed by search engines.
Text alternatives and indexation
The content was indexed by search engines.
Text alternatives and indexation
The content was indexed by search engines.
Text alternatives and indexation
Google Yahoo Bing
Duck Duck
Go
<desc> Yes Yes Yes Yes
<title> No No No No
<text> Yes Yes Yes Yes
role=“img”
aria-label
No No No No
Summary
• <text> and role=“img” + aria-label=“descritpion” are accessed by
most screen readers and browsers tested
• <desc> and <text> are indexed by all search engine tools tested
• The combination of these elements can bring more accessibility for
imagens in SVG and can be better indexed by search engine.
Conclusions
Thank you
www.ceweb.br
reinaldo@nic.br @reinaldoferraz

More Related Content

Similar to Accessibility on SVG and SEO

D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
Keenan Holloway
 
SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader Accessibility
Dennis Lembree
 
"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
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
Justin Avery
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2
Graham Armfield
 
Accessibility Hacks Version 2
Accessibility Hacks Version 2Accessibility Hacks Version 2
Accessibility Hacks Version 2
Graham Armfield
 
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
SVG and the web
SVG and the webSVG and the web
SVG and the web
Ken Shoufer Web Design
 
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
 
Html5
Html5Html5
Chapter 7: Images
Chapter 7: ImagesChapter 7: Images
Chapter 7: Images
Steve Guinan
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
Gil Fink
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
Ivano Malavolta
 
ALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEOALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEO
Reinaldo Ferraz
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Ontico
 
Images meet Web
Images meet WebImages meet Web
Images meet Web
傑倫 鍾
 
Biological modeling, powered by angular js
Biological modeling, powered by angular jsBiological modeling, powered by angular js
Biological modeling, powered by angular js
Gil Fink
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
Gill Cleeren
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
Gopi A
 

Similar to Accessibility on SVG and SEO (20)

D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader Accessibility
 
"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...
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
 
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
 
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
 
SVG and the web
SVG and the webSVG and the web
SVG and the web
 
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...
 
Html5
Html5Html5
Html5
 
Chapter 7: Images
Chapter 7: ImagesChapter 7: Images
Chapter 7: Images
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
ALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEOALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEO
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
 
Images meet Web
Images meet WebImages meet Web
Images meet Web
 
Biological modeling, powered by angular js
Biological modeling, powered by angular jsBiological modeling, powered by angular js
Biological modeling, powered by angular js
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 

More from Reinaldo Ferraz

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
Reinaldo Ferraz
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
Reinaldo Ferraz
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
Reinaldo Ferraz
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
Reinaldo Ferraz
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
Reinaldo Ferraz
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
Reinaldo Ferraz
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
Reinaldo Ferraz
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
Reinaldo Ferraz
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Reinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
Reinaldo Ferraz
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
Reinaldo Ferraz
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
Reinaldo Ferraz
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
Reinaldo Ferraz
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Reinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
Reinaldo Ferraz
 
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Reinaldo Ferraz
 

More from Reinaldo Ferraz (20)

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
 
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
 

Recently uploaded

Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECTUse of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Edward Blurock
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
Bangladesh Network Operators Group
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
ashishkumarrana9
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
eufdev
 
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
ffg01100
 
Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...
APNIC
 
Understanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat IntelligenceUnderstanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat Intelligence
Lumiverse Solutions Pvt Ltd
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Krishna L
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
Bangladesh Network Operators Group
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
Piotr Siuda
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
cenocb
 
Enhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfedEnhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfed
Bangladesh Network Operators Group
 
Week 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docxWeek 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docx
JunaManroe1
 
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
samyanvichadda
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
Sweet Potato Tec
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
Bangladesh Network Operators Group
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
AirtoryInc
 
Rent remote desktop server mangohost .net
Rent remote desktop server mangohost .netRent remote desktop server mangohost .net
Rent remote desktop server mangohost .net
pdfsubmission50
 
University of California, Riverside diploma
University of California, Riverside diplomaUniversity of California, Riverside diploma
University of California, Riverside diploma
eufdev
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
Edward Blurock
 

Recently uploaded (20)

Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECTUse of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
 
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
 
Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...
 
Understanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat IntelligenceUnderstanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat Intelligence
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
 
Enhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfedEnhancing seamless access using TIGERfed
Enhancing seamless access using TIGERfed
 
Week 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docxWeek 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docx
 
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
 
Rent remote desktop server mangohost .net
Rent remote desktop server mangohost .netRent remote desktop server mangohost .net
Rent remote desktop server mangohost .net
 
University of California, Riverside diploma
University of California, Riverside diplomaUniversity of California, Riverside diploma
University of California, Riverside diploma
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
 

Accessibility on SVG and SEO

  • 1. Accessibility on SVG and SEO Reinaldo Ferraz – CEWEB.br
  • 2. Objective • Facilitate the participation of Brazilian community in global Web development enviroment Mission • Promote activities that encourage the use of open technologies and standardized on the Web. Web Technologies Study Center
  • 3. • SVG format vs bitmap format • Accessible images on the web • Describing images on the Web • Screen readers and browser tests • Search Engine Optimization • The experiment • Conclusion Summary
  • 4. SVG format vs bitmap format
  • 5. • Images on the web needs alternative text, for screen readers users Accessible images on the web Picture of keyboard keys W, 3 and C
  • 6. <img src=” star.svg” alt=”an illustration of a star”> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <!—rest of SVG code--> </svg> Accessible images on the web
  • 7. The <desc> and <title> elements: According to SVG documentation, these two elements are intended to describe images. Both elements are rendered as text and are not visible in the browser. The <title> element could show a tooltip when the user mouse over it (this depends on its implementation by browsers). Describing SVG images on the Web
  • 8. The <text> element: Defines a composite graphic element of text. Some attributes may define visual characteristics, such as direction of the text, position and filling-in of the text. This element is rendered in text on the page, and is displayed visually by the Web browser. Its position on the page and also in the SVG graph depends on their position in the code and also the X and Y co-ordinates that define their position within the container. Describing SVG images on the Web
  • 9. The role=”img” and aria-label=”description” attributes: The role=”img” attribute changes the semantics of the element so it behaves as an image, while the attribute aria-label=”description” provide a description of the element in which it has been inserted. Describing SVG images on the Web
  • 10. <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" id="svg01"aria- labelledby="title-star" aria-describedby="desc-star"> <title id="title-star">Estrela azul no elemento TITLE</title> <desc id="desc-star">Imagem de uma estrela azul sobre um círculo vermelho no elemento DESC</desc> <g transform="translate(0,-852.36218)"> <path style="fill:#ff0000;stroke:#9b0000;stroke-width:10;" d="m 144.10177,103.8611 a 51.799896,51.799896 0 1 1 -103.599794,0 51.799896,51.799896 0 1 1 103.599794,0 z" transform="translate(5.6978374,845.45332)" role="img" aria- label="Imagem de uma estrela azul no atributo ARIA-LABEL" /> <path style="fill:#006a92;stroke:navy;stroke-width:10;" d="M 106.58415,98.958225 69.586242,79.647381 32.703751,99.177762 39.636472,58.023282 9.6646592,28.981168 50.947225,22.857144 69.306117,-14.622251 87.887424,22.747375 129.20566,28.625949 99.40697,57.845672 z" transform="translate(28.564552,907.03667)" /> <text style="fill:#ffffff;"> <tspan x="62.024254" y="948.65192">This is a star</tspan> </text> </g> </svg> Text alternatives on SVG
  • 11. <TITLE> <DESC> <TEXT> "ARIA-LABEL" SAFARI 9 / VOICEOVER 7 / MACOS X Yes Yes Yes Yes FIREFOX 44 / VOICEOVER 7 / MACOS X No No Yes Yes CHROME 48 / VOICEOVER 7 MACOS X Yes No Yes Yes IE11/ JAWS 17 / WINDOWS 7 Yes Yes Yes Yes FIREFOX 44 / JAWS 17 / WINDOWS 7 No No Yes Yes CHROME 48 / JAWS 17 / WINDOWS 7 No No Yes Yes IE11 / NVDA 2016 / WINDOWS 7 Yes No Yes No FIREFOX 44 / NVDA 2016 / WINDOWS 7 No No Yes Yes CHROME 48 / NVDA 2016 / WINDOWS 7 Yes No Yes Yes Screen Readers and Browsers tests
  • 12. • The technique of developing websites in a way that they are search- engine friendly is called Search Engine Optimization (SEO). • This technique consists of a group of technical strategies used to increase the number of visitors to a website by obtaining a high- ranking position in the search engine results page • Search engine optimization is based on making small modifications to parts of websites (including image descriptions). Search Engine Optimization
  • 13. • Alternative texts are important for Web Accessibility but how this texts are indexed by search engines on the Web? • One image in SVG format was published on a Website • Images were published using the following resources: • Elements <desc>, <title> and <text> • Attributes role=“img” and aria-label=“description” • The tests were made using Google, Bing, DuckDuckGo and Yahoo search engines The experiment
  • 14. The content was indexed by search engines. Text alternatives and indexation
  • 15. The content was indexed by search engines. Text alternatives and indexation
  • 16. The content was indexed by search engines. Text alternatives and indexation
  • 17. The content was indexed by search engines. Text alternatives and indexation
  • 18. Google Yahoo Bing Duck Duck Go <desc> Yes Yes Yes Yes <title> No No No No <text> Yes Yes Yes Yes role=“img” aria-label No No No No Summary
  • 19. • <text> and role=“img” + aria-label=“descritpion” are accessed by most screen readers and browsers tested • <desc> and <text> are indexed by all search engine tools tested • The combination of these elements can bring more accessibility for imagens in SVG and can be better indexed by search engine. Conclusions