Acessibilidade na Web

Dicas rpidas para tornar um projeto web mais acessvel

Reinaldo Ferraz
Acessibilidade, para quem?
Cegos Daltnicos - Baixa viso
Foto: everystockphoto.com - namida-k
Surdos
Foto: everystockphoto.com - jessicafm
Mobilidade reduzida
Acessibilidade na web
Porque no
desenvolvemos
web sites
acessveis?

Algumas hipteses:
Desconhecimento

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
Acessibilidade na web

Preconceito
Pblico alvo
muito caro!
O prazo curto!
D muito trabalho!
No sei fazer!
Pequenos testes, grandes descobertas
Acessvel via teclado

Foto: Flickr.com - Baddog_
J testou o seu site?
Joo
tetraplgico





Vdeos com legendas

J testou o seu site?
Michele
surda





J testou o seu site?
Sem CSS
e imagens

Foto: Flickr.com - Baddog_
Ou mesmo sem monitor

J testou o seu site?
Carlos cego







Estatsticas
24%
45.623.910 pessoas
Censo 2010
Fonte: IBGE
Pessoas com deficincia no Brasil
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
Acessibilidade na web
35.791.488
Censo 2010
Pessoas com deficincia visual no Brasil
Fonte: http://www.ibge.gov.br/
Acessibilidade na web


Censo 2010
Pessoas com deficincia visual no Brasil
Fonte: http://www.ibge.gov.br/
No consegue
(enxergar) de
modo algum
Grande
dificuldade
Alguma
dificuldade
528.624 6.056.684 29.206.180
Acessibilidade na web
Beneficia pessoas com deficincia
Acessibilidade na web: A quem se destina?
Acessibilidade para todos !
Usurios de Dispositivos Mveis
Deficincia temporria
Medo de usar o computador
Foto: everystockphoto.com - Violator3
Acessibilidade na web
57%
Falta de habilidade com o
computador/internet
Fonte: Pesquisa TIC Domiclios 2011 CGI.br
Pessoas que nunca acessaram a internet, mas usaram um computador.
Motivos pelos quais nunca utilizou a internet
Fonte: http://www.cetic.br/
Incio de aprendizado
Nosso primeiro contato
Idade Avanada



Ns, daqui
alguns
anos



Acessibilidade na web
Foto: Flickr.com - Jacob Btter
Nmero de pessoas com
60 anos ou mais
no mundo:

1950 205 milhes
2000 606 milhes

Estimativa para 2050
Quase 2 bilhes de pessoas
com mais de 60 anos.
(+ de 20% da populao)
Fonte: http://www.un.org/esa/population/publications/worldageing19502050/
98
94
94
88
80
85
90
95
100
2008 2009 2010 2011
% de pessoas com 60 anos ou mais que
nunca acessou a internet
Fonte: Pesquisa TIC Domiclios CETIC.br
O caminho para a
acessibilidade na web
Foto: everystockphoto.com - Colin Gregory Palmer
Aplicando acessibilidade
Web Content Accessibility
Guidelines (WCAG)

Verso 2.0 11 de dezembro de 2008
www.w3.org/TR/WCAG/


WCAG 2.0
4 Princpios
Recomendaes
(12 no total)
Critrios de
sucesso
Tcnicas
suficientes e
aconselhadas
Como Cumprir os critrios de sucesso
Entendendo os critrios de sucesso
Entendendo as Recomendaes
WCAG 2.0
Princpio 1: Perceptvel



Isto significa que os usurios devem ser capazes de perceber a
informao que est sendo apresentada, no podendo ser invisvel
para todos os seus sentidos.
Perceptvel

Fornea alternativas de texto para o contedo
no textual.
<img>
<img>
<img alt="Foto das teclas W, 3 e C
fora do teclado">
<img>
<img alt="Foto das teclas W, 3 e C
fora do teclado">
<img src="foto.jpg" alt=Foto das
teclas W, 3 e C fora do teclado">
Se o elemento no
textual necessitar de
entrada de dados do
usurio
Princpio 1: Perceptvel
Exemplos
Em um campo de entrada de texto:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
Em um campo checkbox:
<input type="checkbox" id="markuplang" name="computerskills>
<label for="markuplang">HTML</label>
Obs: Elemento Label deve estar posicionado depois dos elementos input de
type="checkbox" e type="radio"


