SlideShare a Scribd company logo
1 of 20
Download to read offline
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

Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Ontico
 

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 Centro Web

More from Centro Web (20)

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade Estendida
 
Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na
 
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
 
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
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisas
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e Inclusão
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake News
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivo
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web Platform
 

Recently uploaded

一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
AS
 
原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样
A
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
AS
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
AS
 
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
rgdasda
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样
AS
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
Fi
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
Fir
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
B
 

Recently uploaded (20)

Free scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsFree scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirts
 
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
 
原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
Discovering OfficialUSA.com Your Go-To Resource.pdf
Discovering OfficialUSA.com Your Go-To Resource.pdfDiscovering OfficialUSA.com Your Go-To Resource.pdf
Discovering OfficialUSA.com Your Go-To Resource.pdf
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
 
APNIC Updates presented by Paul Wilson at CaribNOG 27
APNIC Updates presented by Paul Wilson at  CaribNOG 27APNIC Updates presented by Paul Wilson at  CaribNOG 27
APNIC Updates presented by Paul Wilson at CaribNOG 27
 
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
The Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdfThe Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdf
 

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