SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
Acessibilidade na
      Web
     Laerte Guedes
Acessibilidade na Web
Acessibilidade na Web -
            Conceito
•  Acessibilidade na Web significa o
   desenvolvimento de sites e serviços web
   que possam ser entendidos e navegáveis
   por qualquer pessoa, independente de ser
   portadora ou não de deficiência física.
Acessibilidade na Web - Alvo
•  Deficientes visuais (não somente cegos).
•  Pessoas incapazes de utilizar teclado ou
   mouse.
•  Tenham outros tipos de deficiências
   (auditiva, por exemplo).
Acessibilidade na Web – W3C
Acessibilidade na Web – W3C
•  É um consórcio internacional que visa
   desenvolver padrões para a criação e
   interpretação de conteúdos para a web.
   Um guia chamado de WCAG (Web
   Content Accessibility Guidelines) trata a
   respeito da acessibilidade na web,
   prevendo 3 níveis de conformidade: A, AA,
   AAA.
Dicas de Acessibilidade: O que
   fazer e o que NÃO fazer
•  Apartir do WCAG podemos tirar algumas
   dicas do que fazer e do que não fazer em
   nosso website.
Dicas de Acessibilidade: O que
            fazer
Dicas de Acessibilidade: O que
            fazer
•  Coloque textos descrição em texto nas
   imagens (atributo ALT).
Dicas de Acessibilidade: O que
            fazer
•  Organize o documento para que ele faça
   sentido sem suas folhas de estilo.
•  Garanta o funcionamento da página
   mesmo com Client Side Scripts
   desativados (por exemplo, funcione sem
   JavaScript ou Flash).
Dicas de Acessibilidade: O que
             fazer
•  Utilize cabeçalhos para definir a hierarquia
   do conteúdo do documento.
•  Divida grandes blocos de informação em
   partes menores e apropriadas.
•  Posicione adequadamente os labels dos
   elementos de formulários
•  Use folhas de estilos para formatação.
Dicas de Acessibilidade: O que
          NÃO fazer
Dicas de Acessibilidade: O que
          NÃO fazer
•  Não use “blink”, “marquee” ou nada que
   fique piscando ou correndo na tela.
•  Evite o uso excessivo de verde e/ou
   vermelho e principalmente o contraste
   entre ambas.
•  Não abra pop-ups sem avisar.
•  Não use textos longos demais.
Dicas de Acessibilidade: O que
          NÃO fazer
•  Não tabelas para layout.
•  Evite o chamado “Efeito Las Vegas”.
Fontes
•  http://www.acessibilidadelegal.com
•  http://rubsphp.blogspot.com.br
Obrigado!

Mais conteúdo relacionado

Mais procurados

A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]José Marques
 
CMS Livres Gestao de conhecimento para web
CMS Livres   Gestao de conhecimento para webCMS Livres   Gestao de conhecimento para web
CMS Livres Gestao de conhecimento para webPaulino Michelazzo
 
Wordpress - Mais que um gerenciador de blogs, um CMS completo!
Wordpress - Mais que um gerenciador  de blogs, um CMS completo!Wordpress - Mais que um gerenciador  de blogs, um CMS completo!
Wordpress - Mais que um gerenciador de blogs, um CMS completo!Walter Araujo dos Santos
 
Oficina Blogger - C.E Décio Dossi
Oficina  Blogger - C.E Décio DossiOficina  Blogger - C.E Décio Dossi
Oficina Blogger - C.E Décio DossiHiderson Marciano
 
Apresentação_Aula HCW
Apresentação_Aula HCWApresentação_Aula HCW
Apresentação_Aula HCWfdaniell
 
CMS e Midias Sociais
CMS e Midias SociaisCMS e Midias Sociais
CMS e Midias SociaisEdney Souza
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalEmerson Barros
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019Maurício Pereiro
 
Minicurso WordPress
Minicurso WordPressMinicurso WordPress
Minicurso WordPressEdson Silva
 

Mais procurados (17)

Arte Do Design Para Plone
Arte Do Design Para PloneArte Do Design Para Plone
Arte Do Design Para Plone
 
O que é blog
O que é blogO que é blog
O que é blog
 
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]
 
CMS Livres Gestao de conhecimento para web
CMS Livres   Gestao de conhecimento para webCMS Livres   Gestao de conhecimento para web
CMS Livres Gestao de conhecimento para web
 
Wordpress - Mais que um gerenciador de blogs, um CMS completo!
Wordpress - Mais que um gerenciador  de blogs, um CMS completo!Wordpress - Mais que um gerenciador  de blogs, um CMS completo!
Wordpress - Mais que um gerenciador de blogs, um CMS completo!
 
Oficina Blogger - C.E Décio Dossi
Oficina  Blogger - C.E Décio DossiOficina  Blogger - C.E Décio Dossi
Oficina Blogger - C.E Décio Dossi
 
