![Page 1: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/1.jpg)
Acessibilidade na web
Senac Santo André– 07 de Março de 2013
Senac Consolação– 11 de Março de 2013
Reinaldo Ferraz – W3C.br
@reinaldoferraz
@w3cbrasil
![Page 2: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/2.jpg)
![Page 3: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/3.jpg)
![Page 4: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/4.jpg)
Um pouco do W3C
![Page 5: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/5.jpg)
Um pouco do W3C
![Page 6: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/6.jpg)
O W3C no Brasil
![Page 7: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/7.jpg)
http://premio.w3c.br/
![Page 8: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/8.jpg)
Acessibilidade, para quem?
![Page 9: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/9.jpg)
Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k
![Page 10: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/10.jpg)
Surdos
Foto: everystockphoto.com - jessicafm
![Page 11: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/11.jpg)
Mobilidade reduzida
![Page 12: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/12.jpg)
Acessibilidade na web
Porque não
desenvolvemos
web sites
acessíveis?
Algumas hipóteses:
![Page 13: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/13.jpg)
Desconhecimento
![Page 14: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/14.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 15: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/15.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 16: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/16.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 17: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/17.jpg)
http://random.irb.hr/signup.php
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 18: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/18.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 19: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/19.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 20: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/20.jpg)
Acessibilidade na web
Preconceito
![Page 21: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/21.jpg)
![Page 22: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/22.jpg)
Já testou o seu site?
Vídeo
O mundo adaptado
![Page 23: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/23.jpg)
![Page 24: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/24.jpg)
Público alvo
![Page 25: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/25.jpg)
É muito caro!
O prazo é curto!
Dá muito trabalho!
Não sei fazer!
![Page 26: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/26.jpg)
Já testou o seu site?
Acessibilidade web
Custo ou benefício?
![Page 27: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/27.jpg)
![Page 28: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/28.jpg)
A Web conta histórias.
![Page 29: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/29.jpg)
Estatísticas
24%
45.623.910 pessoas Censo 2010
Fonte: IBGE
Pessoas com deficiência no Brasil
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
![Page 30: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/30.jpg)
Andy Walker
![Page 31: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/31.jpg)
Acessibilidade na web
13.273.969 Censo 2010
Pessoas com deficiências motoras no Brasil
Fonte: http://www.ibge.gov.br/
![Page 32: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/32.jpg)
Acessibilidade na web
Censo 2010
Pessoas com deficiências motoras
Fonte: http://www.ibge.gov.br/
Não consegue (se
movimentar) de
modo algum
Grande dificuldade Alguma dificuldade
740.456 3.701.790 8.831.723
![Page 33: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/33.jpg)
Tornar todo o conteúdo
operável via teclado
![Page 34: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/34.jpg)
Operável via teclado
![Page 35: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/35.jpg)
<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>
Operável via teclado
![Page 36: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/36.jpg)
Operável via teclado
![Page 37: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/37.jpg)
Operável via teclado
Um link “Pular para o conteúdo principal”
![Page 38: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/38.jpg)
Formulários
![Page 39: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/39.jpg)
Formulários
![Page 40: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/40.jpg)
Formulários
![Page 41: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/41.jpg)
Formulários
![Page 42: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/42.jpg)
Formulários
<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
![Page 43: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/43.jpg)
Formulários
<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>
![Page 44: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/44.jpg)
Leonardo Gleisson
![Page 45: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/45.jpg)
Acessibilidade na web
528.624 Censo 2010
Número de pessoas cegas no Brasil
Fonte: http://www.ibge.gov.br/
![Page 46: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/46.jpg)
Tecnologias assistivas
![Page 47: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/47.jpg)
Tecnologias assistivas
![Page 48: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/48.jpg)
Bloqueios de teclado
![Page 49: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/49.jpg)
Bloqueios de teclado
![Page 50: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/50.jpg)
Bloqueios de teclado
![Page 51: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/51.jpg)
Cabeçalhos
![Page 52: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/52.jpg)
Cabeçalhos
<H1>Título Principal</H1>
<H2>Subtítulo</H2>
<H3>Sub-Subtítulo</H3>
<H2>Subtítulo</H2>
<H3>Sub-Subtítulo</H3>
<H4>....</H4>
![Page 53: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/53.jpg)
Cabeçalhos
![Page 54: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/54.jpg)
Tabelas
![Page 55: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/55.jpg)
Tabelas
![Page 56: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/56.jpg)
A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO
DOMICÍLIO Percentual sobre o total de domicílios com acesso à
Internet 1 Percentual (%) Modem Tradicional (acesso discado linha
telefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga
Modem digital via linha telefônica (tecnologia DSL) Modem via cabo
Conexão via rádio Conexão via satélite 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 REGIÕES DO PAÍS 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
Tabelas
![Page 57: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/57.jpg)
<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>
Utilizar o atributo scope para
associar células de
cabeçalho e células de dados
em tabelas de dados.
Tabelas
![Page 58: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/58.jpg)
<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>
Utilizar os atributos ID e
headers para associar
células de dados com células
de cabeçalhos em tabelas de
dados.
Tabelas
![Page 59: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/59.jpg)
Textos alternativos
![Page 60: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/60.jpg)
<img />
Textos alternativos
![Page 61: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/61.jpg)
<img />
<img alt="Foto das teclas W, 3 e C
fora do teclado" />
Textos alternativos
![Page 62: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/62.jpg)
<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" />
Textos alternativos
![Page 63: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/63.jpg)
Imagens para layout
![Page 64: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/64.jpg)
CaPtcHa
![Page 65: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/65.jpg)
CaPtcHa
Exemplos
Ou
Que dia vem depois de sexta-feira?
Digite o código
![Page 66: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/66.jpg)
Formulários
![Page 67: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/67.jpg)
Formulários
![Page 68: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/68.jpg)
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>
Formulários
![Page 69: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/69.jpg)
Formulários
![Page 70: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/70.jpg)
Formulários
![Page 71: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/71.jpg)
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>
Formulários
![Page 72: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/72.jpg)
Utilizar o elemento o atributo “title” para identificar
controles de formulários quando o elemento “label” não
puder ser utilizado
Exemplo: Campos de texto para números 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>
Formulários
![Page 73: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/73.jpg)
Propósito do link
Título da notícia
Esse é um exemplo de chamada
de notícia, que tem um breve
resumo para que o usuário leia o
resto da notícia na outra página...
Saiba mais
Título da outra
notícia
Esse é um exemplo de chamada
de notícia, que tem um breve
resumo para que o usuário leia o
resto da notícia na outra página...
Saiba mais
Título da terceira notícia
Esse é um exemplo de chamada de notícia, que tem um breve resumo para que
o usuário leia o resto da notícia na outra página... Saiba mais
![Page 74: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/74.jpg)
<!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 français</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
</head>
<body>
...document écrit en français
</body>
</html>
Definir o idioma da página Usando atributos de idioma no elemento HTML
Idioma da página
![Page 75: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/75.jpg)
<!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 français</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
</head>
<body>
...document écrit en français <span lang=“en”>and
english</span>...
</body>
</html>
Definir o idioma da página Usando atributos de idioma no elemento HTML
Idioma da página
![Page 76: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/76.jpg)
Ivy Bean
![Page 77: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/77.jpg)
![Page 78: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/78.jpg)
Acessibilidade na web
35.791.488 Censo 2010
Pessoas com deficiência visual no Brasil
Fonte: http://www.ibge.gov.br/
![Page 79: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/79.jpg)
Acessibilidade na web
Censo 2010
Pessoas com deficiência visual no Brasil
Fonte: http://www.ibge.gov.br/
Não consegue
(enxergar) de
modo algum
Grande
dificuldade
Alguma
dificuldade
528.624 6.056.684 29.206.180
![Page 80: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/80.jpg)
Estatísticas
Foto: Flickr.com - Jacob Bøtter
Número de pessoas com
60 anos ou mais
no mundo:
1950 – 205 milhões
2000 – 606 milhões
Estimativa para 2050
Quase 2 bilhões de pessoas
com mais de 60 anos.
(+ de 20% da população)
Fonte: http://www.un.org/esa/population/publications/worldageing19502050/
![Page 81: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/81.jpg)
Medo de usar o computador
Foto: everystockphoto.com - Violator3
![Page 82: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/82.jpg)
Acessibilidade na web
57% Falta de habilidade com o
computador/internet Fonte: Pesquisa TIC Domicílios 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/
![Page 83: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/83.jpg)
Fontes pequenas
Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas
dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas
alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não
permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas
fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam
aumentadas.
![Page 84: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/84.jpg)
Fontes pequenas
Utilize CSS para definir tamanhos de fontes:
Use unidades relativas em vez de absolutas
Em vez de
Font-size: 10px;
Utilize
Font-size: 1em;
![Page 85: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/85.jpg)
Contraste
![Page 86: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/86.jpg)
Contraste
![Page 87: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/87.jpg)
Você consegue ler este texto.
Contraste
![Page 88: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/88.jpg)
Você consegue ler este texto?
Contraste
![Page 89: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/89.jpg)
Você não consegue ler este texto!
Contraste
![Page 90: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/90.jpg)
Neil Harbisson
http://www.youtube.com/watch?v=CvPOh0p9cf0
![Page 91: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/91.jpg)
Daltonismo
![Page 92: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/92.jpg)
Daltonismo
![Page 93: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/93.jpg)
Daltonismo
Uma menina com cabelos loiros, olhos
azuis vestida de rosa
![Page 94: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/94.jpg)
Daltonismo
Visão normal
![Page 95: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/95.jpg)
Daltonismo
Protanopia (Deficiências em vermelho)
![Page 96: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/96.jpg)
Daltonismo
Deuteranopia (Deficiências em verde)
![Page 97: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/97.jpg)
Daltonismo
Tritanopia (Deficiências em azul)
![Page 98: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/98.jpg)
Daltonismo
Acromatopsia (Deficiências todas as cores)
![Page 99: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/99.jpg)
Daltonismo
Nunca utilize somente cor para
transmitir uma informação na Web
![Page 100: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/100.jpg)
Daltonismo
![Page 101: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/101.jpg)
Formulários
![Page 102: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/102.jpg)
Acessibilidade é para todos !
![Page 103: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/103.jpg)
Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-
![Page 104: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/104.jpg)
Deficiência temporária
Foto: Flickr.com - Tuftronic10000
![Page 105: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/105.jpg)
Início de aprendizado
Nosso primeiro contato
![Page 106: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/106.jpg)
Idade Avançada
Nós, daqui
alguns
anos Foto: Flickr.com - Jacob Bøtter
![Page 107: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/107.jpg)
Site acessível é feio
Padrões Web
limitam o design
![Page 108: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/108.jpg)
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
![Page 109: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/109.jpg)
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
![Page 110: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/110.jpg)
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
![Page 111: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/111.jpg)
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
![Page 112: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/112.jpg)
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
![Page 113: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/113.jpg)
![Page 114: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/114.jpg)
Sua página não precisa ser feia para ser
acessível
![Page 115: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/115.jpg)
Aplicando acessibilidade
Web Content Accessibility
Guidelines (WCAG)
Versão 1.0 – 5 de maio de 1999
www.w3.org/TR/WCAG10/
Versão 2.0 – 11 de dezembro de 2008
www.w3.org/TR/WCAG/
![Page 116: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/116.jpg)
WCAG 2.0
1 - Perceptível
2 - Operável
3 - Compreensível
4 - Robusto
![Page 117: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/117.jpg)
WCAG 2.0 4 Princípios
Recomendações
(12 no total)
Critérios de
sucesso
Técnicas
suficientes e
aconselhadas
Como Cumprir os critérios de sucesso
Entendendo os critérios de sucesso
Entendendo as Recomendações
WCAG 2.0
![Page 118: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/118.jpg)
Princípios do W3C
Web para todos,
em qualquer
dispositivo, em
qualquer lugar,
segura e
confiável!
Foto: everystockphoto.com - woodleywonderworks
![Page 119: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/119.jpg)
A Web é feita por pessoas para pessoas
![Page 120: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/120.jpg)
Nós somos os
responsáveis
por uma web
acessível
![Page 121: Acessibilidade na web - W3C · Acessibilidade na web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz](https://reader035.vdocuments.com.br/reader035/viewer/2022071013/5fcbd14190a6330f4f663875/html5/thumbnails/121.jpg)
Obrigado!
Reinaldo Ferraz W3C Escritório Brasil
www.w3c.br Twitter: @w3cbrasil
Twitter: @reinaldoferraz