Acessibilidade para web
Upcoming SlideShare
Loading in...5
×
 

Acessibilidade para web

on

  • 14,317 views

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.

Statistics

Views

Total Views
14,317
Views on SlideShare
3,882
Embed Views
10,435

Actions

Likes
27
Downloads
228
Comments
0

44 Embeds 10,435

http://tableless.com.br 8256
http://ufac.si 1278
http://localhost 272
http://cassianaferraz.com.br 259
http://www.cassianaferraz.com.br 127
http://thiagomunhozdev.wordpress.com 57
http://sommaweb.com.br 30
http://assets.txmblr.com 21
http://desk.desenv.net.br 18
http://porquetornaracessivel.tumblr.com 15
https://www.facebook.com 14
http://www.feedspot.com 11
http://www.twylah.com 8
http://www.linkedin.com 8
http://flavors.me 6
http://newsblur.com 6
https://twitter.com 5
http://www.facebook.com 3
http://us-w1.rockmelt.com 3
http://www.plurk.com 3
http://www.newsblur.com 3
http://cloud.feedly.com 2
http://feedly.com 2
http://hoob.com.br 2
http://jp.flavors.me 2
http://pt.flavors.me 2
http://es.flavors.me 2
http://wonder-tonic.com 2
http://a0.twimg.com 2
http://www.plugmasters.com.br 2
http://fr.flavors.me 1
https://www.linkedin.com 1
http://digg.com 1
http://www.sommaweb.com.br 1
http://feeds.feedburner.com 1
http://reader.local 1
http://www.google.com 1
http://goo.gl 1
http://feedspot.com 1
http://t.co 1
http://www.diffbot.com&_=1351553514354 HTTP 1
http://webcache.googleusercontent.com 1
http://speakerdeck.com 1
http://www.hearthstoneduels.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Acessibilidade para web Acessibilidade para web Presentation Transcript

  • Introdução sobre Acessibilidade na webMonday, January 23, 12
  • “Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso.”Monday, January 23, 12
  • Para que serve a web? A web serve para compartilhar informação.Monday, January 23, 12
  • 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
  • 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
  • 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
  • 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
  • Atitudes para um sistema/ site mais acessívelMonday, January 23, 12
  • MarkupMonday, January 23, 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Boas práticasMonday, January 23, 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Responsive Web DesignMonday, January 23, 12
  • 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
  • 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
  • Referências e fontesMonday, January 23, 12
  • 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
  • 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
  • Por Diego Eis @diegoeis http://tableless.com.br/Monday, January 23, 12