Acessibilidade

na Web

Santa Maria - 23 de julho de 2015

A Web acessvel na sua origem

Tim Berners-Lee, diretor do W3C
afirma que o poder da Web est na
sua universalidade. Para ele, ser
acessada por todos, independente de
deficincia, um aspecto essencial.
A acessibilidade na Web significa,
portanto, permitir o acesso a
todos, independente do tipo de
usurio, situao ou ferramenta.

Acessibilidade na Web:
Custo ou benefcio?
https://www.youtube.com/watch?v=y8vxALUz6pk

Mas a acessibilidade atende apenas as pessoas

com deficincia?

Em nmeros: Quem se beneficiaria da acessibilidade?

Falta cidadania foto de Milton
Jung
Carros estacionados em vagas
especiais
http://www.flickr.com/photos/c
bnsp/5360821409/
CC licence

23,8% da populao brasileira (ou

cerca de 45 milhes de pessoas) ;

7,4% tem 65 anos ou mais;

9,63% so analfabetos;

70% das pessoas Pessoas que nunca

acessaram a internet, mas usaram um
computador alegam que no usam
Internet por falta de habilidade.

Motivos pelos quais nunca utilizou a internet

70%
Falta de habilidade com o
computador/internet
Pessoas que nunca acessaram a internet, mas usaram um computador.
Fonte: Pesquisa TIC Domiclios 2013 CGI.br

Fonte: http://www.cetic.br/

Deficincia temporria

Foto: Flickr.com - Tuftronic10000

Acessibilidade na web: A quem se destina?

Foto: everystockphoto.com -bartimaeus-

Usurios de Dispositivos Mveis

Idade Avanada

Ns, daqui
alguns
anos
Foto: Flickr.com - Jacob Btter

Outros tipos de usurios...

Usurios de governo eletrnico

Preocupao com proteo e segurana
dos dados pessoais (39%)
Dificuldade em encontrar os servios que
precisam (29%)
Dificilmente recebem retorno (reposta) s
solicitaes(28%)
Os servios esto disponveis, mas no
possvel completar a transao (23%)
No temos confirmao de que o pedido
chegou e que vai ser processado (21%)
Usar a internet para contato com o governo
muito complicado (21%)

Usurios de governo eletrnico

88% - Muito importante que um stio de

governo oferecesse explicaes sobre como
utilizar um servio.
84% - Muito importante que um stio de
governo oferecesse explicaes sobre os
direitos do cidado.

A acessibilidade beneficia a todos.

Acessibilidade para todos !

17

Como eu sei que um site acessvel?

18

J navegou no seu site apenas com teclado?

Sem CSS ou scripts?

Sem CSS
e imagens

Foto: Flickr.com - Baddog_

sem monitor ?

Como as pessoas navegam pelo leitor

de tela?

Como as pessoas navegam pelo leitor

de tela?

Como as pessoas navegam pelo leitor

de tela?

Processo para desenvolver stio acessvel:

Seguir os padres Web;

Seguir as diretrizes e recomendaes de acessibilidade;

Realizar avaliao de acessibilidade.

Cdigo acessvel
Contedo alternativo para elementos notextuais;
Dados de tabelas acessveis;
Formulrios acessveis;
Menus de escape;
Teclas de acesso;
Folhas de estilo com medidas relativas;
Documentos legveis sem a folha de estilos;
Semntica;

Cdigo acessvel

Programao em camadas;

No usar tabelas para diagramar;

No utilizar frames;

No utilizar elementos proprietrios;

Vdeos com legendas

Imagens acessveis

Cabealhos
<H1>Ttulo Principal</H1>
<H2>Subttulo</H2>
<H3>Sub-Subttulo</H3>
<H2>Subttulo</H2>
<H3>Sub-Subttulo</H3>
<H4>....</H4>

Contraste

Formulrios

Formulrios

<input type="checkbox" value="yes" name="apples">

Apples
<input type="checkbox" value="yes" name="oranges"> Oranges
<input type="checkbox" value="yes" name="lemons"> Lemons
<input type="checkbox" value="yes" name="limes">
Limes

Formulrios