Princpio 1: Perceptvel
Utilizar o elemento o atributo title para identificar
controles de formulrios quando o elemento label no
puder ser utilizado
Exemplo: Campos de texto para nmeros de telefone
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange title="First three digits of phone number" type="text value="" >
<input id="lastDigits title="Last four digits of phone number" type="text value="" >
</fieldset>
Princpio 1: Perceptvel
Tcnicas suficientes
Se o elemento no
textual deve ser ignorado
pelas tecnologias
assistivas?
Princpio 1: Perceptvel
Utilize CSS para incluir imagens decorativas
O objetivo desta tcnica fornecer um mecanismo que
adicione imagens meramente decorativas sem adicion-la
dentro do contedo.
<style type="text/css">
body {
background: url('/images/home-bg.jpg');
}
</style>
Princpio 1: Perceptvel
Perceptvel

Fornea alternativas de texto para o contedo
no textual.
Fornea legendas e alternativas para
contedo de udio e vdeo.
Proporcionar legendas (open ou closed caption)
Princpio 1: Perceptvel
Proporcionar uma alternativa para a mdia baseada
em tempo
Veja a verso em texto do treinamento
Transcrio do vdeo em texto
Princpio 1: Perceptvel
Perceptvel

Fornea alternativas de texto para o contedo
no textual.
Fornea legendas e alternativas para
contedo de udio e vdeo.
Faa o contedo adaptvel e disponvel para
tecnologias assistivas.
Princpio 1: Perceptvel
<table>

<caption>A1 - PROPORO DE DOMICLIOS COM
COMPUTADOR</caption>

</table>
Princpio 1: Perceptvel
61
Princpio 1: Perceptvel - A informao e os componentes da
interface do usurio tm de ser apresentados aos usurios em
formas que eles possam perceber.
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<td scope="col">Name</td>
<td scope="col">Phone#</td>
<td scope="col">City</td>
</tr><tr>
<td>1.</td>
<td scope="row">Joel Garner</td>
<td>412-212-5421</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<td scope="row">Clive Lloyd</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
</table>
Princpio 1: Perceptvel
Princpio 1: Perceptvel - A informao e os componentes da
interface do usurio tm de ser apresentados aos usurios em
formas que eles possam perceber.
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
Princpio 1: Perceptvel
Perceptvel

Fornea alternativas de texto para o contedo
no textual.
Fornea legendas e alternativas para
contedo de udio e vdeo.
Faa o contedo adaptvel e disponvel para
tecnologias assistivas.
Usar contraste suficiente para tornar as coisas
fceis de ver e ouvir.
Daltonismo
Viso normal
Daltonismo
Protanopia (Deficincias em vermelho)
Daltonismo
Deuteranopia (Deficincias em verde)
Daltonismo
Tritanopia (Deficincias em azul)
Daltonismo
Acromatopsia (Deficincias todas as cores)
Daltonismo
Baixa viso
http://snook.ca/technical/colour_contrast/colour.html
http://juicystudio.com/services/csstest.php
http://webaim.org/resources/contrastchecker/

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
Princpio 2: Opervel



Isto significa que os usurios devem ser capazes de operar a
interface; a interface de interao no pode exigir interao que o
usurio no possa executar.
Opervel

Faa todas as funcionalidades acessveis via
teclado.
<a href="menu.php"
onmouseover="swapImageOn('menu')"
onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')"
onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>
Princpio 2: Opervel
Utilizar o teclado e outras funes especficas do dispositivo
a:hover, a:focus{
color:#CCC;
}


Princpio 2: Opervel
Utilizar o teclado e outras funes especficas do dispositivo
Opervel

Faa todas as funcionalidades acessveis via
teclado.
No utilize contedo que cause convulses.
Opervel

