SlideShare uma empresa Scribd logo
HTML5, WAI/ARIA e
Acessibilidade
Acessibilidade Web - Evolução e Tendências
Rio de Janeiro - 15 de setembro de 2011
Reinaldo Ferraz – W3C.br
Um pouco do W3C
É um consórcio internacional,
criado em 1994 por Tim Berners-
Lee com
• organizações filiadas,
• uma equipe em tempo integral,
• participação do público
para colaborativamente
desenvolver padrões universais
para a Web.
O W3C no Brasil
O escritório brasileiro começou suas atividades
em outubro de 2007.
É uma iniciativa do CGI.br, que é o responsável
por coordenar e integrar as iniciativas de
serviços da Internet no País e do NIC.br, criado
para implementar as decisões e os projetos do
Comitê Gestor da Internet no Brasil.
Acessibilidade na web
HTML4 – XHTML – HTML5
Acessibilidade na web
HTML 5 [HyperText Markup Language]
1991 – html tag – Tim Berners Lee
1994 – HTML 2 - já incluia tag <img>
1997 – HTML 3.2
1999 – HTML 4.01
2000 – XHTML 1.0
2001 – XHTML 1.1 – CSS
20... – Ian Hickson (Opera) propõe estender HTML:
Web Forms 2.0, Web Apps 1.0
2004 – Apple, Mozilla e Opera criam WHAT WG
(Web Hypertext Application Technology
Working Group)
2007 – W3C retorna HTML Working Group
2009 – W3C descontinua XHTML
2010-2011 – Apple, Google, Microsoft, Mozilla e Opera
implementam HTML5
Acessibilidade na web
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Acessibilidade na web
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Acessibilidade na web
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
Acessibilidade na web e HTML5
Boas novas!
Acessibilidade na web e HTML5
TABELAS
Acessibilidade na web e HTML5
“As tabelas não devem ser utilizadas como auxiliares de layout.
Historicamente, alguns autores têm abusado das tabelas em HTML,
como forma de controlar o seu layout de página. Esse uso não é
recomendado, porque as ferramentas que tentam extrair os dados
tabulares de tais documentos obtém resultados confusos. Em
particular, os usuários de ferramentas de acessibilidade, como
leitores de tela podem achar muito difícil de navegar em páginas com
tabelas usadas para layout.”
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
Acessibilidade na web e HTML5
Recomendações que permanecem
Formulários
Acessibilidade na web e HTML5
Em um campo de entrada de texto:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
Em um campo checkbox:
<input type="checkbox" id="markuplang" name="computerskills“>
<label for="markuplang">HTML</label>
Acessibilidade na web e HTML5
ARIA e HTML5
ARIA e HTML5
Ao infinito e além!
ARIA e HTML5
WAI-ARIA (Accessible Rich Internet Applications)
define uma forma de tornar o conteúdo e
aplicativos web mais acessíveis a pessoas com
deficiências. Ele contribui especialmente com
conteúdo dinâmico e interface de controles de
usuário avançadas desenvolvidos com Ajax, HTML,
JavaScript e tecnologias relacionadas.
http://www.w3.org/WAI/intro/aria
ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
alert
Alertdialog
button
checkbox
dialog
menu
menubar
menuitem
option
...
http://www.w3.org/TR/wai-aria/roles#role_definitions
ARIA e HTML5
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-expanded (state)
aria-flowto
aria-grabbed (state)
35 States and Properties (Estados e Propriedades)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
...
http://www.w3.org/TR/wai-aria/states_and_properties
ARIA e HTML5
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.
ARIA e HTML5
<a href="#“
id="handle_zoomSlider“
role="slider“
aria-orientation="vertical“
aria-valuemin="0“
aria-valuemax="17“
aria-valuetext="14“
aria-valuenow="14" >
<span>11</span>
</a>
Os novos elementos
Semântica
Os novos elementos
Os novos elementos
Vídeo em HTML5
Video
http://www.w3.org/2009/02/ThisIsCoffee.html
Vídeo em HTML5
Legendas em SVG
O que ficou de fora do HTML5?
E o que ficou de fora do HTML5?
O que ficou de fora do HTML5?
abbr, align, allowtransparency, archive,
background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color,
compact, frameborder, height, hspace,
link, marginbottom, marginheight,
marginleft, marginright, margintop,
marginwidth, noshade, nowrap, profile,
rev, rules, scheme, scrolling, size, standby,
target, text, urn, valign, valuetype,
version, vlink, vspace, width
O que ficou de fora do HTML5?
abbr, align, allowtransparency, archive,
background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color,
compact, frameborder, height, hspace,
link, marginbottom, marginheight,
marginleft, marginright, margintop,
marginwidth, noshade, nowrap, profile,
rev, rules, scheme, scrolling, size, standby,
target, text, urn, valign, valuetype,
version, vlink, vspace, width
Acessibilidade na web
Quem gera o código mais
acessível?
HTML4
XHTML
HTML5
ARIA
HTML5 + CSS3 + ARIA
XHTML + CSS2
Acessibilidade na web
Você
Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz

