O documento discute a importância da acessibilidade na web, definindo-a como o consumo da informação por qualquer pessoa por qualquer meio de acesso. Explica que a web serve para compartilhar informação sob diversos formatos e que acessibilidade beneficia todos os usuários, não apenas pessoas com deficiência. Também aborda boas práticas de marcação, semântica, atributos e design responsivo para tornar conteúdo acessível a todos.
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ível
Monday, 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/vG91Cv
Monday, 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
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
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
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.html
Monday, January 23, 12
33. Por Diego Eis
@diegoeis
http://tableless.com.br/
Monday, January 23, 12