Apresentação_Aula HCW
Apresentação_Aula HCWApresentação_Aula HCW
Apresentação_Aula HCW
 
CMS Livres na Dataprev
CMS Livres na DataprevCMS Livres na Dataprev
CMS Livres na Dataprev
 
Apresentação1
Apresentação1Apresentação1
Apresentação1
 
Apresentação1
Apresentação1Apresentação1
Apresentação1
 
HTML 5 & JavaScript
HTML 5 & JavaScriptHTML 5 & JavaScript
HTML 5 & JavaScript
 
O blog como ferramenta de comunicação
O blog como ferramenta de comunicaçãoO blog como ferramenta de comunicação
O blog como ferramenta de comunicação
 
CMS e Midias Sociais
CMS e Midias SociaisCMS e Midias Sociais
CMS e Midias Sociais
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) Drupal
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
 
Blog
BlogBlog
Blog
 
Minicurso WordPress
Minicurso WordPressMinicurso WordPress
Minicurso WordPress
 

Destaque

Definição de uma política de acessibilidade web para Portugal
Definição de uma política de acessibilidade web para PortugalDefinição de uma política de acessibilidade web para Portugal
Definição de uma política de acessibilidade web para PortugalJorge Fernandes
 
Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Reinaldo Ferraz
 
Padrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAGPadrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAGGovBR
 
Acessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosAcessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosVanessa Me Tonini
 
Acessibilidade na Web - edted2010
Acessibilidade na Web -  edted2010Acessibilidade na Web -  edted2010
Acessibilidade na Web - edted2010Reinaldo Ferraz
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações WebSofia Costa
 
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDAFazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDAReinaldo Ferraz
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebHorácio Soares
 
Acessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saberAcessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saberThiago Nascimento Oliveira
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Horácio Soares
 

Destaque (16)

Definição de uma política de acessibilidade web para Portugal
Definição de uma política de acessibilidade web para PortugalDefinição de uma política de acessibilidade web para Portugal
Definição de uma política de acessibilidade web para Portugal
 
Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012
 
Design 360º Design
Design 360º Design Design 360º Design
Design 360º Design
 
Padrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAGPadrões em Governo Eletrônico - acessibilidade e e-MAG
Padrões em Governo Eletrônico - acessibilidade e e-MAG
 
Acessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosAcessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passos
 
Acessibilidade na Web - edted2010
Acessibilidade na Web -  edted2010Acessibilidade na Web -  edted2010
Acessibilidade na Web - edted2010
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
 
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDAFazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
HR head dilemma ideate Assignment
HR head dilemma ideate AssignmentHR head dilemma ideate Assignment
HR head dilemma ideate Assignment
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
 
Acessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saberAcessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saber
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
 

Semelhante a Acessibilidade na Web - Dicas para criar sites acessíveis

Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Andréa Zambrana
 
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 webRogério Chiavegatti
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Pedro Tavares
 
Acessibilidade para Web
Acessibilidade para WebAcessibilidade para Web
Acessibilidade para WebJoão Conserva
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-webMarcio Mota
 
Rascunho do Seminário sobre Acessibilidade na Web
Rascunho do Seminário sobre Acessibilidade na WebRascunho do Seminário sobre Acessibilidade na Web
Rascunho do Seminário sobre Acessibilidade na WebLucas Augusto Carvalho
 
Introdução à Acessibilidade na web
Introdução à Acessibilidade na webIntrodução à Acessibilidade na web
Introdução à Acessibilidade na webNayama Rosa
 
Aplicações Web Acessíveis
Aplicações Web AcessíveisAplicações Web Acessíveis
Aplicações Web AcessíveisDiego Pessoa
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03Alvaro Gomes
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevLucas J Silva
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0Campus Party Brasil
 

Semelhante a Acessibilidade na Web - Dicas para criar sites acessíveis (20)

Web acessível
Web acessívelWeb acessível
Web acessível
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
 
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
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensar
 
659 html
659 html659 html
659 html
 
Acessibilidade para Web
Acessibilidade para WebAcessibilidade para Web
Acessibilidade para Web
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
 
Seminário Final
Seminário FinalSeminário Final
Seminário Final
 
Rascunho do Seminário sobre Acessibilidade na Web
Rascunho do Seminário sobre Acessibilidade na WebRascunho do Seminário sobre Acessibilidade na Web
Rascunho do Seminário sobre Acessibilidade na Web
 
Introdução à Acessibilidade na web
Introdução à Acessibilidade na webIntrodução à Acessibilidade na web
Introdução à Acessibilidade na web
 
Aplicações Web Acessíveis
Aplicações Web AcessíveisAplicações Web Acessíveis
Aplicações Web Acessíveis
 
Desenvolvedor Front-End
Desenvolvedor Front-EndDesenvolvedor Front-End
Desenvolvedor Front-End
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
W3 C E Usabilidade
W3 C E UsabilidadeW3 C E Usabilidade
W3 C E Usabilidade
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Html - Capitulo 03
Html - Capitulo 03Html - Capitulo 03
Html - Capitulo 03
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 

