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.

e-book apresentancao acessibilidade web

399 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

e-book apresentancao acessibilidade web

  1. 1. Introdução sobre Acessibilidade na web Monday, January 23, 12
  2. 2. “Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso.” Monday, January 23, 12
  3. 3. Para que serve a web? A web serve para compartilhar informação. Monday, January 23, 12
  4. 4. O que é informação? Na web informação é tudo o que o usuário pode consumir ao navegar: vídeo, áudio, texto, imagem, gráficos dinâmicos, games e etc. Monday, January 23, 12
  5. 5. Reutilização da informação Quando uma informação na web é publicada essa informação é reutilizada de diversas maneiras. O Google, por exemplo, reutiliza a informação publicada nos resultados de busca. Monday, January 23, 12
  6. 6. Acessibilidade para quem? Para qualquer um! Acessibilidade não é só para pessoas com deficiência visual ou motora, mas também para qualquer usuário em situações diversas, como ao volante, com as mãos ocupadas ou em alguma situação que não é possível manipular o dispositivo. Monday, January 23, 12
  7. 7. Meios de acesso? Meios de acesso são aparelhos, sistemas ou dispositivos utilizados para consumir informação. Isso inclui robôs automatizados, dispositivos e aparelhos diversos. A informação deve ser acessível independente do meio de acesso. Monday, January 23, 12
  8. 8. Atitudes para um sistema/ site mais acessível Monday, January 23, 12
  9. 9. Markup Monday, January 23, 12
  10. 10. Manter a semântica do código é o primeiro passo. As novas tags do HTML5 ajudam trazendo novos significados semânticos para o código. Semântica Monday, January 23, 12
  11. 11. O atributo ALT descreve texto alternativo. Sintaxe: <img src=”imagem.jpg” alt=”Uma descrição resumida da imagem”> - Este texto é mostrado no lugar da imagem caso ela não seja carregada. - Muitos browsers também mostram este texto nas tooltips que aparecem quando paramos o mouse em cima da imagem quando o atributo TITLE não é definido. - O Google e outros buscadores utilizam para indexar conteúdo e relacioná-las a estas imagens. Atributo ALT Monday, January 23, 12
  12. 12. O atributo TITLE é utilizado por diversos motivos: - os browsers podem mostrar o texto do title como se fosse um tooltip. - Leitores de tela falam essa informação para os usuários. - Para acessibilidade é útil para indicar a real natureza do link. Informação agregada. <a href=”#” title=”Um texto descrevendo o link”><img src=”imagem.jpg” alt=”Uma descrição resumida da imagem”></a> Atributo TITLE Monday, January 23, 12
  13. 13. O atributo lang é muito utilizado para indicar qual idioma o documento ou um determinado termo é escrito. Normalmente utilizamos na tag <html>. Assim os buscadores, leitores de tela e outros sistemas identificam o idioma. <html lang=”pt-br”> Mais sobre o assunto: http://bit.ly/vG91Cv Atributo LANG Monday, January 23, 12
  14. 14. O HTML5 trouxe novos tipos de inputs. Antigamente quando queríamos fazer um campo de formulário para preenchimento de email, usávamos o input de tipo text. Para essas ocasiões o HTML5 trouxe o input de tipo “email” e outros como: search, tel, url, date, month, week, time, number, range, color, datetime. Utilizando estes tipos, facilitamos o preenchimento de formulários via mobiles e outros dispositivos. Novos inputs types Monday, January 23, 12
  15. 15. Quando utilizamos estes novos campos, ao receber foco em um input de tipo tel, por exemplo, o teclado do dispositivo é modificado automaticamente para um teclado numérico para facilitar a vida do usuário. A mesma coisa acontece com os os outros tipos, claro, cada um com sua característica. Novos inputs types Monday, January 23, 12
  16. 16. Quando se trata de uma página com grande quantidade de formulários e que o único objetivo seja o preenchimento deste formulário, como em um cadastro, busca ou algo do gênero, o atributo autofocus pode ser muito útil. Este atributo atribui o foco no elemento que o recebe, assim que a página é carregada. Logo, colocar autofocus no primeiro campo de formulário é uma boa prática. <input type=”text” autofocus> Autofocus Monday, January 23, 12
  17. 17. A tecla tab é a principal a principal tecla quando precisamos navegar utilizando o teclado. Dependendo do site, quando precisamos navegar utilizando a tecla Tab, nem sempre o foco do TAB envolve os elementos importantes para o usuário. O tabindex serve para resolver isso. Com ele nós determinamos o caminho que o foco deve percorrer quando acertamos o tab. <input type=”text” tabindex=”1”> <a href=”#” tabindex=”2”> Tabindex Monday, January 23, 12
  18. 18. Access key é uma feature do HTML que permite a criação de atalhos de teclado direto no código. Quando o usuário aciona o atalho, o navegador dá o foco no elemento. A ação do atalho depende do elemento. Por exemplo, geralmente quando o atalho está em um link, e o atalho é ativado, o browser navega automaticamente para este link. Quando é um campo de formulário o campo apenas recebe o foco. <input type=”text” accesskey=”s”> Access keys Monday, January 23, 12
  19. 19. Boas práticas Monday, January 23, 12
  20. 20. Nem sempre a navegação pelo teclado é confortável. Pode ser que o usuário tenha que teclar 40 vezes o tab até chegar ao destino desejado. Por isso, é interessante ajudarmos com a criação de um menu simples que pode acionado por um link escondido ou visível no header do documento. Este menu deve ser a primeira coisa que o leitor de tela deve ler e contém atalhos úteis como pular direto para o conteúdo, ir para o menu, ir para o sidebar e etc. Menu de atalhos Monday, January 23, 12
  21. 21. É interessante que haja uma página com os links de todas ou apenas das principais páginas do website/ sistema. Isso é importante para que o usuário obtenha atalhos do site e consiga navegar rapidamente por páginas mais “distantes”. Mapa do site Monday, January 23, 12
  22. 22. Alguns termos dos sistema/website devem ser evitados por termos mais ricos, com o propósito de trazer mais detalhes ao usuário. Por exemplo, evite a utilização de termos como SAIBA MAIS ou CLIQUE AQUI em links e banners. Não é interessante utilizar jargões ou palavras incomuns. Na maioria das vezes os leitores de tela não pronunciam bem abreviações e acronimos. Textos e termos Monday, January 23, 12
  23. 23. Em páginas de formulários são muito úteis informarmos para cada label ou cada campo observações e instruções de preenchimento. Isso ajuda usuários cegos a entenderem melhor que tipo de informações eles precisam preencher. As instruções e observações precisam ser bem resumidas mas claras ao mesmo tempo. Observações e instruções Monday, January 23, 12
  24. 24. Os dois termos tem muito em comum, mas tem ideias bem diferentes, mas ambas pretendem manter a melhor experiência que o usuário na sua realidade ao visitar o website/sistema. Graceful Degradation e Progressive Enhancement Monday, January 23, 12
  25. 25. O Graceful Degradation contempla o método de produzir sites sempre nivelando pelas features mais avançadas e browsers mais atuais, preparando fallbacks para os browsers antigos para não quebrar o fluxo ou a estrutura do layout, sempre ativando alternativas para os visuais e funções que não funcionarem. Graceful Degradation Monday, January 23, 12
  26. 26. O Progressive Enhancement defende o planejamento inicial para os browsers antigos, contemplando apenas os aspectos básicos que cada browser suporta, e posteriormente é aplicado uma camada para melhorar a experiência dos usuários que utilizam os meios de acesso mais atuais. Embora seja mais trabalhoso e leve mais tempo para planejamento, muitas equipes preferem praticar o Progressive Enhancement em detrimento ao Graceful Degradation. Progressive Enhancement Monday, January 23, 12
  27. 27. Responsive Web Design Monday, January 23, 12
  28. 28. O conceito de Responsive Web Design contempla a ideia de manter o layout dinâmico, que se modela de acordo com o tamanho da tela do usuário. Não é somente fazer um site fluído, mas planejar quais áreas e estruturas do site serão flexíveis de acordo com o tamanho da tela usada para visualizar o site. Personalizando para todos os dipositivos Monday, January 23, 12
  29. 29. O ideal é definir ranges para adequar o site na maiora dos dispositivos. Hoje podemos mapear as telas: smartphones, tablets, notebooks/monitores, TVs. Para cada tela é preciso ter um design específico para melhorar a experiência ou o design padrão deve degradar de forma natural, sem prejudicar a navegação do usuário. Range de screen size Monday, January 23, 12
  30. 30. Referências e fontes Monday, January 23, 12
  31. 31. WCAG - Recomendação Oficial do W3C http://www.w3.org/TR/WCAG/ WAI - Web Accessibility Initiative http://www.w3.org/WAI/ Outras recomendações e correções do WCAG http://wcagsamurai.org/ e-Mag - Modelo de acessibilidade de Governo Eletrônico http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ Fontes de informação Monday, January 23, 12
  32. 32. Site conceitual e técnico criado pelo MAQ, um cego http://www.acessibilidadelegal.com/ Artigos e Posts sobre Acessibilidade http://tableless.com.br/categoria/acessibilidade-2/ Artigos e textos sobre acessibilidade http://acessodigital.net/artigos.html Fontes de informação Monday, January 23, 12
  33. 33. Por Diego Eis @diegoeis http://tableless.com.br/ Monday, January 23, 12

×