Your SlideShare is downloading. ×
Acessibilidade para web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Acessibilidade para web

15,142
views

Published on

Comentários, sugestões, dicas práticas e indicações de técnicas para o desenvolvimento prático e acessível para web.

Comentários, sugestões, dicas práticas e indicações de técnicas para o desenvolvimento prático e acessível para web.

Published in: Technology

0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,142
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
241
Comments
0
Likes
27
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

Transcript

  • 1. Introdução sobre Acessibilidade na webMonday, January 23, 12
  • 2. “Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso.”Monday, January 23, 12
  • 3. Para que serve a web? A web serve para compartilhar informação.Monday, January 23, 12
  • 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. 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. 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. 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. Atitudes para um sistema/ site mais acessívelMonday, January 23, 12
  • 9. MarkupMonday, January 23, 12
  • 10. Semântica 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.Monday, January 23, 12
  • 11. Atributo ALT 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.Monday, January 23, 12
  • 12. Atributo TITLE 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>Monday, January 23, 12
  • 13. Atributo LANG 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/vG91CvMonday, January 23, 12
  • 14. Novos inputs types 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.Monday, January 23, 12
  • 15. Novos inputs types 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.Monday, January 23, 12
  • 16. Autofocus 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>Monday, January 23, 12
  • 17. Tabindex 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”>Monday, January 23, 12
  • 18. Access keys 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”>Monday, January 23, 12
  • 19. Boas práticasMonday, January 23, 12
  • 20. Menu de atalhos 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.Monday, January 23, 12
  • 21. Mapa do site É 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”.Monday, January 23, 12
  • 22. Textos e termos 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.Monday, January 23, 12
  • 23. Observações e instruções 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.Monday, January 23, 12
  • 24. Graceful Degradation e Progressive Enhancement 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.Monday, January 23, 12
  • 25. Graceful Degradation 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.Monday, January 23, 12
  • 26. Progressive Enhancement 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.Monday, January 23, 12
  • 27. Responsive Web DesignMonday, January 23, 12
  • 28. Personalizando para todos os dipositivos 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.Monday, January 23, 12
  • 29. Range de screen size 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.Monday, January 23, 12
  • 30. Referências e fontesMonday, January 23, 12
  • 31. Fontes de informação 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/Monday, January 23, 12
  • 32. Fontes de informação 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.htmlMonday, January 23, 12
  • 33. Por Diego Eis @diegoeis http://tableless.com.br/Monday, January 23, 12