Download - Introdução sobre Acessibilidade na Web
![Page 1: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/1.jpg)
Introdução sobre Acessibilidade na web
Monday, January 23, 12
![Page 2: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/2.jpg)
“Acessibilidade na web é o consumo da informação por qualquer pessoa por
qualquer tipo de meio de acesso.”
Monday, January 23, 12
![Page 3: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/3.jpg)
Para que serve a web?A web serve para compartilhar informação.
Monday, January 23, 12
![Page 4: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/4.jpg)
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
![Page 5: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/5.jpg)
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
![Page 6: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/6.jpg)
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
![Page 7: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/7.jpg)
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
![Page 8: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/8.jpg)
Atitudes para um sistema/site mais acessível
Monday, January 23, 12
![Page 9: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/9.jpg)
Markup
Monday, January 23, 12
![Page 10: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/10.jpg)
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
![Page 11: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/11.jpg)
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
![Page 12: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/12.jpg)
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
![Page 13: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/13.jpg)
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
![Page 14: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/14.jpg)
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
![Page 15: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/15.jpg)
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
![Page 16: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/16.jpg)
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
![Page 17: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/17.jpg)
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
![Page 18: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/18.jpg)
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
![Page 19: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/19.jpg)
Boas práticas
Monday, January 23, 12
![Page 20: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/20.jpg)
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
![Page 21: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/21.jpg)
É 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
![Page 22: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/22.jpg)
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
![Page 23: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/23.jpg)
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
![Page 24: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/24.jpg)
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
![Page 25: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/25.jpg)
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
![Page 26: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/26.jpg)
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
![Page 27: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/27.jpg)
Responsive Web Design
Monday, January 23, 12
![Page 28: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/28.jpg)
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
![Page 29: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/29.jpg)
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
![Page 30: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/30.jpg)
Referências e fontes
Monday, January 23, 12
![Page 31: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/31.jpg)
WCAG - Recomendação Oficial do W3Chttp://www.w3.org/TR/WCAG/
WAI - Web Accessibility Initiativehttp://www.w3.org/WAI/
Outras recomendações e correções do WCAGhttp://wcagsamurai.org/
e-Mag - Modelo de acessibilidade de Governo Eletrônicohttp://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/
Fontes de informação
Monday, January 23, 12
![Page 32: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/32.jpg)
Site conceitual e técnico criado pelo MAQ, um cegohttp://www.acessibilidadelegal.com/
Artigos e Posts sobre Acessibilidadehttp://tableless.com.br/categoria/acessibilidade-2/
Artigos e textos sobre acessibilidadehttp://acessodigital.net/artigos.html
Fontes de informação
Monday, January 23, 12
![Page 33: Introdução sobre Acessibilidade na Web](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5590b0821a28abfd058b45d7/html5/thumbnails/33.jpg)
Por Diego Eis@diegoeis
http://tableless.com.br/
Monday, January 23, 12