Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Acessibilidade

2,480 views

Published on

Topicos sobre como tornar um site acessível.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Acessibilidade

  1. 1. Acessibilidade na Web Taynara Jaegger da Silva [email_address] http://blogdatay.wordpress.com
  2. 2. O que é Acessibilidade? Acessibilidade significa não apenas permitir que pessoas com deficiências participem de atividades que incluem o uso de produtos, serviços e informação,mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.
  3. 3. Acessibilidade na Web <ul><ul><li>Deficientes visuais (cegueira, daltonismo, baixa visão) </li></ul></ul><ul><ul><li>Deficientes auditivos </li></ul></ul><ul><ul><li>Deficientes físicos </li></ul></ul><ul><ul><li>Usuários de todos os dispositivos </li></ul></ul><ul><ul><li>Usuários com diferentes resoluções de tela </li></ul></ul><ul><ul><li>Usuários com internet de baixa velocidade </li></ul></ul>
  4. 4. Beneficios em criar sites acessíveis <ul><ul><li>Expansão da base de usuários </li></ul></ul><ul><ul><li>Menor demanda de infra-estrutura </li></ul></ul><ul><ul><li>Usuários atuais com mais interesse para acessar </li></ul></ul><ul><ul><li>Melhores resultados para SEO </li></ul></ul><ul><ul><li>Melhor para a manutenção </li></ul></ul>
  5. 5. Padrões para acessibilidade <ul><ul><li>São usadas regras de padronização para </li></ul></ul><ul><ul><li>acessbilidade do WCAG, atualmente na versão 2.0. </li></ul></ul><ul><ul><li>O WCAG é uma recomendação W3C. </li></ul></ul><ul><ul><li>Acesse: </li></ul></ul><ul><ul><li>http://www.w3.org/TR/WCAG/ </li></ul></ul>
  6. 6. Quem está envolvido com acessibilidade? <ul><ul><li>Area comercial </li></ul></ul><ul><ul><li>Arquitetura de informação </li></ul></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Redação </li></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>Desenvolvimento </li></ul></ul><ul><ul><li>Qualidade </li></ul></ul>
  7. 7. Tornando um site acessível
  8. 8. Para arquitetos da informação <ul><ul><li>Disposição de textos </li></ul></ul><ul><ul><li>Se for preciso planejar versão mobile </li></ul></ul><ul><ul><li>Versão Mobile </li></ul></ul><ul><ul><li>Versão para PC </li></ul></ul>http://www.twitter.com
  9. 9. Para designers <ul><ul><li>“ O importante é a informação” </li></ul></ul><ul><ul><li>Consistência de dados </li></ul></ul><ul><ul><li>Links devem ter cara de links </li></ul></ul>
  10. 10. <ul><ul><li>Tamanho único não serve para todo mundo, melhor forma de resolver isso é com Layout fluído ou líquido </li></ul></ul>http://www.anao.es
  11. 11. <ul><ul><li>Assegure-se que toda informação comunicada em cores também esteja disponível sem cores </li></ul></ul>http ://www.google.com/intl/pt-BR/ googlecalendar/ event_publisher_guide.html https://twitter.com/signup
  12. 12. <ul><ul><li>Vídeos colocados nos sites precisam ser também legendados </li></ul></ul><ul><ul><li>É sempre melhor termos fontes do sistema no menu </li></ul></ul><ul><ul><li>Links das notícias no topo da página </li></ul></ul>http://www.acessibilidadelegal.com/00-acessibilidade.php
  13. 13. Flash <ul><ul><li>A maioria dos mobiles não aceitam flash </li></ul></ul><ul><ul><li>Sempre colocar Título e Descrição na caixa das Propiedades do Documento </li></ul></ul><ul><ul><li>Também existe o Painel de Acessbilidade do Flash, que pode ser usado abrindo o menu Window > Other Panels > Accessibility . </li></ul></ul><ul><ul><li>Mais informações : http://imasters.uol.com.br/artigo/8146/flash/acessibilidade_em_flash/ </li></ul></ul>
  14. 14. Flex <ul><ul><li>Todo gráfico existente no site, é legal também ter sua versão em texto </li></ul></ul><ul><ul><li>Nas propriedades do Flex, temos para habilitar Acessibilidade assim como no Flash </li></ul></ul>
  15. 15. Para o HTML <ul><ul><li>HTML na ordem de leitura </li></ul></ul><ul><ul><li>HTML semanticamente correto </li></ul></ul><ul><ul><li>Colocar sempre nas imagens o atributo alt e title com a descrição da imagem </li></ul></ul><ul><ul><li>Textos na página nunca podem ser medidas por pixel, use valores relativos (em,pt) </li></ul></ul><ul><ul><li>Se usar frames, usar a tag interna <noframes>, e o atributo ‘longdesc’ </li></ul></ul>Ex: http://www.cepreuniversitario.com.br/
  16. 16. <ul><ul><li>Molduras dinâmicas são bem-vindas ‘ :focus (para Firefox), :active (para IE) ‘ </li></ul></ul><ul><ul><li>Use e abuse da tag <caption>, dos atributos id, headers e scope. Eles guiam o leitor de sites. http://www.w3.org/TR/html401/struct/tables.html </li></ul></ul>
  17. 17. <ul><ul><li>Usar o atributo que determina a linguagem do site ‘ lang:pt’ </li></ul></ul><ul><ul><li>Usar min-width e max-width, isso ajuda nas diferentes resoluções </li></ul></ul>
  18. 18. Para Redatores
  19. 19. Para Desenvolvedores <ul><ul><li>AJAX não funciona em mobile </li></ul></ul><ul><ul><li>AJAX confunde os usuários de eitores de tela </li></ul></ul>
  20. 21. Para Qualidade
  21. 23. Novas Tecnologias e Acessibilidade
  22. 24. <ul><ul><li>Sites acessíveis não precisam ser necessariamente feios, </li></ul></ul><ul><ul><li>sem cores, imagens e funcionalidades. </li></ul></ul><ul><ul><li>Obrigada pela atenção! </li></ul></ul>

×