SlideShare une entreprise Scribd logo
1  sur  68
 
[object Object],[object Object],[object Object],[object Object],[object Object],QUEM SOU?
[object Object],[object Object],[object Object],[object Object],[object Object],ÍNDICE
ACESSIBILIDADE
[object Object],[object Object],ACESSIBILIDADE
[object Object],ACESSIBILIDADE NA WEB
“ O poder da Web está em sua universalidade.” ACESSIBILIDADE NA WEB? (Tim Bernes-Lee – Criador da WEB) ‏
QUEM PRECISA? Juca, sem visão Mandy, sem visão e braços
QUEM PRECISA? Jeff, dificuldades motoras Bruno, paralisia cerebral
QUEM PRECISA? ,[object Object],[object Object]
QUEM PRECISA? Jack e Lara com dispositivos limitados
QUEM PRECISA? ,[object Object],[object Object]
QUEM PRECISA? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
QUEM PRECISA? Google, bilionário cego!!!
E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?
[object Object],[object Object],[object Object],[object Object],E POR QUE NÃO DEVEMOS  EXCLUÍ-LAS ?
[object Object],[object Object],[object Object],[object Object],[object Object],BRASIL – SEGUNDO IBGE
[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],<div id=“titulo”>TITULO</div> <p><strong>Lista de Itens: </strong><br /> Item 1<br /> Item 2 <br /> Item 3 <br /> </p> <h1>TITULO</h1> <h2>Lista de Itens:</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 </li> </ul> ,[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],<div id=“body”> <div id=“content”> <div id=“menu”> <div class=“item”> <a href=“#”>Item</a> </div> <div class=“item”> <a href=“#”>Item</a> </div> <div class=“item”> <a href=“#”>Item</a> </div></div></div> </div> <body> <div id=“content”> <ul id=“menu”> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> </ul> </div> </body>
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object],[object Object],O sistema deletou meus arquivos!
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],Alguem para esse negócio?! Não consigo ler!
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object],[object Object],[object Object]
PRINCIPAIS FALHAS ,[object Object],[object Object],[object Object]
Acessibilidade: Custo ou benefício?
WCAG 2.0
WCAG 2.0 ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],WCAG 2.0
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0
Perceptível:   Informação e componentes da interface do usuário devem ser apresentados aos usuários de um jeito que eles possam entender. Operável:  Componentes da interface do usuário e navegação devem ser operáveis. Compreensível:  Informação e operações da interface do usuário devem ser compreensíveis. Robusto:  Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas. WCAG 2.0 - PRINCÍPIOS
[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],WCAG 2.0 - DIRETRIZES
2.1 Fazer com que toda a funcionalidade fique disponível a partir do teclado.  ,[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],WCAG 2.0 - DIRETRIZES
“ Tecnologia Assistiva (ou de apoio) é um  software  ou  hardware  projetado para apoiar pessoas com deficiência em atividades do cotidiano.”  (W3C, 1999) www.w3.org WCAG 2.0 - DIRETRIZES
Switch Mouse Teclado virtual do  Windows Ponteira de cabeça Acesso ao computador via voz Sistema Operacional DOSVOX Lente de Aumento do  Windows
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
[object Object],[object Object],[object Object],[object Object],[object Object],WCAG 2.0 - DIRETRIZES
AVALIADORES AUTOMÁTICOS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],CONCLUSÕES
INTERATIVIDADE ,[object Object],[object Object],[object Object],[object Object]
REFERÊNCIAS ,[object Object],[object Object],[object Object],[object Object]
REFERÊNCIAS ,[object Object],[object Object],[object Object],[object Object]
MUITO  OBRIGADO! Contato: [email_address] http://diegopessoa.com

Contenu connexe

Tendances

Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
Sofia Costa
 

Tendances (11)

Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
 
8º Webinar Cloud Girls Acessibilidade Mobile
8º Webinar Cloud Girls Acessibilidade Mobile8º Webinar Cloud Girls Acessibilidade Mobile
8º Webinar Cloud Girls Acessibilidade Mobile
 
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresWebinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
 
