O documento discute a importância da inclusão digital e acessibilidade na web, destacando como a democratização do acesso às tecnologias da informação permite a inserção de todos na sociedade da informação. Apresenta também aspectos legais e diretrizes para garantir que websites sejam acessíveis, especialmente para pessoas com deficiências visuais e cognitivas. O texto sugere boas práticas de desenvolvimento web, como o uso de padrões semânticos e recursos que facilitam a navegação para todos os usuários.

1. Inclusão digital através da acessibilidade na web Bruno Borges – Marketing Digital Julho / 2009

2. Olá! Quem vos fala... Bruno Borges – Designer Gráfico graduado em 2007 pela Universidade do Estado de Minas Gerais. Pós-graduando em Marketing Digital pelo UNI-BH. Analista de Design - Equipe Web Prodemge - Cia. de TI do Estado de MG

3. Inclusão Digital “ Inclusão Digital é a democratização do acesso às TIs, de forma a permitir a inserção de todos na sociedade da informação.”

4. Inclusão Digital Permitir que toda a sociedade possa ter acesso a informações disponíveis na Internet, e assim produzir e disseminar conhecimento. Inclusão Social > Inclusão Digital

5. Inclusão Digital Classes socialmente desfavorecidas Equipamento Acesso à rede Conhecimento das ferramentas Deficientes Acessibilidade

6. Acessibilidade “ 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.”

7. Acessibilidade na web “ Prática de se construir websites que possam ser utilizados por todas as pessoas, sejam portadoras de deficiências ou não”.

8. Acessibilidade na web 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.

9. Acessibilidade na web As boas práticas para desenvolvimento de websites acessíveis são defindas pela W3C (World Wide Web Consortium) Quanto mais acessível for o seu site, melhor ele será “entendido” pelos robôs de busca. Este é um dos fatores de SEO.

10. Acessibilidade e Inclusão Digital Socialmente desfavorecidos + Deficientes Deficientes visuais são os maiores prejudicados no acesso às informações online, que são quase 100% visuais. Solução: acessibilidade

11. Acessibilidade e Inclusão Digital Deficiências visuais: Cegueira Daltonismo Baixa visão Pessoas com deficiências cognitivas e motoras também têm seu acesso à web facilitado pela acessibilidade.

12. Importância da acessibilidade na web Milhões de pessoas no mundo possuem deficiências que dificultam seu acesso à Internet. No Brasil, 148 mil pessoas cegas e 2,4 milhões com grande dificuldade de enxergar (censo 2000).

13. Importância da acessibilidade na web Além do fator social, fica a pergunta: você quer abrir mão desse mercado?

14. Importância da acessibilidade na web A Internet é a mídia que mais cresce no mundo, e para pessoas com necessidades especiais pode significar a abertura de novos horizontes: Notícias, informação, comércio, lazer Educação, e-learning, pesquisa de trabalho Um local de interação Participação cívica - Leis, informações governamentais, serviços

15. Aspectos legais Muitas leis e tratados se aplicam à acessibilidade, em particular na web: O Brasil é signatário da Convenção da ONU sobre os Direitos das Pessoas com Deficiência Decreto Federal 5296/2004 Resolução Estadual 40/2008 - MG

16. Aspectos legais Convenção da ONU sobre os Direitos das Pessoas com Deficiência Artigo 9 – Acessibilidade 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: b) Informações, comunicações e outros serviços, inclusive serviços eletrônicos e serviços de emergência;

17. Aspectos legais Decreto federal 5296 de 2 de dezembro de 2004 “ 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.

18. Aspectos legais Decreto federal 5296 de 2 de dezembro de 2004 Art. 8º: Para fins de acessibilidade, considera-se: 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;

19. Aspectos legais Decreto federal 5296 de 2 de dezembro de 2004 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.

20. Aspectos legais Resolução 40/2008 - MG “ 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”.

21. Aspectos legais Resolução 40/2008 - MG 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 .

22. Princípios da acessibilidade na web São 2 os pontos chave para se desenvolver websites acessíveis: WEB STANDARDS SEMÂNTICA

23. Web Standards 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 "web universal”.

24. Semântica A semântica na web trata nada mais do que usar os elementos HTML para as funções às quais se destinam.

25. Semântica Benefícios: No que tange aos leitores de tela, facilita a correta interpretação dos elementos e conseqüente facilidade para o deficiente. Favorece o acesso por dispositivos diversos. Faz com que os mecanismos de busca “entendam” melhor a sua página, posicionando melhor seu site nos mecanismos de busca (SEO). Agiliza o carregamento da página.

26. Semântica Exemplos: <H1> Heading (cabeçalho) nível 1 <H2> Heading (cabeçalho) nível 2 <ul> Unordered list – Uma lista não ordenada, como por exemplo, um menu. <table> Tabelas – são usadas para dados tabulados

27. Semântica Tableless??? 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. As tags corretas para posicionamento de blocos em uma página HTML são <div> e <spam>.

28. Semântica Dicas Separe a estrutura e o conteúdo (HTML) da formatação (CSS). Use folhas de estilo anexadas. Não use frames!! Além de dificultar a acessibilidade, estão totalmente em desuso. Utilize includes.

29. Leitores de tela 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.

30. Leitores de tela 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.

31. Leitores de tela Evite expressões sem contexto “ Clique aqui&quot; ou &quot;saiba mais&quot;, isoladamente, não têm nenhum significado. Procure inserir o contexto nestas palavras ou utilize o atributo TITLE=&quot;<descrição>&quot;. Exemplo: “ Para acessar o site do N Design, clique aqui ” ao invés de “Para acessar o site do N Design, clique aqui .”

32. Tags Alt e Title As tags Alt e Title, da linguagem HTML, são extremamente importantes para a acessibilidade de um página. São usadas basicamente nos elementos imagem <img> e link <a>. 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.

33. Teclas de atalho As teclas de atalho facilitam bastante a navegação de uma página sem a utilização do mouse. A linguagem HTML possui um atribuito nativo para este recurso: accesskey. Por isso é de fácil implementação.

34. Teclas de atalho Access keys avançam o cursor para áreas específicas da página, simplesmente pressionando alguma tecla pré-determinada. É importante que estejam localizadas no início da página, pois os leitores de tela percorrem o conteúdo linearmente.

35. Teclas de atalho 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. Pode-se usar também as âncoras, que avançam para algum link existente dentro da página através de um click.

36. Cores 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.

37. Níveis de contraste É 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.

38. Ajuste de tamanho do texto 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.

39. Obrigado! Agradecimentos Beatriz Helena de Oliveira – Prodemge Flávio Couto e Silva de Oliveira – Caade José Antonio dos Santos Borges – UFRJ Bibliografia www.w3c.org www.lupadigital.info www.webaserio.com www.wikipedia.org Twitter: @BrunoBorgesWeb