Inclusão digital através da acessibilidade na web Bruno Borges – Marketing Digital Julho / 2009
Olá! <ul><li>Quem vos fala... </li></ul><ul><li>Bruno Borges – Designer Gráfico graduado em 2007 pela Universidade do Esta...
Inclusão Digital <ul><li>“ Inclusão Digital é a democratização do acesso às TIs, de forma a permitir a inserção de todos n...
Inclusão Digital <ul><li>Permitir que toda a sociedade possa ter acesso a informações disponíveis na Internet, e assim pro...
Inclusão Digital <ul><li>Classes socialmente desfavorecidas </li></ul><ul><ul><li>Equipamento </li></ul></ul><ul><ul><li>A...
Acessibilidade <ul><li>“ Acessibilidade é a tradução operacional do direito básico de ir e vir, de forma independente, em ...
Acessibilidade na web <ul><li>“ Prática de se construir websites que possam ser utilizados por todas as pessoas, sejam por...
Acessibilidade na web <ul><li>Quando os sites são corretamente concebidos, desenvolvidos e editados, uma maior quantidade ...
Acessibilidade na web <ul><li>As boas práticas para desenvolvimento de websites acessíveis são defindas pela W3C (World Wi...
Acessibilidade e Inclusão Digital <ul><li>Socialmente desfavorecidos + Deficientes </li></ul><ul><li>Deficientes visuais s...
Acessibilidade e Inclusão Digital <ul><li>Deficiências visuais: </li></ul><ul><ul><li>Cegueira </li></ul></ul><ul><ul><li>...
Importância da acessibilidade na web <ul><li>Milhões de pessoas no mundo possuem deficiências que dificultam seu acesso à ...
Importância da acessibilidade na web <ul><li>Além do fator social, fica a pergunta: você quer abrir mão desse mercado? </l...
Importância da acessibilidade na web <ul><li>A Internet é a mídia que mais cresce no mundo, e para pessoas com necessidade...
Aspectos legais <ul><li>Muitas leis e tratados se aplicam à acessibilidade, em particular na web: </li></ul><ul><ul><li>O ...
Aspectos legais <ul><li>Convenção da ONU sobre os Direitos das Pessoas com Deficiência </li></ul><ul><ul><li>Artigo 9 – Ac...
Aspectos legais <ul><li>Decreto federal 5296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>“ Estabelece normas gerais e c...
Aspectos legais <ul><li>Decreto federal 5296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>Art. 8º: Para fins de acessibi...
Aspectos legais <ul><li>Decreto federal 5296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>Art. 47: No prazo de até doze ...
Aspectos legais <ul><li>Resolução 40/2008 - MG </li></ul><ul><ul><li>“ Estabelece diretrizes para estruturação, elaboração...
Aspectos legais <ul><li>Resolução 40/2008 - MG </li></ul><ul><ul><li>Art. 10: O planejamento, implantação, desenvolvimento...
Princípios da acessibilidade na web <ul><li>São 2 os pontos chave para se desenvolver websites acessíveis: </li></ul><ul><...
Web Standards <ul><li>Os Web Standards (Padrões Web) são normas de desenvolvimento criadas pela W3C e aceitas como as melh...
Semântica <ul><li>A semântica na web trata nada mais do que usar os elementos HTML para as funções às quais se destinam. <...
Semântica <ul><li>Benefícios: </li></ul><ul><ul><li>No que tange aos leitores de tela, facilita a correta interpretação do...
Semântica <ul><li>Exemplos: </li></ul><ul><ul><li><H1> Heading (cabeçalho) nível 1 </li></ul></ul><ul><ul><li><H2> Heading...
Semântica <ul><li>Tableless??? </li></ul><ul><ul><li>Nada mais é do que um aspecto da semântica na web. Tabelas (tag <tabl...
Semântica <ul><li>Dicas </li></ul><ul><ul><li>Separe a estrutura e o conteúdo (HTML) da formatação (CSS). Use folhas de es...
Leitores de tela <ul><li>Para deficientes visuais com limitações grandes o suficiente para impedir a visualização da tela,...
Leitores de tela <ul><li>Os leitores de tela são softwares que “percorrem” a tela da aplicação ativa, “pronunciando” os te...
Leitores de tela <ul><li>Evite expressões sem contexto </li></ul><ul><ul><li>“ Clique aqui&quot; ou &quot;saiba mais&quot;...
Tags Alt e Title <ul><li>As tags Alt e Title, da linguagem HTML, são extremamente importantes para a acessibilidade de um ...
Teclas de atalho <ul><li>As teclas de atalho facilitam bastante a navegação de uma página sem a utilização do mouse. </li>...
Teclas de atalho <ul><li>Access keys avançam o cursor para áreas específicas da página, simplesmente pressionando alguma t...
Teclas de atalho <ul><li>Deve-se listar elementos importantes da página, como menu, conteúdo e busca, por exemplo. Um menu...
Cores <ul><li>Evite utilizar cores como informação. Um item que dependa de sua cor para ser compreendido pode ser totalmen...
Níveis de contraste <ul><li>É importante que a página ofereça a possibilidade de diferentes níveis de contraste. Este recu...
Ajuste de tamanho do texto <ul><li>Outro recurso destinado a pessoas com baixa visão. Um javascript controla o tamanho dos...
Obrigado! <ul><ul><li>Agradecimentos </li></ul></ul><ul><ul><ul><li>Beatriz Helena de Oliveira – Prodemge </li></ul></ul><...
Próximos SlideShares
Carregando em…5
×

Inclusão Digital através da acessibilidade na web

1.302 visualizações

Publicada em

Palestra sobre acessibilidade na web, apresentada no N Design (Encontro Nacional de Estudantes de Design) Recife/Olinda, do ano de 2009.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Inclusão Digital através da acessibilidade na web

  1. 1. Inclusão digital através da acessibilidade na web Bruno Borges – Marketing Digital Julho / 2009
  2. 2. Olá! <ul><li>Quem vos fala... </li></ul><ul><li>Bruno Borges – Designer Gráfico graduado em 2007 pela Universidade do Estado de Minas Gerais. Pós-graduando em Marketing Digital pelo UNI-BH. </li></ul><ul><li>Analista de Design - Equipe Web Prodemge - Cia. de TI do Estado de MG </li></ul>
  3. 3. Inclusão Digital <ul><li>“ Inclusão Digital é a democratização do acesso às TIs, de forma a permitir a inserção de todos na sociedade da informação.” </li></ul>
  4. 4. Inclusão Digital <ul><li>Permitir que toda a sociedade possa ter acesso a informações disponíveis na Internet, e assim produzir e disseminar conhecimento. </li></ul><ul><li>Inclusão Social > Inclusão Digital </li></ul>
  5. 5. Inclusão Digital <ul><li>Classes socialmente desfavorecidas </li></ul><ul><ul><li>Equipamento </li></ul></ul><ul><ul><li>Acesso à rede </li></ul></ul><ul><ul><li>Conhecimento das ferramentas </li></ul></ul><ul><li>Deficientes </li></ul><ul><ul><li>Acessibilidade </li></ul></ul>
  6. 6. Acessibilidade <ul><li>“ Acessibilidade é a tradução operacional do direito básico de ir e vir, de forma independente, em todos os ambientes - sejam físicos ou virtuais.” </li></ul>
  7. 7. Acessibilidade na web <ul><li>“ Prática de se construir websites que possam ser utilizados por todas as pessoas, sejam portadoras de deficiências ou não”. </li></ul>
  8. 8. Acessibilidade na web <ul><li>Quando os sites são corretamente concebidos, desenvolvidos e editados, uma maior quantidade de dispositivos e, principalmente, um maior número de pessoas tem igual acesso à informação e funcionalidade. </li></ul>
  9. 9. Acessibilidade na web <ul><li>As boas práticas para desenvolvimento de websites acessíveis são defindas pela W3C (World Wide Web Consortium) </li></ul><ul><li>Quanto mais acessível for o seu site, melhor ele será “entendido” pelos robôs de busca. Este é um dos fatores de SEO. </li></ul>
  10. 10. Acessibilidade e Inclusão Digital <ul><li>Socialmente desfavorecidos + Deficientes </li></ul><ul><li>Deficientes visuais são os maiores prejudicados no acesso às informações online, que são quase 100% visuais. </li></ul><ul><li>Solução: acessibilidade </li></ul>
  11. 11. Acessibilidade e Inclusão Digital <ul><li>Deficiências visuais: </li></ul><ul><ul><li>Cegueira </li></ul></ul><ul><ul><li>Daltonismo </li></ul></ul><ul><ul><li>Baixa visão </li></ul></ul><ul><li>Pessoas com deficiências cognitivas e motoras também têm seu acesso à web facilitado pela acessibilidade. </li></ul>
  12. 12. Importância da acessibilidade na web <ul><li>Milhões de pessoas no mundo possuem deficiências que dificultam seu acesso à Internet. </li></ul><ul><li>No Brasil, 148 mil pessoas cegas e 2,4 milhões com grande dificuldade de enxergar (censo 2000). </li></ul>
  13. 13. Importância da acessibilidade na web <ul><li>Além do fator social, fica a pergunta: você quer abrir mão desse mercado? </li></ul>
  14. 14. Importância da acessibilidade na web <ul><li>A Internet é a mídia que mais cresce no mundo, e para pessoas com necessidades especiais pode significar a abertura de novos horizontes: </li></ul><ul><ul><li>Notícias, informação, comércio, lazer </li></ul></ul><ul><ul><li>Educação, e-learning, pesquisa de trabalho </li></ul></ul><ul><ul><li>Um local de interação </li></ul></ul><ul><ul><li>Participação cívica - Leis, informações governamentais, serviços </li></ul></ul>
  15. 15. Aspectos legais <ul><li>Muitas leis e tratados se aplicam à acessibilidade, em particular na web: </li></ul><ul><ul><li>O Brasil é signatário da Convenção da ONU sobre os Direitos das Pessoas com Deficiência </li></ul></ul><ul><ul><li>Decreto Federal 5296/2004 </li></ul></ul><ul><ul><li>Resolução Estadual 40/2008 - MG </li></ul></ul>
  16. 16. Aspectos legais <ul><li>Convenção da ONU sobre os Direitos das Pessoas com Deficiência </li></ul><ul><ul><li>Artigo 9 – Acessibilidade </li></ul></ul><ul><ul><ul><li>1 - A fim de possibilitar às pessoas com deficiência viver com autonomia e participar plenamente de todos os aspectos da vida, (...) tomar as medidas apropriadas para assegurar-lhes o acesso (...) ao meio físico, ao transporte, à informação e comunicação, inclusive aos sistemas e tecnologias da informação e comunicação (...). Estas medidas (...) deverão ser aplicadas, entre outras, a: </li></ul></ul></ul><ul><ul><ul><ul><li>b) Informações, comunicações e outros serviços, inclusive serviços eletrônicos e serviços de emergência; </li></ul></ul></ul></ul>
  17. 17. Aspectos legais <ul><li>Decreto federal 5296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>“ Estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, e dá outras providências”, aplicáveis aos sites da administração pública federal. </li></ul></ul>
  18. 18. Aspectos legais <ul><li>Decreto federal 5296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>Art. 8º: Para fins de acessibilidade, considera-se: </li></ul></ul><ul><ul><ul><li>I - acessibilidade: 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; </li></ul></ul></ul>
  19. 19. Aspectos legais <ul><li>Decreto federal 5296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>Art. 47: No prazo de até doze meses a contar da data de publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual , garantindo-lhes o pleno acesso às informações disponíveis. </li></ul></ul>
  20. 20. Aspectos legais <ul><li>Resolução 40/2008 - MG </li></ul><ul><ul><li>“ Estabelece diretrizes para estruturação, elaboração, manutenção e administração de sítios de informação de serviços públicos, na Internet dos Órgãos e Entidades do Poder Executivo da Administração Pública Estadual Direta, Autárquica e Fundacional”. </li></ul></ul>
  21. 21. Aspectos legais <ul><li>Resolução 40/2008 - MG </li></ul><ul><ul><li>Art. 10: O planejamento, implantação, desenvolvimento ou atualização de portais ou sítios eletrônicos reger-se-á por diretrizes e especificações que visem assegurar a acessibilidade aos seus conteúdos e serviços . </li></ul></ul>
  22. 22. Princípios da acessibilidade na web <ul><li>São 2 os pontos chave para se desenvolver websites acessíveis: </li></ul><ul><ul><li>WEB STANDARDS </li></ul></ul><ul><ul><li>SEMÂNTICA </li></ul></ul>
  23. 23. Web Standards <ul><li>Os Web Standards (Padrões Web) são normas de desenvolvimento criadas pela W3C e aceitas como as melhores práticas para a formatação de páginas para a internet. Têm por finalidade a criação de uma &quot;web universal”. </li></ul>
  24. 24. Semântica <ul><li>A semântica na web trata nada mais do que usar os elementos HTML para as funções às quais se destinam. </li></ul>
  25. 25. Semântica <ul><li>Benefícios: </li></ul><ul><ul><li>No que tange aos leitores de tela, facilita a correta interpretação dos elementos e conseqüente facilidade para o deficiente. </li></ul></ul><ul><ul><li>Favorece o acesso por dispositivos diversos. </li></ul></ul><ul><ul><li>Faz com que os mecanismos de busca “entendam” melhor a sua página, posicionando melhor seu site nos mecanismos de busca (SEO). </li></ul></ul><ul><ul><li>Agiliza o carregamento da página. </li></ul></ul>
  26. 26. Semântica <ul><li>Exemplos: </li></ul><ul><ul><li><H1> Heading (cabeçalho) nível 1 </li></ul></ul><ul><ul><li><H2> Heading (cabeçalho) nível 2 </li></ul></ul><ul><ul><li><ul> Unordered list – Uma lista não ordenada, como por exemplo, um menu. </li></ul></ul><ul><ul><li><table> Tabelas – são usadas para dados tabulados </li></ul></ul>
  27. 27. Semântica <ul><li>Tableless??? </li></ul><ul><ul><li>Nada mais é do que um aspecto da semântica na web. Tabelas (tag <table>) são feitas para dados tabulados, e não para diagramação de websites. Alguns leitores de tela não conseguem interpretar corretamente páginas com excesso de tabelas. </li></ul></ul><ul><ul><li>As tags corretas para posicionamento de blocos em uma página HTML são <div> e <spam>. </li></ul></ul>
  28. 28. Semântica <ul><li>Dicas </li></ul><ul><ul><li>Separe a estrutura e o conteúdo (HTML) da formatação (CSS). Use folhas de estilo anexadas. </li></ul></ul><ul><ul><li>Não use frames!! Além de dificultar a acessibilidade, estão totalmente em desuso. Utilize includes. </li></ul></ul>
  29. 29. Leitores de tela <ul><li>Para deficientes visuais com limitações grandes o suficiente para impedir a visualização da tela, o recurso mais utilizado para navegação na web são os softwares leitores de tela . Alguns exemplos: Jaws, Dosvox, NVDA, Virtual Vision. </li></ul>
  30. 30. Leitores de tela <ul><li>Os leitores de tela são softwares que “percorrem” a tela da aplicação ativa, “pronunciando” os textos encontrados. No caso de páginas da web, eles lêem o texto e demais elementos presentes, trazendo a indicação de cada um deles. </li></ul>
  31. 31. Leitores de tela <ul><li>Evite expressões sem contexto </li></ul><ul><ul><li>“ Clique aqui&quot; ou &quot;saiba mais&quot;, isoladamente, não têm nenhum significado. </li></ul></ul><ul><ul><li>Procure inserir o contexto nestas palavras ou utilize o atributo TITLE=&quot;<descrição>&quot;. </li></ul></ul><ul><ul><li>Exemplo: “ Para acessar o site do N Design, clique aqui ” ao invés de “Para acessar o site do N Design, clique aqui .” </li></ul></ul>
  32. 32. Tags Alt e Title <ul><li>As tags Alt e Title, da linguagem HTML, são extremamente importantes para a acessibilidade de um página. </li></ul><ul><ul><li>São usadas basicamente nos elementos imagem <img> e link <a>. </li></ul></ul><ul><ul><li>Trazem uma descrição sobre o elemento, que não é vista na leitura convencional da página, mas são pronunciadas pelos leitores de tela. </li></ul></ul>
  33. 33. Teclas de atalho <ul><li>As teclas de atalho facilitam bastante a navegação de uma página sem a utilização do mouse. </li></ul><ul><li>A linguagem HTML possui um atribuito nativo para este recurso: accesskey. Por isso é de fácil implementação. </li></ul>
  34. 34. Teclas de atalho <ul><li>Access keys avançam o cursor para áreas específicas da página, simplesmente pressionando alguma tecla pré-determinada. </li></ul><ul><li>É importante que estejam localizadas no início da página, pois os leitores de tela percorrem o conteúdo linearmente. </li></ul>
  35. 35. Teclas de atalho <ul><li>Deve-se listar elementos importantes da página, como menu, conteúdo e busca, por exemplo. Um menu “ir para” formado por access keys é bastante útil. </li></ul><ul><li>Pode-se usar também as âncoras, que avançam para algum link existente dentro da página através de um click. </li></ul>
  36. 36. Cores <ul><li>Evite utilizar cores como informação. Um item que dependa de sua cor para ser compreendido pode ser totalmente ignorado por usuários daltônicos. </li></ul>
  37. 37. Níveis de contraste <ul><li>É importante que a página ofereça a possibilidade de diferentes níveis de contraste. Este recurso é destinado a pessoas com baixa visão ou que possuam algum tipo de daltonismo. </li></ul>
  38. 38. Ajuste de tamanho do texto <ul><li>Outro recurso destinado a pessoas com baixa visão. Um javascript controla o tamanho dos textos exibidos na página, através de cliques do usuário. </li></ul>
  39. 39. Obrigado! <ul><ul><li>Agradecimentos </li></ul></ul><ul><ul><ul><li>Beatriz Helena de Oliveira – Prodemge </li></ul></ul></ul><ul><ul><ul><li>Flávio Couto e Silva de Oliveira – Caade </li></ul></ul></ul><ul><ul><ul><li>José Antonio dos Santos Borges – UFRJ </li></ul></ul></ul><ul><ul><li>Bibliografia </li></ul></ul><ul><ul><ul><li>www.w3c.org </li></ul></ul></ul><ul><ul><ul><li>www.lupadigital.info </li></ul></ul></ul><ul><ul><ul><li>www.webaserio.com </li></ul></ul></ul><ul><ul><ul><li>www.wikipedia.org </li></ul></ul></ul><ul><li>Twitter: @BrunoBorgesWeb </li></ul>

×