<input type="checkbox" value="yes" id=apples name="apples">

<label for=apples"> Apples</label>
<input type="checkbox" value="yes" id=oranges name="oranges">
<label for=oranges"> Oranges</label>
<input type="checkbox" value="yes" id=lemmons name="lemons">
<label for=lemons"> Lemons</label>
<input type="checkbox" value="yes" id=limes name="limes">
<label for=limes"> Limes</label>

Tabelas

Tabelas
A5 - TIPO DE CONEXO PARA ACESSO INTERNET NO DOMICLIO
Percentual sobre o total de domiclios com acesso Internet 1 Percentual
(%) Modem Tradicional (acesso discado linha telefnica) Banda Larga 2
Outros NS/NR 3 TOTAL Banda Larga Modem digital via linha telefnica
(tecnologia DSL) Modem via cabo Conexo via rdio Conexo via satlite
TOTAL BRASIL 20 66 23 25 14 3 6 10 REA URBANA 19 66 24 26 14 3 6 9
RURAL 21 55 17 14 20 5 8 16 REGIES DO PAS SUDESTE 22 65 21 30
11 3 4 10 NORDESTE 19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10
NORTE 31 49 23 11 11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13
RENDA FAMILIAR At R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61
18 24 15 4 4 14 R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63
23 22 15 3 6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78
27 34 16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13
3 6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29

Acessvel via teclado

HTML e CSS

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 1

"Acessibilidade Web s para deficientes visuais."

Temor oculto: "Imagina o trabalho que vai dar, fazer

acessibilidade para todo mundo!"

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 2

"Na prtica, o nmero de usurios beneficiados com a

acessibilidade relativamente muito pequeno."

Temor oculto: "Esse negcio de acessibilidade muito

investimento para pouco retorno."

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 3

"Fazer um site acessvel demora e custa caro."

Temor oculto: No estarei empregando mal os recursos que

tenho, ao fazer acessibilidade? No vou ficar no prejuzo?

Dobrou o nmero de visitantes e

cortou os custos de manuteno em
2/3.

35 mil libras para construo 13

milhes de retorno annual.

CNET - 30% de aumento de

trfego vindo do Google aps
implementar transcrio em
arquivos multimidia.

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 4

" melhor fazer uma pgina especial para

os deficientes visuais."

Temor oculto: "A gente no vai conseguir fazer uma pgina

acessvel, que seja to bonita e funcional como a nossa."

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 5

"Um site acessvel a deficientes visuais no bonito."

Temor oculto: "S sei fazer sites bonitos usando tecnologias
inacessveis; de fato, no sei exatamente quais so os elementos
visuais que atrapalham a acessibilidade. Por isso, quando tenho
que fazer um site acessvel, fao sempre o arroz com feijo."

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 6

Vamos por partes: primeiro fazemos o site, depois fazemos

acessibilidade."

Temor oculto: "No vamos conseguir fazer um site acessvel,

com o tempo, os recursos e a equipe que temos."

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Mito 7

"A gente sabe o que bom para o usurio."

Temor oculto: "No quero expor meu projeto s crticas."

Acessibilidade 7 mitos e 1 equvoco por Leda Spelta

Equvoco

"Meu site direcionado a um pblico especfico; ele

no interessa a todos os grupos de usurios."

Quando restringimos o acesso do nosso site ao que

julgamos serem as caractersticas do seu pblico alvo,
estamos, na prtica, usando a internet para limitar o nosso
pblico, ao invs de ampli-lo.

Como eu aprendo?

http://www.enap.gov.br/

e-MAG Desenvolvedor TURMA 2/2015 de 11/08/2015 a 07/09/2015

Inscries abertas at 06/08/2015

GT de Acessibilidade do W3C

Traduo do Documento base do WCAG

http://traducoes.w3c.br/TR/WCAG/

Prmio Todos@Web

Cartilha de Acessibilidade na Web (Fascculo I)

http://www.ceweb.br/

Obrigado!
Fernanda Hoffmann Lobato
garotadpi.com.br
twitter: @garotadpi
Github.com/garotadpi
garotadpi@gmail.com