Mais conteúdo relacionado

Mais procurados

Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
Fábio Flatschart
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
Fábio Flatschart
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
Ana Carolina Gracioso
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
Reinaldo Ferraz
 
Workshop Museus– trabalho colaborativo e tecnologias sociais
Workshop Museus– trabalho colaborativo e tecnologias sociaisWorkshop Museus– trabalho colaborativo e tecnologias sociais
Workshop Museus– trabalho colaborativo e tecnologias sociais
Serpentina
 

Mais procurados (8)

Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Workshop Museus– trabalho colaborativo e tecnologias sociais
Workshop Museus– trabalho colaborativo e tecnologias sociaisWorkshop Museus– trabalho colaborativo e tecnologias sociais
Workshop Museus– trabalho colaborativo e tecnologias sociais
 

Destaque

Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
aiadufmg
 
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
Diaspark
 
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
UNESP
 
Aula 14 elementos de bloco
Aula 14 elementos de blocoAula 14 elementos de bloco
Aula 14 elementos de bloco
Jolvani Morgan
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
diogolevel3
 
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
Naira Michelle Alves Pereira
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
Know Solutions
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semântica
samuelfructuoso
 
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
Jolvani 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 - UFLA
Thiago Nascimento Oliveira
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
Campus Party Brasil
 
Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7
André Seiji Goto
 
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
Richard Duchatsch Johansen
 
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
waltermancheno66
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queries
Willian Watanabe
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
Logan Web
 
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
Reinaldo Ferraz
 
Seletores css
Seletores cssSeletores css
Seletores css
diogolevel3
 
Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTML
Tales Augusto
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidade
Renan Alfarth
 

Destaque (20)

Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
 
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
 
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
 
Aula 14 elementos de bloco
Aula 14 elementos de blocoAula 14 elementos de bloco
Aula 14 elementos de bloco
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
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
 
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
 
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
 
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
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
 
Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7Sistemas para internet Faccamp - aula7
Sistemas para internet Faccamp - aula7
 
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
 
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
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queries
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
 
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
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTML
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidade
 

Semelhante a HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011

HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012
Reinaldo Ferraz
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Fábio Flatschart
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
Ubiratan Z. do Nascimento
 
O HTML 5 e o futuro da web
O HTML 5 e o futuro da webO HTML 5 e o futuro da web
O HTML 5 e o futuro da web
Campus Party Brasil
 
Algumas Html5 API's para usar já!
Algumas Html5 API's para usar já!Algumas Html5 API's para usar já!
Algumas Html5 API's para usar já!
Yasodara Cordova
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
Clauber Stipkovic
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
Danilo Sousa
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
CELULA CURSOS
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Centro Web
 
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
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Centro Web
 
Web Standards
Web StandardsWeb Standards
Web Standards
George Mendonça
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
Náiron Jcg
 
HTML5
HTML5HTML5
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
Gustavo Zimmermann
 
Minicurso HTML5
Minicurso HTML5Minicurso HTML5
Minicurso HTML5
Manoel dos Santos
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
Instituto Faber-Ludens
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
Leandro Borges
 
HTML5 - O Futuro da web
HTML5 - O Futuro da webHTML5 - O Futuro da web
HTML5 - O Futuro da web
Alexandre Rodrigues
 

Semelhante a HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011 (20)

HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
 
O HTML 5 e o futuro da web
O HTML 5 e o futuro da webO HTML 5 e o futuro da web
O HTML 5 e o futuro da web
 
Algumas Html5 API's para usar já!
Algumas Html5 API's para usar já!Algumas Html5 API's para usar já!
Algumas Html5 API's para usar já!
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
HTML5
HTML5HTML5
HTML5
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Minicurso HTML5
Minicurso HTML5Minicurso HTML5
Minicurso HTML5
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
HTML5 - O Futuro da web
HTML5 - O Futuro da webHTML5 - O Futuro da web
HTML5 - O Futuro da web
 

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ó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
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
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
 
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
 
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
 
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
 

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
 
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
 
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
 
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
 
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?
 

