SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
Existe teste de
acessibilidade digital?
Quem somos?
Analistas de testes e
apaixonados por
acessibilidade.
Atuando com metodologias de
acessibilidade digital e usuária
de tecnologias assistivas.
Atuando com metodologias de
acessibilidade digital.
O que é acessibilidade
De acordo com o World Wide Web Consortium (W3C), a acessibilidade na Web
significa que as pessoas com deficiências podem perceber, entender, navegar,
interagir e contribuir para a web.
O World Wide Web Consortium é a principal organização de
padronização da World Wide Web.
O grupo de trabalho Iniciativa de Acessibilidade na Web (WAI -
Web Accessibility Initiative) define e compõe diretrizes para
acessibilidade adequada na WEB.
Essas diretrizes reconhecidas globalmente são chamadas de
Diretrizes de Acessibilidade ao Conteúdo da Web (WCAG - Web
Content Accessibility Guidelines)
O que diz a legislação no Brasil
Em 06 de Julho de 2015 foi publicado no Diário Oficial a Lei sob número 13.146, que
institui a Lei Brasileira de Inclusão da Pessoa com Deficiência, que diz no principal
trecho:
“Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por
empresas com sede ou representação comercial no país ou por órgãos de governo,
para uso da pessoa com deficiência, garantindo-lhe acesso às informações
disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas
internacionalmente.”
Qual norma existe no Brasil
A versão 3.1 do eMAG (Modelo de Acessibilidade em Governo Eletrônico) publicado
em Abril 2014, que tem o compromisso de ser o norteador no desenvolvimento e a
adaptação de conteúdos digitais do governo federal o eMAG não exclui qualquer
boa prática de acessibilidade do WCAG.
SEÇÕES QUANTIDADE RECOMENDAÇÕES
Marcação 09
Comportamento (Document Object Model – DOM) 07
Conteúdo / Informação 12
Apresentação / Design 04
Multimídia 05
Formulários 08
TOTAL “
O que é WCAG
Conjunto de recomendações para fazer com que o conteúdo seja acessível, para
pessoas com divergências funcionais, mas também para todos os usuários.
Atualmente se encontra na versão 2.1.
PRINCÍPIOS DESCRIÇÃO DIRETRIZ REQUISITOS CRITÉRIO
Perceptível
Usuários devem ser capazes de perceber a
informação que está sendo apresentada.
Alternativas de texto;
Mídia baseada no tempo;
Adaptável; Distinguível.
78
A;
AA;
AAA.
Operável
A interface não pode exigir interpretação que o
usuário não possa executar.
Operável; Tempo
suficiente;
Convulsões; Navegável;
Modalidades de Entrada.
78
A;
AA;
AAA.
Compreensível
O conteúdo ou operação não pode ir além de sua
compreensão.
Legível; Previsível;
Assistência de insumos.
78
A;
AA;
AAA.
Robusto
Assim como na tecnologia os usuários evoluem, o
conteúdo deve permanecer acessível, através de
uma interpretação confiável
Compatível. 78
A;
AA;
AAA.
Quem executa os testes
Normalmente são especialistas que foram treinados e têm uma compreensão
profunda dos termos e conceitos de acessibilidade digital.
O teste deve ser complementado por usuários com outros tipos de deficiência,
que utilizam de tecnologias assistivas para operar seus dispositivos, e que tenham
experiência com as técnicas de aceite para acessibilidade.
Como executar testes de acessibilidade
O teste de acessibilidade adequado de um site ou App normalmente
envolve extenso exame manual das páginas.
Isso também pode significar o uso de testes automatizados para verificar a
acessibilidade de elementos variados e específicos de tecnologia digital.
A melhor abordagem geralmente é a combinação do teste manual e
automatizado.
Teste com ferramenta estático
Realizando o teste
com uso do Access
Monitor.
Regra: são
apresentados
automaticamente.
Função: encontrar
rapidamente quais
elementos não estão
adequados.
Exemplo de teste estático
Realizando o teste
com uso do Axe
testing.
Regra: são
apresentados
automaticamente.
Função: encontrar
rapidamente quais
elementos não estão
adequados.
Exemplo de teste estático - cabeçalhos
Realizando o teste
com uso do
Bookmarklets for
Accessibility.
Regra WCAG: 2.4.6
Função: Todo texto
que é título ou
subtítulo de uma
seção da página e
assim está disposto
visualmente deve
estar numa estrutura
de cabeçalho <h1>,
<h2>, <h3> , etc.
Exemplo de teste manual - 200%
Realizando o teste
com uso do zoom na
página.
Regra WCAG: 1.4.4
Função: O conteúdo
deve ser legível e
funcional mesmo
quando o tamanho
do texto for
ampliado para até
200%.
Exemplo de teste manual - leitor de telas
Realizando o teste
com uso do leitor de
telas NVDA.
Regra: são
identificados ao
longo da navegação.
Função: encontrar
quais elementos não
estão adequados as
regras de
acessibilidade.
Porque garantir os testes de acessibilidade
Atender ao mercado de pessoas com deficiência.
São 45,6 Milhões de pessoas com algum tipo de
deficiência segundo dados do IBGE 2010 (24% da
população brasileira).
Fonte: IBGE - Instituto Brasileiro de Geografia e Estatística. Censo demográfico de 2010. Disponível em:
http://biblioteca.ibge.gov.br/visualizacao/periodicos/94/cd_2010_religiao_deficiencia.pdf
Cumprir legislação de
acessibilidade.
Benefícios da acessibilidade
Acessibilidade vai muito além do lado social, é uma poderosa
estratégia de negócio.
No Brasil, pouquíssimos sites são acessíveis – só 2% do total.
Quem investe em acessibilidade digital sai na frente da maioria.
E têm as portas abertas para mais de 45 milhões de brasileiros com deficiência – um
público com o qual quase ninguém se comunica.
Fonte: Inclusive ORG – Estudo publicado em 2012. Disponível em:
http://www.inclusive.org.br/arquivos/22831
Aumenta a base de clientes Gera mídia espontânea
Obrigado
Maurício Pereiro:
www.linkedin/mauricio.pereiro
https://twitter.com/mauriciopereiro
Apresentação disponível em:
https://www.slideshare.net/MauricioPereiro/existe-teste-de-
acessibilidade-digital-tdc-sp-2019-155772346
Marina Yonashiro:
www.linkedin.com/in/mayonashiro
https://twitter.com/mayonashiro