Usabilidade em Aplicativos
Usabilidade em AplicativosUsabilidade em Aplicativos
Usabilidade em Aplicativos
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Projeto CoCoA: Um Colete de Comunicação Alternativa
Projeto CoCoA: Um Colete de Comunicação AlternativaProjeto CoCoA: Um Colete de Comunicação Alternativa
Projeto CoCoA: Um Colete de Comunicação Alternativa
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Web acessível
Web acessívelWeb acessível
Web acessível
 
Sc ad-tp-g4-a
Sc ad-tp-g4-aSc ad-tp-g4-a
Sc ad-tp-g4-a
 
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13
 

Similaire à Aplicações Web Acessíveis

Acessibilidade1
Acessibilidade1Acessibilidade1
Acessibilidade1
angeli_mk
 
Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)
Rodrigo Leme
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
aiadufmg
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
aiadufmg
 
Artigo revista tecnologia_assistiva
Artigo revista tecnologia_assistivaArtigo revista tecnologia_assistiva
Artigo revista tecnologia_assistiva
barbaragratao
 
Artigo revista tecnologia_assistiva
Artigo revista tecnologia_assistivaArtigo revista tecnologia_assistiva
Artigo revista tecnologia_assistiva
barbaragratao
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 

Similaire à Aplicações Web Acessíveis (20)

Acessibilidade1
Acessibilidade1Acessibilidade1
Acessibilidade1
 
Acessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaAcessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisa
 
Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
Inclusão Digital através da acessibilidade na web
Inclusão Digital através da acessibilidade na webInclusão Digital através da acessibilidade na web
Inclusão Digital através da acessibilidade na web
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
 
WAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeWAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e Usabilidade
 
Artigo revista tecnologia_assistiva
Artigo revista tecnologia_assistivaArtigo revista tecnologia_assistiva
Artigo revista tecnologia_assistiva
 
Artigo revista tecnologia_assistiva
Artigo revista tecnologia_assistivaArtigo revista tecnologia_assistiva
Artigo revista tecnologia_assistiva
 
E mag desenvolvedor_mod_1
E mag desenvolvedor_mod_1E mag desenvolvedor_mod_1
E mag desenvolvedor_mod_1
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Acessibilidade Comunicacional
Acessibilidade ComunicacionalAcessibilidade Comunicacional
Acessibilidade Comunicacional
 
Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Acessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaAcessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in Sampa
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquina
 

Aplicações Web Acessíveis

  • 1.  
  • 2.
  • 3.
  • 5.
  • 6.
  • 7. “ O poder da Web está em sua universalidade.” ACESSIBILIDADE NA WEB? (Tim Bernes-Lee – Criador da WEB) ‏
  • 8. QUEM PRECISA? Juca, sem visão Mandy, sem visão e braços
  • 9. QUEM PRECISA? Jeff, dificuldades motoras Bruno, paralisia cerebral
  • 10.
  • 11. QUEM PRECISA? Jack e Lara com dispositivos limitados
  • 12.
  • 13.
  • 14. QUEM PRECISA? Google, bilionário cego!!!
  • 15. E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 37.
  • 38.
  • 39.
  • 40. Perceptível: Informação e componentes da interface do usuário devem ser apresentados aos usuários de um jeito que eles possam entender. Operável: Componentes da interface do usuário e navegação devem ser operáveis. Compreensível: Informação e operações da interface do usuário devem ser compreensíveis. Robusto: Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas. WCAG 2.0 - PRINCÍPIOS
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59. “ Tecnologia Assistiva (ou de apoio) é um software ou hardware projetado para apoiar pessoas com deficiência em atividades do cotidiano.” (W3C, 1999) www.w3.org WCAG 2.0 - DIRETRIZES
  • 60. Switch Mouse Teclado virtual do Windows Ponteira de cabeça Acesso ao computador via voz Sistema Operacional DOSVOX Lente de Aumento do Windows
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68. MUITO OBRIGADO! Contato: [email_address] http://diegopessoa.com