e-book apresentancao acessibilidade web

Introdução sobre Acessibilidade na web
Monday, January 23, 12

“Acessibilidade na web é o consumo da
informação por qualquer pessoa por
qualquer tipo de meio de acesso.”

Para que serve a web?
A web serve para compartilhar informação.

O que é informação?
Na web informação é tudo o que o usuário pode
consumir ao navegar: vídeo, áudio, texto,
imagem, gráﬁcos dinâmicos, games e etc.

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.

Acessibilidade para
quem?
Para qualquer um! Acessibilidade não é só para
pessoas com deﬁciê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.

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.

Atitudes para um sistema/
site mais acessível

Manter a semântica do código
é o primeiro passo. As novas
tags do HTML5 ajudam
trazendo novos signiﬁcados
semânticos para o código.
Semântica

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 é deﬁnido.
- O Google e outros buscadores utilizam para indexar conteúdo e
relacioná-las a estas imagens.
Atributo ALT

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

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
identiﬁcam o idioma.
<html lang=”pt-br”>
Mais sobre o assunto: http://bit.ly/vG91Cv
Atributo LANG

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

Quando utilizamos estes novos campos,
ao receber foco em um input de tipo
tel, por exemplo, o teclado do
dispositivo é modiﬁcado
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

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

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

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

Boas práticas

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

É 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

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

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

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

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 ﬂuxo ou a estrutura do layout, sempre ativando
alternativas para os visuais e funções que não
funcionarem.
Graceful Degradation

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

Responsive
Web Design

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 ﬂuído, mas planejar quais
áreas e estruturas do site serão ﬂexíveis de acordo
com o tamanho da tela usada para visualizar o site.
Personalizando para todos os
dipositivos

O ideal é deﬁnir 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íﬁco
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

Referências
e fontes

WCAG - Recomendação Oﬁcial 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

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

Por Diego Eis
@diegoeis
http://tableless.com.br/

e-book apresentancao acessibilidade web

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a e-book apresentancao acessibilidade web

Semelhante a e-book apresentancao acessibilidade web (20)

Último

Último (20)

e-book apresentancao acessibilidade web