Mais conteúdo relacionado

Mais procurados

React JS - Não é só um Hype
React JS - Não é só um HypeReact JS - Não é só um Hype
React JS - Não é só um HypeOtavio Augusto
 
Acessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaAcessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaLucas J Silva
 
Padrões para Criação e Interpretação de Conteúdos Web com HTML5
Padrões para Criação e Interpretação de Conteúdos Web com HTML5Padrões para Criação e Interpretação de Conteúdos Web com HTML5
Padrões para Criação e Interpretação de Conteúdos Web com HTML5Vagner Santana
 
Publicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto IPublicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto IHudson Augusto
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadediogolevel3
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveisLeandro Borges
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Andréa Zambrana
 

Mais procurados (13)

Palestra Webstandards
Palestra WebstandardsPalestra Webstandards
Palestra Webstandards
 
React JS - Não é só um Hype
React JS - Não é só um HypeReact JS - Não é só um Hype
React JS - Não é só um Hype
 
O que é blog
O que é blogO que é blog
O que é blog
 
Web Share
Web ShareWeb Share
Web Share
 
Acessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in SampaAcessibilidade em CSS - Front in Sampa
Acessibilidade em CSS - Front in Sampa
 
Padrões para Criação e Interpretação de Conteúdos Web com HTML5
Padrões para Criação e Interpretação de Conteúdos Web com HTML5Padrões para Criação e Interpretação de Conteúdos Web com HTML5
Padrões para Criação e Interpretação de Conteúdos Web com HTML5
 
Publicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto IPublicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto I
 
Oficina de blog
Oficina de blogOficina de blog
Oficina de blog
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidade
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
 
Responsividade e html5
Responsividade e html5Responsividade e html5
Responsividade e html5
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 

Semelhante a Testes de acessibilidade: como executar e por que são importantes

DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011Hudson Augusto
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2Leo Serrao
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações WebSofia Costa
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebLucas Augusto Carvalho
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015Reinaldo Ferraz
 
Uenp-Clm Estudo De Caso
Uenp-Clm Estudo De CasoUenp-Clm Estudo De Caso
Uenp-Clm Estudo De CasoSync Master
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
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
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2aiadufmg
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2aiadufmg
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...minastestingconference
 

Semelhante a Testes de acessibilidade: como executar e por que são importantes (20)

DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
 
Web acessível
Web acessívelWeb acessível
Web acessível
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Uenp-Clm Estudo De Caso
Uenp-Clm Estudo De CasoUenp-Clm Estudo De Caso
Uenp-Clm Estudo De Caso
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Acessibilidade para Web
Acessibilidade para WebAcessibilidade para Web
Acessibilidade para Web
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
 
HTML5 & suas APIs
HTML5 & suas APIsHTML5 & suas APIs
HTML5 & suas APIs
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
 

