Acessibilidade

2,412 views

Published on

Topicos sobre como tornar um site acessível.

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

  • Be the first to like this

No Downloads
Views
Total views
2,412
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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>

    ×