SlideShare uma empresa Scribd logo
1 de 50
Baixar para ler offline
Alt e Lang
Dois atributos da pesada
Alt e Lang
Dois atributos da pesada
Reinaldo Ferraz
L Classificação indicativa Livre para todos os públicos desenvolvedores Web
@reinaldoferraz
slideshare.com/reinaldoferraz
<img src=“#” alt=“Foto do Reinaldo Ferraz”>
<html lang=“pt-BR”>
Obrigado
reinaldo@nic.br @reinaldoferraz
alt
alt
https://www.w3.org/TR/html5/embedded-content-0.html#alt
O atributo “alt” em imagens é um atributo muito
importante para acessibilidade. Criação de conteúdo
útil para o atributo “alt” requer considerar
cuidadosamente o contexto em que a imagem é
exibida e a função que a imagem pode ter nesse
contexto.
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
acessibilidade
<img src="foto.jpg" alt=“Foto
das teclas W, 3 e C fora do
teclado" />
<img src=“foto.jph” alt="Foto
das teclas W, 3 e C fora do
teclado" />
<img data-aria-label-part
src=”https://pbs.twimg.com/media/CewYhp4W4AAoLbv.jpg”
alt=”Foto de um bonsai sobre uma superfície de madeira”
style=”width: 100%; top: -0px;”>
acessibilidade
http://ceweb.br/publicacao/explorando-atributos-web-relacionados-a-acessibilidade-
em-imagens-e-seu-impacto-sobre-a-indexacao-por-ferramentas-de-busca/
<img src="http://www.reinaldoferraz.com.br/wp-
content/uploads/2014/02/tr47ujhtt767.png"
alt="Foto de um pão francês em um prato branco"
title="A foto do pão é a primeira a utilizar o atributo title nesse
post“>
<img src="http://www.reinaldoferraz.com.br/wp-
content/uploads/2014/02/aswe98jdk93.png"
alt="Foto de uma ampulheta"
title="A foto da ampulheta é de autoria de Reinaldo Ferraz">
<img src="http://www.reinaldoferraz.com.br/wp-
content/uploads/2014/02/yjjl9675yp.png"
alt="Foto de uma placa com o mapa do zoológico de São Paulo"
title="Crédito desta foto: Reinaldo Ferraz">
Pesquisa em Março de 2014
Google Yahoo Bing
Duck Duck
Go
ALT Sim Não Não Não
TITLE Não Não Não Não
https://www.site-analyzer.com/
https://www.woorank.com/pt
http://www.seoworkers.com/
Pesquisa em Março de 2014
Site
Analyzer
Woorank
SEO
Workers
ALT Sim Sim Sim
TITLE Não Não Não
<p>A imagem abaixo é a foto de um rádio relógio cinza.</p>
<p>A imagem acima é uma foto de um despertador digital.</p>
<img src="http://www.reinaldoferraz.com.br/wp-
content/uploads/2014/02/2016-02-19-17.51.23.jpg" alt="" >
lang
lang
https://www.w3.org/TR/html5/dom.html#attr-lang
O atributo lang especifica o idioma primário para o
conteúdo do elemento e para qualquer um dos
atributos do elemento que contêm texto.
Atributo Global
accesskey
class
contenteditable
dir
hidden
id
lang
spellcheck
style
tabindex
title
translate
<html lang=”pt-BR”>
.....
<p>O texto da página
está em português
<span lang=”en”>and in
english</span>.
</p>
http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
acessibilidade
styling
body {
font-family:
"Times New Roman", Times, serif;
}
:lang(ar) {
font-family:
"Traditional Arabic", "Al Bayan", serif;
}
http://conferenciaweb.w3c.br/2014/palestrantes/eduardo-shiota/
font selectionfont selection
Ortografia
p { hyphens: auto;}
<p>Este é um texto sobre ontologia</p>
<p lang="pt-br">
Este é um texto sobre ontologia</p>
Resumindo:
Utilize os atributos
ALT e LANG
em seu projeto
http://conferenciaweb.w3c.br
Cupom de desconto
frontinsampa
Obrigado
reinaldo@nic.br @reinaldoferraz

Mais conteúdo relacionado

Mais procurados

From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...
From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...
From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...Databricks
 
Bridging Microservices, APIs and Integration
Bridging Microservices, APIs and IntegrationBridging Microservices, APIs and Integration
Bridging Microservices, APIs and IntegrationKasun Indrasiri
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized军 沈
 
How to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsHow to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsJarrod Overson
 
Proxy design pattern (Class Ambassador)
Proxy design pattern (Class Ambassador)Proxy design pattern (Class Ambassador)
Proxy design pattern (Class Ambassador)Sameer Rathoud
 
Manage password policy in OpenLDAP
Manage password policy in OpenLDAPManage password policy in OpenLDAP
Manage password policy in OpenLDAPLDAPCon
 
IoT with Apache ActiveMQ, Camel & Spark
IoT with Apache ActiveMQ, Camel & SparkIoT with Apache ActiveMQ, Camel & Spark
IoT with Apache ActiveMQ, Camel & SparkRed Hat Developers
 
Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)
Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)
Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)Carlos Buenosvinos
 
Web api using rest based architecture
Web api using rest based architectureWeb api using rest based architecture
Web api using rest based architectureSoham Kulkarni
 
Embedding Generic Monadic Transformer into Scala. [Tfp2022]
Embedding Generic Monadic Transformer into Scala. [Tfp2022]Embedding Generic Monadic Transformer into Scala. [Tfp2022]
Embedding Generic Monadic Transformer into Scala. [Tfp2022]Ruslan Shevchenko
 