Testes de acessibilidade: como executar e por que são importantes

  • 2. Quem somos? Analistas de testes e apaixonados por acessibilidade. Atuando com metodologias de acessibilidade digital e usuária de tecnologias assistivas. Atuando com metodologias de acessibilidade digital.
  • 3. O que é acessibilidade De acordo com o World Wide Web Consortium (W3C), a acessibilidade na Web significa que as pessoas com deficiências podem perceber, entender, navegar, interagir e contribuir para a web. O World Wide Web Consortium é a principal organização de padronização da World Wide Web. O grupo de trabalho Iniciativa de Acessibilidade na Web (WAI - Web Accessibility Initiative) define e compõe diretrizes para acessibilidade adequada na WEB. Essas diretrizes reconhecidas globalmente são chamadas de Diretrizes de Acessibilidade ao Conteúdo da Web (WCAG - Web Content Accessibility Guidelines)
  • 4. O que diz a legislação no Brasil Em 06 de Julho de 2015 foi publicado no Diário Oficial a Lei sob número 13.146, que institui a Lei Brasileira de Inclusão da Pessoa com Deficiência, que diz no principal trecho: “Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no país ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.”
  • 5. Qual norma existe no Brasil A versão 3.1 do eMAG (Modelo de Acessibilidade em Governo Eletrônico) publicado em Abril 2014, que tem o compromisso de ser o norteador no desenvolvimento e a adaptação de conteúdos digitais do governo federal o eMAG não exclui qualquer boa prática de acessibilidade do WCAG. SEÇÕES QUANTIDADE RECOMENDAÇÕES Marcação 09 Comportamento (Document Object Model – DOM) 07 Conteúdo / Informação 12 Apresentação / Design 04 Multimídia 05 Formulários 08 TOTAL “
  • 6. O que é WCAG Conjunto de recomendações para fazer com que o conteúdo seja acessível, para pessoas com divergências funcionais, mas também para todos os usuários. Atualmente se encontra na versão 2.1. PRINCÍPIOS DESCRIÇÃO DIRETRIZ REQUISITOS CRITÉRIO Perceptível Usuários devem ser capazes de perceber a informação que está sendo apresentada. Alternativas de texto; Mídia baseada no tempo; Adaptável; Distinguível. 78 A; AA; AAA. Operável A interface não pode exigir interpretação que o usuário não possa executar. Operável; Tempo suficiente; Convulsões; Navegável; Modalidades de Entrada. 78 A; AA; AAA. Compreensível O conteúdo ou operação não pode ir além de sua compreensão. Legível; Previsível; Assistência de insumos. 78 A; AA; AAA. Robusto Assim como na tecnologia os usuários evoluem, o conteúdo deve permanecer acessível, através de uma interpretação confiável Compatível. 78 A; AA; AAA.
  • 7. Quem executa os testes Normalmente são especialistas que foram treinados e têm uma compreensão profunda dos termos e conceitos de acessibilidade digital. O teste deve ser complementado por usuários com outros tipos de deficiência, que utilizam de tecnologias assistivas para operar seus dispositivos, e que tenham experiência com as técnicas de aceite para acessibilidade.
  • 8. Como executar testes de acessibilidade O teste de acessibilidade adequado de um site ou App normalmente envolve extenso exame manual das páginas. Isso também pode significar o uso de testes automatizados para verificar a acessibilidade de elementos variados e específicos de tecnologia digital. A melhor abordagem geralmente é a combinação do teste manual e automatizado.
  • 9. Teste com ferramenta estático Realizando o teste com uso do Access Monitor. Regra: são apresentados automaticamente. Função: encontrar rapidamente quais elementos não estão adequados.
  • 10. Exemplo de teste estático Realizando o teste com uso do Axe testing. Regra: são apresentados automaticamente. Função: encontrar rapidamente quais elementos não estão adequados.
  • 11. Exemplo de teste estático - cabeçalhos Realizando o teste com uso do Bookmarklets for Accessibility. Regra WCAG: 2.4.6 Função: Todo texto que é título ou subtítulo de uma seção da página e assim está disposto visualmente deve estar numa estrutura de cabeçalho <h1>, <h2>, <h3> , etc.
  • 12. Exemplo de teste manual - 200% Realizando o teste com uso do zoom na página. Regra WCAG: 1.4.4 Função: O conteúdo deve ser legível e funcional mesmo quando o tamanho do texto for ampliado para até 200%.
  • 13. Exemplo de teste manual - leitor de telas Realizando o teste com uso do leitor de telas NVDA. Regra: são identificados ao longo da navegação. Função: encontrar quais elementos não estão adequados as regras de acessibilidade.
  • 14. Porque garantir os testes de acessibilidade Atender ao mercado de pessoas com deficiência. São 45,6 Milhões de pessoas com algum tipo de deficiência segundo dados do IBGE 2010 (24% da população brasileira). Fonte: IBGE - Instituto Brasileiro de Geografia e Estatística. Censo demográfico de 2010. Disponível em: http://biblioteca.ibge.gov.br/visualizacao/periodicos/94/cd_2010_religiao_deficiencia.pdf Cumprir legislação de acessibilidade.
  • 15. Benefícios da acessibilidade Acessibilidade vai muito além do lado social, é uma poderosa estratégia de negócio. No Brasil, pouquíssimos sites são acessíveis – só 2% do total. Quem investe em acessibilidade digital sai na frente da maioria. E têm as portas abertas para mais de 45 milhões de brasileiros com deficiência – um público com o qual quase ninguém se comunica. Fonte: Inclusive ORG – Estudo publicado em 2012. Disponível em: http://www.inclusive.org.br/arquivos/22831 Aumenta a base de clientes Gera mídia espontânea
  • 16. Obrigado Maurício Pereiro: www.linkedin/mauricio.pereiro https://twitter.com/mauriciopereiro Apresentação disponível em: https://www.slideshare.net/MauricioPereiro/existe-teste-de- acessibilidade-digital-tdc-sp-2019-155772346 Marina Yonashiro: www.linkedin.com/in/mayonashiro https://twitter.com/mayonashiro