SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?Myungwook Ahn
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
アジャイル開発の基礎知識 抜粋版
アジャイル開発の基礎知識 抜粋版アジャイル開発の基礎知識 抜粋版
アジャイル開発の基礎知識 抜粋版ESM SEC
 
Módulo 7–Programación Web con Java.pdf
Módulo 7–Programación Web con Java.pdfMódulo 7–Programación Web con Java.pdf
Módulo 7–Programación Web con Java.pdftripfrap
 
포트폴리오 오경원
포트폴리오 오경원포트폴리오 오경원
포트폴리오 오경원Sio Oh
 
UDA-Componentes RUP. Diálogo (v2.1.0 deprecado)
UDA-Componentes RUP. Diálogo  (v2.1.0 deprecado)UDA-Componentes RUP. Diálogo  (v2.1.0 deprecado)
UDA-Componentes RUP. Diálogo (v2.1.0 deprecado)Ander Martinez
 
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法Asa Morino
 
Spring Cloud Workshop
Spring Cloud WorkshopSpring Cloud Workshop
Spring Cloud WorkshopYongSung Yoon
 
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Shotaro Suzuki
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and ErrorsRuss Weakley
 
클린아키텍처와 DDD - day1
클린아키텍처와 DDD - day1클린아키텍처와 DDD - day1
클린아키텍처와 DDD - day1Chimin Park
 
Snp tables documentation
Snp tables documentationSnp tables documentation
Snp tables documentationMahesh Birajdar
 
ZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制について
ZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制についてZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制について
ZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制についてMasaki Hirose
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library 10Clouds
 
本当のオブジェクト指向は可読性を上げる
本当のオブジェクト指向は可読性を上げる本当のオブジェクト指向は可読性を上げる
本当のオブジェクト指向は可読性を上げるWataru Terada
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyunjaeyunjeong1
 
Redmine 4.1 新機能評価ガイド <速報版>
Redmine 4.1 新機能評価ガイド <速報版>Redmine 4.1 新機能評価ガイド <速報版>
Redmine 4.1 新機能評価ガイド <速報版>Go Maeda
 

Tendances (20)

메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
アジャイル開発の基礎知識 抜粋版
アジャイル開発の基礎知識 抜粋版アジャイル開発の基礎知識 抜粋版
アジャイル開発の基礎知識 抜粋版
 
Módulo 7–Programación Web con Java.pdf
Módulo 7–Programación Web con Java.pdfMódulo 7–Programación Web con Java.pdf
Módulo 7–Programación Web con Java.pdf
 
포트폴리오 오경원
포트폴리오 오경원포트폴리오 오경원
포트폴리오 오경원
 
UDA-Componentes RUP. Diálogo (v2.1.0 deprecado)
UDA-Componentes RUP. Diálogo  (v2.1.0 deprecado)UDA-Componentes RUP. Diálogo  (v2.1.0 deprecado)
UDA-Componentes RUP. Diálogo (v2.1.0 deprecado)
 
Digital Divides 2015
Digital Divides 2015Digital Divides 2015
Digital Divides 2015
 
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法
 
Spring Cloud Workshop
Spring Cloud WorkshopSpring Cloud Workshop
Spring Cloud Workshop
 
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
 
React js
React jsReact js
React js
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
 
클린아키텍처와 DDD - day1
클린아키텍처와 DDD - day1클린아키텍처와 DDD - day1
클린아키텍처와 DDD - day1
 
Snp tables documentation
Snp tables documentationSnp tables documentation
Snp tables documentation
 
ZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制について
ZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制についてZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制について
ZOZOTOWNで最大級のトラフィックを記録する福袋発売イベントで実施した負荷対策と、当日の監視体制について
 
Web201 slide 3
Web201   slide 3Web201   slide 3
Web201 slide 3
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
 
本当のオブジェクト指向は可読性を上げる
本当のオブジェクト指向は可読性を上げる本当のオブジェクト指向は可読性を上げる
本当のオブジェクト指向は可読性を上げる
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyun
 
Redmine 4.1 新機能評価ガイド <速報版>
Redmine 4.1 新機能評価ガイド <速報版>Redmine 4.1 新機能評価ガイド <速報版>
Redmine 4.1 新機能評価ガイド <速報版>
 

En vedette

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
 

En vedette (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
 

Plus 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
 

Plus 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