Is Rust Programming ready for embedded development?
Is Rust Programming ready for embedded development?Is Rust Programming ready for embedded development?
Is Rust Programming ready for embedded development?Knoldus Inc.
 
Lazy vs. Eager Loading Strategies in JPA 2.1
Lazy vs. Eager Loading Strategies in JPA 2.1Lazy vs. Eager Loading Strategies in JPA 2.1
Lazy vs. Eager Loading Strategies in JPA 2.1Patrycja Wegrzynowicz
 
API : l'architecture REST
API : l'architecture RESTAPI : l'architecture REST
API : l'architecture RESTFadel Chafai
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java DevelopersYakov Fain
 
RxJava - introduction & design
RxJava - introduction & designRxJava - introduction & design
RxJava - introduction & designallegro.tech
 

Mais procurados (20)

Proxy pattern
Proxy patternProxy pattern
Proxy pattern
 
From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...
From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...
From HelloWorld to Configurable and Reusable Apache Spark Applications in Sca...
 
Bridging Microservices, APIs and Integration
Bridging Microservices, APIs and IntegrationBridging Microservices, APIs and Integration
Bridging Microservices, APIs and Integration
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
How to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsHow to Reverse Engineer Web Applications
How to Reverse Engineer Web Applications
 
Proxy Pattern
Proxy PatternProxy Pattern
Proxy Pattern
 
Proxy design pattern (Class Ambassador)
Proxy design pattern (Class Ambassador)Proxy design pattern (Class Ambassador)
Proxy design pattern (Class Ambassador)
 
Spring Ldap
Spring LdapSpring Ldap
Spring Ldap
 
Manage password policy in OpenLDAP
Manage password policy in OpenLDAPManage password policy in OpenLDAP
Manage password policy in OpenLDAP
 
IoT with Apache ActiveMQ, Camel & Spark
IoT with Apache ActiveMQ, Camel & SparkIoT with Apache ActiveMQ, Camel & Spark
IoT with Apache ActiveMQ, Camel & Spark
 
Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)
Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)
Hexagonal Architecture - PHP Barcelona Monthly Talk (DDD)
 
Web api using rest based architecture
Web api using rest based architectureWeb api using rest based architecture
Web api using rest based architecture
 
Embedding Generic Monadic Transformer into Scala. [Tfp2022]
Embedding Generic Monadic Transformer into Scala. [Tfp2022]Embedding Generic Monadic Transformer into Scala. [Tfp2022]
Embedding Generic Monadic Transformer into Scala. [Tfp2022]
 
Is Rust Programming ready for embedded development?
Is Rust Programming ready for embedded development?Is Rust Programming ready for embedded development?
Is Rust Programming ready for embedded development?
 
AlfrescoとWeb Script
AlfrescoとWeb ScriptAlfrescoとWeb Script
AlfrescoとWeb Script
 
Lazy vs. Eager Loading Strategies in JPA 2.1
Lazy vs. Eager Loading Strategies in JPA 2.1Lazy vs. Eager Loading Strategies in JPA 2.1
Lazy vs. Eager Loading Strategies in JPA 2.1
 
API : l'architecture REST
API : l'architecture RESTAPI : l'architecture REST
API : l'architecture REST
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java Developers
 
Fast api
Fast apiFast api
Fast api
 
RxJava - introduction & design
RxJava - introduction & designRxJava - introduction & design
RxJava - introduction & design
 

Destaque

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 DigitalReinaldo Ferraz
 
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectUsing WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectReinaldo Ferraz
 
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SPAcessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SPReinaldo Ferraz
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveisaiadufmg
 
Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalRichard Duchatsch Johansen
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011Reinaldo Ferraz
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semânticasamuelfructuoso
 
Web Semântica no Domínio Bibliográfico
Web Semântica no Domínio BibliográficoWeb Semântica no Domínio Bibliográfico
Web Semântica no Domínio BibliográficoUNESP
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenowaltermancheno66
 
Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7André Seiji Goto
 
Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationDiaspark
 

Destaque (20)

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
 
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible projectUsing WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Acessibilidade na Web
Acessibilidade na WebAcessibilidade na Web
Acessibilidade na Web
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
 
Como ser Único (sexy)?
Como ser Único (sexy)?Como ser Único (sexy)?
Como ser Único (sexy)?
 
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SPAcessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
 
Pensando em Redesign
Pensando em RedesignPensando em Redesign
Pensando em Redesign
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
 
Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacional
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semântica
 
Web Semântica no Domínio Bibliográfico
Web Semântica no Domínio BibliográficoWeb Semântica no Domínio Bibliográfico
Web Semântica no Domínio Bibliográfico
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter mancheno
 
Web semântica: em busca da web inteligente
Web semântica: em busca da web inteligenteWeb semântica: em busca da web inteligente
Web semântica: em busca da web inteligente
 
Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7
 
Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions application
 

Mais de 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ódigoReinaldo 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 webReinaldo 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 attributesReinaldo Ferraz
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIAReinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOReinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websitesReinaldo 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áquinasReinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEOReinaldo Ferraz
 
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 SEOReinaldo 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
 
Re-descentralizar a web!
Re-descentralizar a web!Re-descentralizar a web!
Re-descentralizar a web!Reinaldo Ferraz
 

Mais de 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
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
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
 
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
 
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
 
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?
 
Re-descentralizar a web!
Re-descentralizar a web!Re-descentralizar a web!
Re-descentralizar a web!
 

Alt e Lang: atributos essenciais para acessibilidade e em