Acessibilidade para 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


Markup


Semântica

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.


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 é deﬁnido.

- O Google e outros buscadores utilizam para indexar conteúdo e
relacioná-las a estas imagens.


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>


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
identiﬁcam o idioma.

<html lang=”pt-br”>

Mais sobre o assunto: http://bit.ly/vG91Cv


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.


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.


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>


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”>


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”>


Boas práticas


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.


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”.


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.


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.


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.


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


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.


Responsive
Web Design


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 ﬂ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.


Range de screen size

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.


Referências
e fontes


Fontes de informação

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


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


Acessibilidade para web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Acessibilidade para web

Similaire à Acessibilidade para web (20)

Plus de Diego Eis

Plus de Diego Eis (17)

Acessibilidade para web