Faa todas as funcionalidades acessveis via
teclado.
No utilize contedo que cause convulses.
Ajude os usurios a navegar e encontrar
contedo.
Princpio 2: Opervel
Um link Pular para o contedo principal


Fornecer elementos de cabealho no incio de cada seo de contedo

Princpio 2: Opervel
<H1>Ttulo Principal</H1>
<H2>Subttulo</H2>
<H3>Sub-Subttulo</H3>
<H2>Subttulo</H2>
<H3>Sub-Subttulo</H3>
<H4>....</H4>




Princpio 3: Compreensvel



Isto significa que os usurios devem ser capazes de compreender as
informaes, bem como o funcionamento da interface do usurio;
o contedo ou operao no pode ir alm de sua compreenso.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document crit en franais</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
</head>
<body>
...document crit en franais
</body>
</html>
Definir o idioma da pgina
Usando atributos de idioma no elemento HTML

Princpio 3: Compreensvel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document crit en franais</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
</head>
<body>
...document crit en franais <span lang=en>and
english</span>...
</body>
</html>
Definir o idioma da pgina
Usando atributos de idioma no elemento HTML

Princpio 3: Compreensvel
Princpio 4: Robusto



Isto significa que os usurios devem ser capazes de acessar o
contedo conforme as tecnologias evoluem; como a tecnologia e os
agentes de usurio evoluem, o contedo deve permanecer
acessvel.
Robusto

Maximize a compatibilidade com as tecnologias
atuais e futuras.
http://validator.w3.org/
Validar as pginas Web












O objetivo desta tcnica
evitar ambigidades em
pginas da Web que
muitas vezes resultam em
cdigo que no valida
contra especificaes
formais.












Princpio 4: Robusto
http://www.w3.org/TR/
Usando HTML de acordo com a especificao












Princpio 4: Robusto
HTML
<img src=img.gif alt=>
XHTML
<img src=img.gif alt= />
Assegurar que abertura e fechamento de tags sejam
utilizadas de acordo com a especificao (HTML)











<div><b>Texto </b>
<p><a href=link.htm>Texto </p></a>
Princpio 4: Robusto
ARIA e HTML5
ARIA e HTML5

Ao infinito e alm!

ARIA e HTML5
WAI-ARIA (Accessible Rich Internet Applications)
define uma forma de tornar o contedo e
aplicativos web mais acessveis a pessoas com
deficincias. Ele contribui especialmente com
contedo dinmico e interface de controles de
usurio avanadas desenvolvidos com Ajax, HTML,
JavaScript e tecnologias relacionadas.

http://www.w3.org/WAI/intro/aria

ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papis)
alert
Alertdialog
button
checkbox
dialog
menu
menubar
menuitem
option
...
http://www.w3.org/TR/wai-aria/roles#role_definitions
ARIA e HTML5
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-expanded (state)
aria-flowto
aria-grabbed (state)
35 States and Properties (Estados e Propriedades)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
...
http://www.w3.org/TR/wai-aria/states_and_properties
ARIA e HTML5
<a href="#
id="handle_zoomSlider
role="slider
aria-orientation="vertical
aria-valuemin="0
aria-valuemax="17
aria-valuetext="14
aria-valuenow="14" >
<span>11</span>
</a>
ARIA e HTML5
Implementao por leitores de tela:

Landmark roles so suportadas em

JAWS 10
NVDA 2010.1+
VoiceOver no iPhone IOS4.

ARIA e HTML5
ARIA e HTML5

ARIA 1.0:
Role: Button.
State: Pressed
http://webaim.org/projects/screenreadersurvey4/
Com que frequncia voc navega por landmarks no seu leitor de tela?
Resposta N de Respondentes % de Respondentes
Sempre que estiver presente 408 24.6%
Frequentemente 262 15.8%
De vez em quando 423 25.5%
Raramente 307 18.5%
Nunca 259 15.6%
Obrigado!
Reinaldo Ferraz
W3C Escritrio Brasil
www.w3c.br
Twitter: @w3cbrasil

reinaldo@nic.br
Twitter: @reinaldoferraz