Ministério do Planejamento, Orçamento e Gestão
Secretaria de Logística e Tecnologia da Informação
Departamento de Governo ...
Formulários
<input type="checkbox" value="yes" id=“apples“ name="apples">
<label for=“apples"> Apples</label>
<input type=...
5
O DGE e a Sociedade
DGE – Departamento de Governo
Eletrônico

Implantar de forma unificada serviços por meios eletrônic...
Tim Berners-Lee, diretor do W3C
afirma que o poder da Web está na
sua universalidade. Para ele, “ser
acessada por todos, i...
João é
tetraplégico
Michele é surda
Carlos é cego
Deficiência temporáriaFoto: Flickr.com - Tuftronic10000
Acessibilidade na web: A quem se destina?
Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-
Idade Avançada
Nós, daqui
alguns
anos
Foto: Flickr.com - Jacob Bøtter
Medo de usar o
computador
65%
Falta de habilidade com o
computador/internet
Fonte: Pesquisa TIC Domicílios 2012 – CGI.br
Pessoas que nunca acessaram...
18
Em números: Quem se beneficiaria da acessibilidade?
Falta cidadania – foto de Milton
Jung
Carros estacionados em vagas
...
Acessibilidade na web: A quem se destina?
Acessibilidade é para todos !
http://acessibilidade.w3c.br/pesquisa/resultados-preliminares/
Fonte: Pesquisa TIC Domicílios 2010 – CGI.br
Pessoas que nunca acessaram a internet, mas usaram um computador.
Percentual ...
CaPtcHa
Pessoas são diferentes
Já testou seu site?
Já testou o seu site?
Sem CSS
e imagens
Foto: Flickr.com - Baddog_
sem monitor ?
Como as pessoas navegam pelo leitor
de tela?
Como as pessoas navegam pelo leitor
de tela?
Como as pessoas navegam pelo leitor
de tela?
Já ouviu seu site hoje?
Apenas 6,96% das páginas do Governo Federal
eram acessíveis em 2011
(em 2010 eram 4,83% de acordo com o Censo na Web do CG...
Processo para desenvolver sítio
acessível:
●
Seguir os padrões Web;
●
Seguir as diretrizes e recomendações de acessibilida...
Código acessível

Conteúdo alternativo para elementos não-textuais;

Dados de tabelas acessíveis;

Formulários acessíve...
Código acessível

Programação em camadas;

Não usar tabelas para diagramar;

Não utilizar frames;

Não utilizar elemen...
Vídeos com legendas
Imagens acessíveis
Cabeçalhos
<H1>Título Principal</H1>
<H2>Subtítulo</H2>
<H3>Sub-Subtítulo</H3>
<H2>Subtítulo</H2>
<H3>Sub-Subtítulo</H3>
<...
Contraste
Formulários
Formulários
<input type="checkbox" value="yes" name="apples">
Apples
<input type="checkbox" value="yes" name="oranges"> Or...
Formulários
<input type="checkbox" value="yes" id=“apples“ name="apples">
<label for=“apples"> Apples</label>
<input type=...
Tabelas
Tabelas
A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO
Percentual sobre o total de domicílios com acesso à Inter...
Acessível via teclado
HTML e CSS
Princípios do W3C
Web para todos, em
qualquer
dispositivo, em
qualquer lugar,
segura e confiável!
Foto: everystockphoto.co...
46 de
Estrutura

Pragmático (estruturado de acordo
com os problemas a serem
abordados);

Dividido por áreas de atuação;
...
47 de
Itens padrões para o Governo Federal:
1.Página com a descrição dos recursos de
acessibilidade;
2.Teclas de atalho (3...
48 de
●
Divisão: 6 seções:
– Marcação (9)
– Comportamento (6)
– Conteúdo/Informação (12)
– Apresentação/Design (5)
– Multi...
●
Cursos em EAD
●
CMS acessível Suindara
●
Checklists
●
Pesquisas
●
Tutoriais
●
Consultoria SISP
●
ASES
E-MAG 3.0 - arcabo...
ASES
1. Avaliadores

Avaliador de acessibilidade web;

Avaliador de código HTML/XHTML;

Avaliador de código CSS.
2. Sim...
51 de
Alguns relatos pessoais
53
Em seu trabalho pela acessibilidade, o
Departamento de Governo eletrônico (DGE)
dispõe de uma equipe de consultores, no...
54
http://premio.w3c.br/
Inscrições até 30 de Setembro
55
Fernanda Hoffmann Lobato
governoeletronico.gov.br
Twitter: @egovbr
fernanda.lobato@planejamento.gov.br
+55 (61) 2020 17...
Sítios Acessiveis
Sítios Acessiveis
Sítios Acessiveis
Sítios Acessiveis
Sítios Acessiveis
Upcoming SlideShare
Loading in …5
×

Sítios Acessiveis

568 views

Published on

Oficina realizada dia 14/08 no CONSEGI 2013 - ESAF 13 a 15 de Agosto de 2013.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
568
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sítios Acessiveis

  1. 1. Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico Modelo Brasileiro de Acessibilidade em Governo Eletrônico
  2. 2. Formulários <input type="checkbox" value="yes" id=“apples“ name="apples"> <label for=“apples"> Apples</label> <input type="checkbox" value="yes" id=“oranges“ name="oranges"> <label for=“oranges"> Oranges</label> <input type="checkbox" value="yes" id=“lemmons“ name="lemons"> <label for=“lemons"> Lemons</label> <input type="checkbox" value="yes" id=“limes“ name="limes"> <label for=“limes"> Limes</label>
  3. 3. 5 O DGE e a Sociedade DGE – Departamento de Governo Eletrônico  Implantar de forma unificada serviços por meios eletrônicos no governo federal;  Integrar outros níveis de governo na prestação de serviços;  Desenvolver e-serviços orientado por eventos da vida de cidadãos e demais setores sociais;  Definir e Implantar padrões de usabilidade e acessibilidade para e-Serviços;
  4. 4. Tim Berners-Lee, diretor do W3C afirma que o poder da Web está na sua universalidade. Para ele, “ser acessada por todos, independente de deficiência, é um aspecto essencial”. A acessibilidade na Web significa, portanto, permitir o acesso a todos, independente do tipo de usuário, situação ou ferramenta. A Web é acessível na sua origem
  5. 5. João é tetraplégico
  6. 6. Michele é surda
  7. 7. Carlos é cego
  8. 8. Deficiência temporáriaFoto: Flickr.com - Tuftronic10000
  9. 9. Acessibilidade na web: A quem se destina? Usuários de Dispositivos Móveis Foto: everystockphoto.com -bartimaeus-
  10. 10. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøtter
  11. 11. Medo de usar o computador
  12. 12. 65% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicílios 2012 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador. Motivos pelos quais nunca utilizou a internet Fonte: http://www.cetic.br/
  13. 13. 18 Em números: Quem se beneficiaria da acessibilidade? Falta cidadania – foto de Milton Jung Carros estacionados em vagas especiais http://www.flickr.com/photos/cbnsp/5360821409/ CC licence  23,8% da população brasileira (ou cerca de 45 milhões de pessoas) ;  7,4% tem 65 anos ou mais;  9,63% são analfabetos;  65% das pessoas Pessoas que nunca acessaram a internet, mas usaram um computador alegam que não usam Internet por falta de habilidade.
  14. 14. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  15. 15. http://acessibilidade.w3c.br/pesquisa/resultados-preliminares/
  16. 16. Fonte: Pesquisa TIC Domicílios 2010 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador. Percentual (%) Acessar sites ou páginas que demoram para aparecer (muito pesadas) Não encontrar a informação desejada no site Ler um texto longo na Internet Acessar páginas com janelas que aparecem na tela (pop up) Lidar com itens de segurança em páginas da Internet como testes anti-spam, senhas, cadastros, logins Localizar um site específico pelas ferramentas de busca, como o Google Usar teclados virtuais de sites (para senhas) TOTAL BRASIL 46 35 29 28 21 14 10
  17. 17. CaPtcHa Pessoas são diferentes
  18. 18. Já testou seu site?
  19. 19. Já testou o seu site? Sem CSS e imagens Foto: Flickr.com - Baddog_
  20. 20. sem monitor ?
  21. 21. Como as pessoas navegam pelo leitor de tela?
  22. 22. Como as pessoas navegam pelo leitor de tela?
  23. 23. Como as pessoas navegam pelo leitor de tela?
  24. 24. Já ouviu seu site hoje?
  25. 25. Apenas 6,96% das páginas do Governo Federal eram acessíveis em 2011 (em 2010 eram 4,83% de acordo com o Censo na Web do CGI.Br)
  26. 26. Processo para desenvolver sítio acessível: ● Seguir os padrões Web; ● Seguir as diretrizes e recomendações de acessibilidade; ● Realizar avaliação de acessibilidade.
  27. 27. Código acessível  Conteúdo alternativo para elementos não-textuais;  Dados de tabelas acessíveis;  Formulários acessíveis;  Menus de escape;  Teclas de acesso;  Folhas de estilo com medidas relativas;  Documentos legíveis sem a folha de estilos;  Semântica;
  28. 28. Código acessível  Programação em camadas;  Não usar tabelas para diagramar;  Não utilizar frames;  Não utilizar elementos proprietários;
  29. 29. Vídeos com legendas
  30. 30. Imagens acessíveis
  31. 31. Cabeçalhos <H1>Título Principal</H1> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H4>....</H4>
  32. 32. Contraste
  33. 33. Formulários
  34. 34. Formulários <input type="checkbox" value="yes" name="apples"> Apples <input type="checkbox" value="yes" name="oranges"> Oranges <input type="checkbox" value="yes" name="lemons"> Lemons <input type="checkbox" value="yes" name="limes"> Limes
  35. 35. Formulários <input type="checkbox" value="yes" id=“apples“ name="apples"> <label for=“apples"> Apples</label> <input type="checkbox" value="yes" id=“oranges“ name="oranges"> <label for=“oranges"> Oranges</label> <input type="checkbox" value="yes" id=“lemmons“ name="lemons"> <label for=“lemons"> Lemons</label> <input type="checkbox" value="yes" id=“limes“ name="limes"> <label for=“limes"> Limes</label>
  36. 36. Tabelas
  37. 37. Tabelas A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO Percentual sobre o total de domicílios com acesso à Internet 1 Percentual (%) Modem Tradicional (acesso discado linha telefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga Modem digital via linha telefônica (tecnologia DSL) Modem via cabo Conexão via rádio Conexão via satélite TOTAL BRASIL 20 66 23 25 14 3 6 10 ÁREA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 8 16 REGIÕES DO PAÍS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE 19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 11 11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIAR Até R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14 R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 3 6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 34 16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 3 6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29
  38. 38. Acessível via teclado
  39. 39. HTML e CSS
  40. 40. Princípios do W3C Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  41. 41. 46 de Estrutura  Pragmático (estruturado de acordo com os problemas a serem abordados);  Dividido por áreas de atuação;  Padronização de funcionalidades. O que é o e-MAG 3.0
  42. 42. 47 de Itens padrões para o Governo Federal: 1.Página com a descrição dos recursos de acessibilidade; 2.Teclas de atalho (3); 3.Barra de acessibilidade; 4.Apresentação do mapa do sitio; 5.Apresentação de formulário; 6.Conteúdo alternativo para imagens; 7.Apresentação de documentos. O que é o e-MAG 3.0
  43. 43. 48 de ● Divisão: 6 seções: – Marcação (9) – Comportamento (6) – Conteúdo/Informação (12) – Apresentação/Design (5) – Multimídia (5) – Formulário (8) ● Total de 45 recomendações (Todas são importantes). Recomendações de acessibilidade
  44. 44. ● Cursos em EAD ● CMS acessível Suindara ● Checklists ● Pesquisas ● Tutoriais ● Consultoria SISP ● ASES E-MAG 3.0 - arcabouço
  45. 45. ASES 1. Avaliadores  Avaliador de acessibilidade web;  Avaliador de código HTML/XHTML;  Avaliador de código CSS. 2. Simuladores  Simulador de navegação para cegos;  Simulador de navegação para baixa visão. 3. Ferramentas de apoio
  46. 46. 51 de
  47. 47. Alguns relatos pessoais
  48. 48. 53 Em seu trabalho pela acessibilidade, o Departamento de Governo eletrônico (DGE) dispõe de uma equipe de consultores, no âmbito do C3S do SISP, que é especialista no assunto. A equipe avaliou praticamente todos os sítios institucionais do primeiro escalão do governo federal e enviou os respectivos relatórios desta análise aos órgãos. Consultores C3S
  49. 49. 54 http://premio.w3c.br/ Inscrições até 30 de Setembro
  50. 50. 55 Fernanda Hoffmann Lobato governoeletronico.gov.br Twitter: @egovbr fernanda.lobato@planejamento.gov.br +55 (61) 2020 1738

×