1. perda de tempo?
Acessibilidade web

2. “...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

3. permitir o acesso por todos,
independente do tipo de usuário,
situação, condição ou ferramenta
utilizada
ou seja...

4. 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...

5. NÃO!!!
Mas e aí, isso se aplica
somente a pessoas com
deficiência?

6. Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

7. Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

8. Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

9. ❏ Navegador
❏ Conexão
❏ Dispositivo
❏ Status social
❏ Se tem ou não deficiência
não interessa...

10. ❏ 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.

11. ❏ 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...

12. ❏ Sem mouse
❏ Sem teclado
❏ Sem monitor
❏ Sem áudio
❏ Dispositivos diversos
Resumindo...

13. “Acessibilidade de verdade
é a soma de acessibilidade
+ web standards
+ usabilidade.”
www.acessodigital.net

14. o que é necessário?!
Vamos ao que
interessa…

15. 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

17. 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

19. Seguir padrões web
Significa desenvolver um código
semântico e sem erros

20. Exemplo incorreto

21. Exemplo correto

22. Conjunto de recomendações:
❏ W3C (WCAG, WAI-ARIA, etc)
❏ e-MAG
Seguir diretrizes de
acessibilidade

23. ❏ 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

24. ❏ Operável
Os componentes da interface do
usuário e a navegação precisam ser
operáveis

25. ❏ Compreensível
A informação e a operação da
interface do usuário têm de ser
compreensíveis

26. ❏ Robusto
Maximizar a compatibilidade com
atuais e futuros navegadores,
incluindo tecnologias de apoio

27. ❏ Nível A - Nível mínimo de
conformidade
❏ Nível AA
❏ Nível AAA
Níveis de Conformidade

28. ❏ 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

32. ❏ 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

33. ❏ 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

35. Nem são tantos erros

36. Será?

39. Ferramentas de apoio

40. Avaliador de acessibilidade
❏ ASES
❏ Da Silva (versão antiga do ASES
online)
❏ Componentes FF
❏ Web developer tool

41. "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?

42. http://bengalalegal.com/
http://acessibilidade.bento.ifrs.edu.br/
http://vidamaislivre.com.br/
http://www.parquedossonhos.com.br/
Sites premiados

43. 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/

44. ❏ 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