• Like
  • Save
Inclusão Digital através da acessibilidade na web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Inclusão Digital através da acessibilidade na web

  • 861 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
861
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • A essência da inclusão digital - permitir que toda a sociedade possa ter acesso a informações disponíveis na Internet, e assim produzir e disseminar conhecimento. A inclusão digital é um parte do todo, que é a inclusão social
  • Quando se fala em inclusão digital, a maioria das pessoas associa o termo apenas à inclusão de pessoas em condição econômica desfavorável. Sob essa ótica, são considerados 3 fatores: equipamento, acesso à rede e o domínio dessas ferramentas. Então são criadas linhas de crédito para financiamento de computadores, cursos gratuitos para a população carente aprender a utilizar a internet, centros de acesso gratuito à web, etc. Porém, a inclusão digital volta-se também para o desenvolvimento de tecnologias que ampliem a acessibilidade para usuários com deficiência, que se dá através da chamada “e-acessibility”, ou acessibilidade às TIs. Ocorre que esta fatia de pessoas sem acesso à informação online é muitas vezes esquecida.
  • Atualmente muito se fala sobre inclusão digital. A primeira coisa que se pensa sobre o assunto é sobre a inclusão de pessoas socialmente desfavorecias. Mas há muito mais do que isso, e no que tange à internet, a inclusão dos deficientes visuais é muito importante, visto que a deficiência visual é a que mais atrapalha ou impede o acesso às informações na web, que são quase totalmente visuais.
  • A inclusão das pessoas que possuem necessidades especiais é uma forma de inserir estas pessoas no universo de informações da internet. E isto é uma necessidade social, uma obrigação da sociedade em relação a estas pessoas.
  • É aqui que tudo começa na prática. Para se desenvolver sites acessíveis, existem 2 pilares básicos: Webstandards e semântica
  • A semântica é extremamente importante em vários aspectos. Além de facilitar o acesso a usuários com necessidades especiais, também favorece o acesso por dispositivos diversos e faz com que os mecanismos de busca “entendam” melhor a sua página, posicionando melhor seu site nas buscas. Além disso, é também um fator para agilizar o carregamento da página.
  • o título de uma página deve usar <H1>, que significa Heading 1 (cabeçalho 1) e não simplesmente um parágrafo com fonte bold. Tabelas <table> são feitas para dados tabulados, e não para diagramar uma página. Menus são listas não ordenadas, por tanto devem usar a tag <UL> e assim sucessivamente.
  • Esse termo virou moda. As pessoas costumam dizer “ah, eu faço site em tableless” como se isso fosse uma linguagem ou uma tecnologia. Na prática, tableless em tradução literal significa “sem tabelas”. Isto significa que não são usadas tabelas para “diagramar” a página. Este é apenas um dos fatores da semântica na web, que é um dos principais pontos considerados para o SEO.
  • Quando há um link, ele emite o aviso “link” ou “link externo” e o endereço do mesmo. Quando há uma imagem, ele procura pelas tags descritivas desta (alt ou title). Caso não encontre, lê o nome do arquivo.
  • Expressões isoladas não são bem entendidas pelos leitores de texto.
  • - Estes elementos são responsáveis pela exibição das tool tips exibidas ao posicionarmos o mouse sobre uma imagem, por exemplo. - No caso de um link, é muito importante pois traz uma descrição do destino do link e do que se trata. O aviso é algo como “Link externo: Site do N Design”, onde link externo é pronunciado automaticamente pelo software e site do N design é o conteúdo definido na tag Alt ou Title. No caso de uma imagem, traz a descrição da mesma para o leitor de tela ou mesmo para dispositivos que não possam exibir imagens. Muito importantes também na indexação pelso mecanismos de busca
  • Access Key é um atributo usado em algumas tags da linguagem HTML, que possibilita acessar determinada área da página simplesmente pressionando alguma tecla pré-determinada. É importante que esteja localizado no início da página, pois os leitores de tela percorrem o conteúdo linearmente, e um menu “ir para” economiza muito tempo. Deve-se listar elementos importantes da página, como menu, conteúdo e busca, por exemplo.
  • <a name=“menuinferior"></a> <a href="#menuinferior">Texto</a>
  • É necessário usar diferentes folhas de estilo (CSS). O usuário, ao clicar no local indicado, alterna entre o uso de cada uma delas, que já estarão pré-formatadas para os diferentes níveis de contraste.
  • Browsers mais novos já vêm com o recurso de zoom na página, que evita quebras no layout quando apenas o texto é aumentado.

Transcript

  • 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