Último

Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
tnrlucas
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
Rafael Santos
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
anpproferick
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
anpproferick
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Annelise Gripp
 
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptxREDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
IranyGarcia
 

Último (6)

Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
 
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptxREDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
 

HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011

  • 1. HTML5, WAI/ARIA e Acessibilidade Acessibilidade Web - Evolução e Tendências Rio de Janeiro - 15 de setembro de 2011 Reinaldo Ferraz – W3C.br
  • 2. Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim Berners- Lee com • organizações filiadas, • uma equipe em tempo integral, • participação do público para colaborativamente desenvolver padrões universais para a Web.
  • 3. O W3C no Brasil O escritório brasileiro começou suas atividades em outubro de 2007. É uma iniciativa do CGI.br, que é o responsável por coordenar e integrar as iniciativas de serviços da Internet no País e do NIC.br, criado para implementar as decisões e os projetos do Comitê Gestor da Internet no Brasil.
  • 4. Acessibilidade na web HTML4 – XHTML – HTML5
  • 5. Acessibilidade na web HTML 5 [HyperText Markup Language] 1991 – html tag – Tim Berners Lee 1994 – HTML 2 - já incluia tag <img> 1997 – HTML 3.2 1999 – HTML 4.01 2000 – XHTML 1.0 2001 – XHTML 1.1 – CSS 20... – Ian Hickson (Opera) propõe estender HTML: Web Forms 2.0, Web Apps 1.0 2004 – Apple, Mozilla e Opera criam WHAT WG (Web Hypertext Application Technology Working Group) 2007 – W3C retorna HTML Working Group 2009 – W3C descontinua XHTML 2010-2011 – Apple, Google, Microsoft, Mozilla e Opera implementam HTML5
  • 9. Acessibilidade na web e HTML5 Boas novas!
  • 10. Acessibilidade na web e HTML5 TABELAS
  • 11. Acessibilidade na web e HTML5 “As tabelas não devem ser utilizadas como auxiliares de layout. Historicamente, alguns autores têm abusado das tabelas em HTML, como forma de controlar o seu layout de página. Esse uso não é recomendado, porque as ferramentas que tentam extrair os dados tabulares de tais documentos obtém resultados confusos. Em particular, os usuários de ferramentas de acessibilidade, como leitores de tela podem achar muito difícil de navegar em páginas com tabelas usadas para layout.” http://www.w3.org/TR/html5/tabular-data.html#the-table-element
  • 12. Acessibilidade na web e HTML5 Recomendações que permanecem Formulários
  • 13. Acessibilidade na web e HTML5 Em um campo de entrada de texto: <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" /> Em um campo checkbox: <input type="checkbox" id="markuplang" name="computerskills“> <label for="markuplang">HTML</label>
  • 15. ARIA e HTML5 ARIA e HTML5 Ao infinito e além!
  • 16. ARIA e HTML5 WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. http://www.w3.org/WAI/intro/aria
  • 17. ARIA e HTML5 progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip 73 ROLES (Ou Papéis) alert Alertdialog button checkbox dialog menu menubar menuitem option ... http://www.w3.org/TR/wai-aria/roles#role_definitions
  • 18. ARIA e HTML5 aria-activedescendant aria-atomic aria-autocomplete aria-busy (state) aria-checked (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-expanded (state) aria-flowto aria-grabbed (state) 35 States and Properties (Estados e Propriedades) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns ... http://www.w3.org/TR/wai-aria/states_and_properties
  • 19. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  • 20. ARIA e HTML5 <a href="#“ id="handle_zoomSlider“ role="slider“ aria-orientation="vertical“ aria-valuemin="0“ aria-valuemax="17“ aria-valuetext="14“ aria-valuenow="14" > <span>11</span> </a>
  • 25. O que ficou de fora do HTML5? E o que ficou de fora do HTML5?
  • 26. O que ficou de fora do HTML5? abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing, classid, clear, code, codetype, color, compact, frameborder, height, hspace, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign, valuetype, version, vlink, vspace, width
  • 27. O que ficou de fora do HTML5? abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing, classid, clear, code, codetype, color, compact, frameborder, height, hspace, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign, valuetype, version, vlink, vspace, width
  • 28. Acessibilidade na web Quem gera o código mais acessível? HTML4 XHTML HTML5 ARIA HTML5 + CSS3 + ARIA XHTML + CSS2
  • 30. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz