Upload
ipontes-merces
View
1.060
Download
1
Embed Size (px)
DESCRIPTION
Palestra sobre Acessibilidade na Web ministrada por Iran Pontes na EXPODESIGN UNIBRATEC - 2012
Citation preview
ACESSIBILIDADE NA WEB ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra
1
MAS AFINAL, O QUE É ACESSIBILIDADE?
IRAN PONTES | iranpontes.com/palestra 2
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
MAS AFINAL, O QUE É ACESSIBILIDADE?
IRAN PONTES | iranpontes.com/palestra 3
Segundo a lei no 10.098, de 19 de dezembro de 2000,
acessibilidade está relacionada em FORNECER CONDIÇÃO
PARA UTILIZAÇÃO, COM SEGURANÇA E AUTONOMIA, TOTAL
OU ASSISTIDA, dos espaços, mobiliários e equipamentos
urbanos, das edificações, dos serviços de transporte E DOS
DISPOSITIVOS, SISTEMAS E MEIOS DE COMUNICAÇÃO E
INFORMAÇÃO, por pessoa portadora de deficiência ou com
mobilidade reduzida.
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
E ACESSIBILIDADE NA WEB?
IRAN PONTES | iranpontes.com/palestra 4
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
ACESSIBILIDADE PARA A WEB
IRAN PONTES | iranpontes.com/palestra 5
CONSISTE EM APLICAR CONDIÇÕES
PARA UTILIZAÇÃO EM SISTEMAS
PARA WEB (SITES).
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
ACESSIBILIDADE NA WEB
IRAN PONTES | iranpontes.com/palestra 6
“ACESSIBILIDADE NA WEB É TORNAR TODOS OS
SERVIÇOS, ASSUNTOS E PUBLICAÇÕES TÃO
FÁCEIS DE SEREM UTILIZADOS POR TODAS AS
PESSOAS, QUE ATÉ ESQUECEREMOS QUE HÁ
DIFERENÇAS.”
(CARLA NASCIMENTO – FRASE VENCEDORA DO CONCURSO “JORNADAS DE CONHECIMENTO -
ACESSIBILIDADE NA WEB”)
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
ACESSIBILIDADE PARA A WEB
IRAN PONTES | iranpontes.com/palestra 7
REMOVER “BARREIRAS NAS COMUNICAÇÕES:
QUALQUER ENTRAVE OU OBSTÁCULO QUE
DIFICULTE OU IMPOSSIBILITE A EXPRESSÃO OU
O RECEBIMENTO DE MENSAGENS POR
INTERMÉDIO DOS MEIOS OU SISTEMAS DE
COMUNICAÇÃO, SEJAM OU NÃO DE MASSA.” ARTIGO 2 II -D
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
8 Extraído de Apresentação da W3C
ACESSIBILIDADE E A
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
9
PARA A W3C ACESSIBILIDADE NA WEB
SIGNIFICA ACESSO PARA TODOS,
INDEPENDENTEMENTE DE QUALQUER TIPO DE
LIMITAÇÃO PESSOAL.
Extraído de Apresentação da W3C
ACESSIBILIDADE E A
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
RECOMENDAÇÕES DE ACESSIBILIDADE PARA O CONTEÚDO DA WEB (WCAG 2.0)
(Web Content Accessibility Guidelines)
http://www.w3.org/TR/WCAG/
10 IRAN PONTES | iranpontes.com/palestra
ACESSIBILIDADE E A
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
PORQUE DESENVOLVER DE MODO ACESSÍVEL?
IRAN PONTES | iranpontes.com/palestra 11
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
PORQUE DESENVOLVER SITE ACESSÍVEL?
IRAN PONTES | iranpontes.com/palestra 12
1. Prestação de serviço público;
2. Estará de acordo com os princípios de acessibilidade
preconizados pela lei federal de acessibilidade;
3. Adaptado a diferentes tipos de conexão como
navegadores antigos como o IE6, computadores antigos e
sem mouse;
4. Maior acesso ao site devido a atender a um maior público
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 13
5. Menos custo com manutenção;
6. Site mais fácil de ser navegado e intuitivo;
7. O Governo é obrigado a desenvolver de forma acessível
conforme Decreto 5.296 de 02 de dezembro de 2004;
8. Desenvolvedor é uma ponte de comunicação;
9. Pensar e desenvolver de forma INCLUSIVA;
PORQUE DESENVOLVER SITE ACESSÍVEL?
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
14
VÍDEO – ARQUITETURA INCLUSIVA
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 15
ACESSIBILIDADE NO HTML 5
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 16
1. MARCAÇÃO SEMÂNTICA:
• Facilita a leitura da tela por softwares que leem tags do
HTML e não entre blocos de navegação marcado com <div>,
que não é semântico, porque não há como grupá-los e
incluí-los em um esquema diferenciado de navegação.
Solução do HTML 5:
<header>, <footer>, <nav>, <article>, <section>,
<aside> e <figure> ...
ACESSIBILIDADE NO HTML 5
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 17
2. MULTIMÍDIA
• HTML5 oferece controles nativos evitando utilizar plugins, pois a
mídia faz parte do navegador que também possui controles
nativos;
Solução do HTML 5:
<button> para controles play/pause e os mecanismos criados
pelos novos elementos input da HTML5 como
<input type=range> para um slider de volume
ACESSIBILIDADE NO HTML 5
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
DICAS E PRÁTICAS
IRAN PONTES | iranpontes.com/palestra 18
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
DICAS PRÁTICAS
IRAN PONTES | iranpontes.com/palestra 19
1. Estudar sobre acessibilidade e usabilidade assim como
arquitetura da informação e padrões WEB.
2. Disponibilizar LEGENDAS à áudios e descrições para
vídeos;
3. Acrescentar descrição nas imagens utilizando “alt”, “title”
e “longdesc”:
<img src=“casa_amarela.jpg“ Longdesc=“casaamarela.html"
alt=“Casa amarela“/
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 20
4. Disponibilizar as informações com e sem cores;
5. Utilizar links com atributo title: <a href="link.htm"
title="Descrição do Link" >Link</a>
6. Formulários sempre com o elemento <label>:
<label for="Nome"> Nome: </label><input type="Text"
name="Nome">
7. Onde for necessário um plug-in como FLASH, deve-se
incluir um link para o ítem requerido;
DICAS E PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 21
8. Desabilitar CSS para garantir que a página está limpa;
(Fazer teste para o site com apenas textos:
http://www.delorie.com/web/lynxview.html)
9. Testar o site em vários navegadores;
10. Confirmar que os links funcionam mesmo com o Java
Script desabilitado;
11. Verificar se as cores do fundo e textos sobrepostos
estejam com bons contrates;
DICAS E PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 22
12. Evitar desenvolver para resoluções de novos monitores e
sim os mais utilizados;
13. Evitar tabelas e quando houver (Tabelas de dados)
identificar cabeçalhos de linha e coluna e resumos;
11. Evitar movimentos na página;
13. Evitar utilizar Menus com sub-menus e quando for
necessário que seja acessível no uso do teclado;
14. Disponibilizar link na logo do site;
DICAS E PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 23
15. Destacar links visitados e nunca sublinhar textos sem que
haja link;
16. Usar atributo "for" para permitir que o usuário clique no
rótulo (nome) para selecionar os campos no formulário;
17. Evitar utilizar textos justificados em sites devido há alguns
problemas de legibilidade, particularmente para os
usuários disléxicos (lêem com dificuldade);
18. Desenvolver uma versão do site monocromática;
DICAS E PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 24
19. Utilizar espaçamento entre linhas utilizando a propriedade
line-height do CSS conseguimos criar um espaçamento
entre as linhas em um parágrafo;
20. Utilizar breadcrumbs (migalhas de pão);
21. Utilizar cor de background;
22. Testar se você consegue navegar em seu site utilizando
tab, shift-tab e return;
23. Usar o atributo da linguagem do site ‘lang:pt’
DICAS PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
25
24. Desenvolver a versão mobile do site;
25. Textos em EM ou PT não em PX;
26. Se usar frames, usar a tag interna <noframes>, e o
atributo ‘longdesc’;
27. Tags como <caption> dos atributos id, headers e scope
guiam o leitor de sites (tela) então podem usar a vontade;
28. Evitar utilizar CAPTCHA com apenas imagens, utilizem com
som, perguntas simples...
29. Sempre desenvolver seguindo os princípios da W3C;
DICAS PRÁTICAS
IRAN PONTES | iranpontes.com/palestra
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 26
DICAS PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 27
1. Quantidade razoável de celulares não aceitam flash
(incluindo o IPHONE);
2. Em Modify > Document
sempre definir o TITLE e
DESCRIPTION do documento.
DICAS PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 28
3. Para gerar conteúdos acessíveis no flash acesse o PAINEL
ACESSIBILITY: Window > Other Panels > Acessibility
DICAS PRÁTICAS
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 29
DICAS PRÁTICAS
Acessibilizando um MovieClip
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 30
DICAS PRÁTICAS
Acessibilizando um Botão
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 31
DICAS PRÁTICAS
ACTION SCRIPT ACESSÍVEL
3. ALGUNS EXEMPLOS PRÁTICOS:
PROPRIEDADE AÇÃO APLICAÇÃO
.silent Tornar filme acessível/Tornar objeto acessível (lógica inversa)
Documentos inteiros Botões Clipes de filme Texto dinâmico Texto de entrada
.description Descrição Documentos inteiros Botões Clipes de filme Texto dinâmico Texto de entrada
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 32
DICAS PRÁTICAS
MAIS INFORMAÇÕES SOBRE ACESSIBILIDADE NO FLASH: http://imasters.com.br/artigo/8146/flash/acessibilidade_em_flash/ http://help.adobe.com/pt_BR/Flash/10.0_UsingFlash/ WSd60f23110762d6b883b18f10cb1fe1af6-7c2ba.html
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
33
VÍDEO – ACESSIBILIDADE: CUXTO X BENEFÍCIO
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
34 IRAN PONTES | iranpontes.com/palestra
PARA QUEM DESENVOLVEMOS A FIM DA
ACESSIBILIDADE?
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
35
• Navegadores sem suporte a cor;
• Navegadores de texto;
• Conexões lentas; ou Diversidade de Sistemas Operacionais;
• Dispositivos de navegação portáteis;
• Navegadores sem suporte a CSS ou scripts, ou com estes
recursos desabilitados;
• Dispositivos de navegação com limitações de memória
e/ou processamento; Diversidade de resoluções de tela...
IRAN PONTES | iranpontes.com/palestra
TECNOLOGIA
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
36
• Pessoas com limitações de visão, audição, física, cognitiva
ou neurológica;
• Idosos;
• Crianças em fase de conhecimento;
• Limitações temporárias;
• Limitações Econômicas;
• Comunidades rurais...
IRAN PONTES | iranpontes.com/palestra
FATOR HUMANO
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 37
DADOS
http://www.csszengarden.com/
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 38
MOTIVOS PELOS QUAIS NUNCA UTILIZOU A INTERNET: 55%
AFIRMARAM QUE O MOTIVO É A FALTA DE HABILIDADE.
Fonte: Pesquisa TIC Domicílios 2010 – CGI.br Pessoas que nunca
acessaram a internet, mas usaram um computador.
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 39
IDOSOS NO MUNDO Em 2010, de acordo com a
Sinopse do Censo Demográfico o país tinha 13,8 milhões de crianças de até 4 anos e 14 milhões de pessoas com mais de 65 anos.
Fonte: G1, 2012
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 40
IDOSOS NO MUNDO
ESTIMATIVA PARA 2050
Quase 2 bilhões de pessoas com mais de 60 anos. (+ de 20% da população)
Fonte: ht tp://www.un.org/esa/population/publications/worldageing19502050/
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 41
DEFICIÊNCIAS • 14,5% da população brasileira (mais de 24 milhões)
era por tadora de, pelo menos, uma das deficiências investigadas pela pesquisa.
• Em 2000, existiram 148 mil pessoas cegas e 2,4 milhões com grande dificuldade de enxergar
Fonte: IBGE - ht tp://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtm
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 42
DEFICIÊNCIAS • O número de surdos no Brasil era de 166.400. Além
disso, cerca de 900 mil pessoas declararam ter grande dificuldade permanente de ouvir.
• Pessoas com tetraplegia, paraplegia ou hemiplegia permanente são mais de 937 mil e com falta de um membro mais de 478 mil.
Fonte: IBGE - ht tp://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtm
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
43
IDOSO NO COMPUTADOR
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 44
CASES
http://www.csszengarden.com/
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 45
CASES
http://www.csszengarden.com/
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
46
VÍDEO – ACESSIBILIDADE: CUXTO X BENEFÍCIO
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 47
CASES
http://www.bengalalegal.com/
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
48
VÍDEO – CONADE
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 49
TESTE DE ACESSIBILIDADE
http://validator.w3.org/
http://www.dasilva.org.br/
http://wave.webaim.org//
http://www.stainlessvision.com/projects/colour-contrast-visualiser
(Contrastes)
http://validator.w3.org/checklink (Links quebrados)
http://browsershots.org (Diferentes navegadores)
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 50
TECNOLOGIAS ASSISTIVAS
LEITORES DE TELA
VIRTUAL VI
JOWS FOR WINDOWS
DOSVOX
NVDA (http://www.nvda-project.org/)
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 51
“É FAZENDO QUE SE APRENDE A FAZER AQUILO QUE SE DEVE APRENDER A
FAZER.” Aristóteles
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 52
OBRIGADO!
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 53
IRAN PONTES
www.iranpontes.com
@iranpontes Facebook.com/iranpontes
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 54
REFERÊNCIAS E DOCUMENTOS • Livro: Design – Gestão, Métodos, Projetos e Processos
• http://www.renatatr.com/monografia/monografia.pdf
• http://edu3051.pbworks.com/f/ACESSIBILIDADE_WEB_revista_PGIE.pdf
• http://www.linhadecodigo.com.br/artigo/1624/acessibilidade-web-tudo-tem-
sua-primeira-vez.aspx
• http://www.kadunew.com/blog/web-design/10-crimes-de-usabilidade-que-
voce-nao-deve-cometer
• Apresentação Acessibilidade pela W3C ao Iseminar 2010
• http://www.maujor.com/tutorial/acessibilidade-na-html5.php
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra 55
REFERÊNCIAS E DOCUMENTOS
• http://pt.kioskea.net/contents/web/ergonomie.php3
• http://www.ilearn.com.br/TR/WCA
• http://www.webroom.com.br/conteudo.aspx?cont=78&pai=72
• Apresentações: Acesso Digital
ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES