acessibilidade web, perda de tempo?
TRANSCRIPT
![Page 1: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/1.jpg)
perda de tempo?
Acessibilidade web
![Page 2: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/2.jpg)
“...não apenas permitir que pessoas com deficiências ou mobilidade
reduzida participem de atividades que incluem o uso de produtos, serviços e
informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada
população, visando sua adaptação e locomoção,
eliminando as barreiras.”(Wikipédia, 2012)
Acessibilidade
![Page 3: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/3.jpg)
permitir o acesso por todos, independente do tipo de usuário, situação, condição ou ferramenta utilizada
ou seja...
![Page 4: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/4.jpg)
Estamos falando de...
❏ Cores do layout e fontes
❏ Distribuição adequada dos espaços clicáveis
❏ Facilidade de disponibilização de conteúdo
❏ Código semântico
❏ HTML e CSS válido
❏ Javascript que preveja o uso de teclas
❏ Entre outros...
![Page 5: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/5.jpg)
NÃO!!!
Mas e aí, isso se aplica somente a pessoas com deficiência?
![Page 6: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/6.jpg)
Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
![Page 7: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/7.jpg)
Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
![Page 8: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/8.jpg)
Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
![Page 9: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/9.jpg)
❏ Navegador
❏ Conexão
❏ Dispositivo
❏ Status social
❏ Se tem ou não deficiência
não interessa...
![Page 10: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/10.jpg)
❏ Incapacidade de ver, ouvir ou deslocarse
❏ Dificuldade ou impossibilidade de interpretar certos tipos de informação.
❏ Dificuldade visual para ler ou compreender textos.
❏ Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
![Page 11: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/11.jpg)
❏ Só texto❏ Dimensões reduzidas❏ Conexão lenta❏ Diversidade:
❏ Navegador diferente do IE❏ Por voz❏ Sistema operacional não Windows
❏ Desatualização:❏ Navegador antigo
❏ Muito atualizado ¬¬'❏ Smartphones❏ Smart TVs
Devemos levar em consideração...
![Page 12: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/12.jpg)
❏ Sem mouse
❏ Sem teclado
❏ Sem monitor
❏ Sem áudio
❏ Dispositivos diversos
Resumindo...
![Page 13: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/13.jpg)
“Acessibilidade de verdade
é a soma de acessibilidade
+ web standards
+ usabilidade.”www.acessodigital.net
![Page 14: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/14.jpg)
o que é necessário?!
Vamos ao que interessa…
![Page 15: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/15.jpg)
Arquitetura
❏ Definição de tamanho e disposição de elementos de acordo com a ordem de consumo, fluxo de venda, etc
❏ Planejamento espacial considerando o tamanho e disposição dos elementos para que sejam responsivos ou adaptáveis às necessidades especificas do usuário
Layout
![Page 16: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/16.jpg)
![Page 17: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/17.jpg)
Design
❏ Visual diferenciado de acordo com a situação, plataforma e dispositivo
❏ Opção para alto contraste
❏ Design adequado para usuários daltônicos
❏ Escolha de fontes❏ Estilo
❏ Tamanho
![Page 18: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/18.jpg)
![Page 19: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/19.jpg)
Seguir padrões web
Significa desenvolver um código semântico e sem erros
![Page 20: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/20.jpg)
Exemplo incorreto
![Page 21: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/21.jpg)
Exemplo correto
![Page 22: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/22.jpg)
Conjunto de recomendações:
❏ W3C (WCAG, WAI-ARIA, etc) ❏ e-MAG
Seguir diretrizes de acessibilidade
![Page 23: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/23.jpg)
❏ Perceptível
A informação e os componentes da interface de usuário precisam ser apresentados de forma que eles possam ser percebidos com facilidade
Níveis de acessibilidade WCAG 2.0
![Page 24: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/24.jpg)
❏ Operável
Os componentes da interface do usuário e a navegação precisam ser operáveis
![Page 25: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/25.jpg)
❏ Compreensível
A informação e a operação da interface do usuário têm de ser compreensíveis
![Page 26: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/26.jpg)
❏ Robusto
Maximizar a compatibilidade com atuais e futuros navegadores, incluindo tecnologias de apoio
![Page 27: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/27.jpg)
❏ Nível A - Nível mínimo de conformidade
❏ Nível AA
❏ Nível AAA
Níveis de Conformidade
![Page 28: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/28.jpg)
❏ Aumentar fonte
❏ Diminuir fonte
❏ Fonte normal
❏ Contraste
❏ Atalhos para Menu, Conteúdo e Busca
❏ Link para a página de acessibilidade do site
Barra de acessibilidade
![Page 29: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/29.jpg)
![Page 30: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/30.jpg)
![Page 31: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/31.jpg)
![Page 32: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/32.jpg)
❏ Validar os códigos do conteúdo HTML e das folhas de estilo
❏ Verificar o fluxo de leitura da página – para tal, utilizar um navegador textual
❏ Verificar o fluxo de leitura da página sem estilos, sem script e sem as imagens
Realizar avaliação de acessibilidade
![Page 33: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/33.jpg)
❏ Verificar as funcionalidades da barra de acessibilidade
❏ Realizar a validação automática de acessibilidade utilizando o ASES e outros avaliadores automáticos
❏ Realizar a validação manual, utilizando os checklists de validação humana
![Page 34: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/34.jpg)
![Page 35: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/35.jpg)
Nem são tantos erros
![Page 36: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/36.jpg)
Será?
![Page 37: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/37.jpg)
![Page 38: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/38.jpg)
![Page 39: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/39.jpg)
Ferramentas de apoio
![Page 40: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/40.jpg)
Avaliador de acessibilidade
❏ ASES❏ Da Silva (versão antiga do ASES
online)❏ Componentes FF
❏ Web developer tool
![Page 41: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/41.jpg)
"Pensar em acessibilidade não é ser bonzinho, é enxergar no público não-padrão e com necessidades especiais, potenciais consumidores para o que você está vendendo."
Bruno Torres (março, 2006)
Custo ou benefício?
![Page 42: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/42.jpg)
http://bengalalegal.com/
http://acessibilidade.bento.ifrs.edu.br/
http://vidamaislivre.com.br/
http://www.parquedossonhos.com.br/
Sites premiados
![Page 43: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/43.jpg)
Links úteis
Sobre acessibilidade
❏ http://www.acessibilidadelegal.com/❏ http://www.acessobrasil.org.br/❏ http://www.governoeletronico.gov.
br/acoes-e-projetos/e-MAG
Validador
❏ http://www.dasilva.org.br/
Buscador de sites acessíveis
❏ http://www.clareou.com.br/
![Page 44: Acessibilidade web, perda de tempo?](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/55a9333d1a28ab48368b47dc/html5/thumbnails/44.jpg)
❏ http://pt.wikipedia.org/wiki/Acessibilidade❏ http://www.acessobrasil.org.br❏ http://www.acessobrasil.org.br/ciiee/index.htm❏ http://www.w3.org/TR/WAI-WEBCONTENT/❏ http://www.governoeletronico.gov.br/acoes-e-
projetos/e-MAG❏ http://brunotorres.net/acessibilidade-nao-e-
altruismo❏ http://www.acessibilidadelegal.com/❏ http://www.lupadigital.info/❏ http://www.w3.org/TR/CSS21/media.html❏ http://www.w3.org/TR/css3-mediaqueries/❏ http://tableless.com.br/o-que-sao-media-types/
Referências