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

Destaque

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
 
Aula 14 elementos de bloco
Aula 14 elementos de blocoAula 14 elementos de bloco
Aula 14 elementos de blocoJolvani Morgan
 
Análise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLAAnálise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLAThiago Nascimento Oliveira
 

Destaque (20)

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
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Aula 14 elementos de bloco
Aula 14 elementos de blocoAula 14 elementos de bloco
Aula 14 elementos de bloco
 
Análise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLAAnálise da usabilidade e proposta de melhorias no SIG - UFLA
Análise da usabilidade e proposta de melhorias no SIG - UFLA
 

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