Mais de COTIC-PROEG (UFPA) (20)

LT - Redis
LT - RedisLT - Redis
LT - Redis
 
LT Ansible
LT AnsibleLT Ansible
LT Ansible
 
Testes automatizados com Cypress
Testes automatizados com CypressTestes automatizados com Cypress
Testes automatizados com Cypress
 
Loop back
Loop backLoop back
Loop back
 
METEOR
METEORMETEOR
METEOR
 
Desenvolvimento de software tradicional vs ágil
Desenvolvimento de software tradicional vs ágilDesenvolvimento de software tradicional vs ágil
Desenvolvimento de software tradicional vs ágil
 
Canva
CanvaCanva
Canva
 
Git v2
Git v2Git v2
Git v2
 
Atitudes que levam ao Fracasso profissional
Atitudes que levam ao Fracasso profissionalAtitudes que levam ao Fracasso profissional
Atitudes que levam ao Fracasso profissional
 
Os 5 Sensos da Qualidade
Os 5 Sensos da QualidadeOs 5 Sensos da Qualidade
Os 5 Sensos da Qualidade
 
WATSON - O Fascinante Computador da IBM
WATSON - O Fascinante Computador da IBMWATSON - O Fascinante Computador da IBM
WATSON - O Fascinante Computador da IBM
 
Produtividade sem enrrolação
Produtividade sem enrrolaçãoProdutividade sem enrrolação
Produtividade sem enrrolação
 
LAB JavaScript
LAB JavaScriptLAB JavaScript
LAB JavaScript
 
Principios e Valores Ágeis
Principios e Valores ÁgeisPrincipios e Valores Ágeis
Principios e Valores Ágeis
 
Big data
Big dataBig data
Big data
 
Metricas para Times Ágeis
Metricas para Times ÁgeisMetricas para Times Ágeis
Metricas para Times Ágeis
 
Aplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPA
Aplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPAAplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPA
Aplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPA
 
Técnicas para Programação em Par
Técnicas para Programação em ParTécnicas para Programação em Par
Técnicas para Programação em Par
 
Feedback Canvas
Feedback CanvasFeedback Canvas
Feedback Canvas
 
5 Doenças do Gerenciamento de Projetos
5 Doenças do Gerenciamento de Projetos5 Doenças do Gerenciamento de Projetos
5 Doenças do Gerenciamento de Projetos
 

Acessibilidade na Web - Dicas para criar sites acessíveis

  • 1. Acessibilidade na Web Laerte Guedes
  • 3. Acessibilidade na Web - Conceito •  Acessibilidade na Web significa o desenvolvimento de sites e serviços web que possam ser entendidos e navegáveis por qualquer pessoa, independente de ser portadora ou não de deficiência física.
  • 4. Acessibilidade na Web - Alvo •  Deficientes visuais (não somente cegos). •  Pessoas incapazes de utilizar teclado ou mouse. •  Tenham outros tipos de deficiências (auditiva, por exemplo).
  • 6. Acessibilidade na Web – W3C •  É um consórcio internacional que visa desenvolver padrões para a criação e interpretação de conteúdos para a web. Um guia chamado de WCAG (Web Content Accessibility Guidelines) trata a respeito da acessibilidade na web, prevendo 3 níveis de conformidade: A, AA, AAA.
  • 7. Dicas de Acessibilidade: O que fazer e o que NÃO fazer •  Apartir do WCAG podemos tirar algumas dicas do que fazer e do que não fazer em nosso website.
  • 9. Dicas de Acessibilidade: O que fazer •  Coloque textos descrição em texto nas imagens (atributo ALT).
  • 10. Dicas de Acessibilidade: O que fazer •  Organize o documento para que ele faça sentido sem suas folhas de estilo. •  Garanta o funcionamento da página mesmo com Client Side Scripts desativados (por exemplo, funcione sem JavaScript ou Flash).
  • 11. Dicas de Acessibilidade: O que fazer •  Utilize cabeçalhos para definir a hierarquia do conteúdo do documento. •  Divida grandes blocos de informação em partes menores e apropriadas. •  Posicione adequadamente os labels dos elementos de formulários •  Use folhas de estilos para formatação.
  • 12. Dicas de Acessibilidade: O que NÃO fazer
  • 13. Dicas de Acessibilidade: O que NÃO fazer •  Não use “blink”, “marquee” ou nada que fique piscando ou correndo na tela. •  Evite o uso excessivo de verde e/ou vermelho e principalmente o contraste entre ambas. •  Não abra pop-ups sem avisar. •  Não use textos longos demais.
  • 14. Dicas de Acessibilidade: O que NÃO fazer •  Não tabelas para layout. •  Evite o chamado “Efeito Las Vegas”.