acessibilidade, html5 e wai-aria - tableless conf 2012
DESCRIPTION
Palestra sobre acessibilidade na web, html5 e WAI-ARIA na Tableless Conference de 2013TRANSCRIPT
![Page 1: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/1.jpg)
Acessibilidade, HTML5,
WAI/ARIA
Tableless Conference
São Paulo – 24 de agosto de 2012
Reinaldo Ferraz – W3C.br
@reinaldoferraz
![Page 2: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/2.jpg)
![Page 3: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/3.jpg)
Um pouco do W3C
![Page 4: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/4.jpg)
O W3C no Brasil
![Page 5: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/5.jpg)
http://premio.w3c.br/
![Page 6: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/6.jpg)
conferenciaweb.w3c.br
![Page 7: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/7.jpg)
Acessibilidade, para quem?
![Page 8: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/8.jpg)
Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k
![Page 9: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/9.jpg)
Surdos
Foto: everystockphoto.com - jessicafm
![Page 10: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/10.jpg)
Mobilidade reduzida
![Page 11: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/11.jpg)
Acessibilidade na web
Porque não
desenvolvemos
web sites
acessíveis?
Algumas hipóteses:
![Page 12: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/12.jpg)
Desconhecimento
![Page 13: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/13.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 14: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/14.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 15: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/15.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 16: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/16.jpg)
http://random.irb.hr/signup.php
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 17: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/17.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 18: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/18.jpg)
Acessibilidade na web
Preconceito
![Page 19: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/19.jpg)
![Page 20: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/20.jpg)
Público alvo
![Page 21: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/21.jpg)
Pequenos testes, grandes descobertas
![Page 22: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/22.jpg)
Acessível via teclado
Foto: Flickr.com - Baddog_
![Page 23: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/23.jpg)
Já testou o seu site?
João é
tetraplégico
![Page 24: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/24.jpg)
Vídeos com legendas
![Page 25: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/25.jpg)
Já testou o seu site?
Michele é
surda
![Page 26: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/26.jpg)
Já testou o seu site?
Sem CSS
e imagens
Foto: Flickr.com - Baddog_
![Page 27: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/27.jpg)
Ou mesmo sem monitor
![Page 28: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/28.jpg)
Já testou o seu site?
Carlos é cego
![Page 29: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/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, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/30.jpg)
Acessibilidade na web
35.791.488 Censo 2010
Pessoas com deficiência visual no Brasil
Fonte: http://www.ibge.gov.br/
![Page 31: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/31.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 32: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/32.jpg)
Acessibilidade na web
13.273.969 Censo 2010
Pessoas com deficiências motoras no Brasil
Fonte: http://www.ibge.gov.br/
![Page 33: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/33.jpg)
Acessibilidade na web
Beneficia pessoas com deficiência
![Page 34: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/34.jpg)
Acessibilidade na web: A quem se destina?
Acessibilidade é para todos !
![Page 35: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/35.jpg)
Usuários de Dispositivos Móveis
![Page 36: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/36.jpg)
Deficiência temporária
![Page 37: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/37.jpg)
Medo de usar o computador
Foto: everystockphoto.com - Violator3
![Page 38: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/38.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 39: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/39.jpg)
Início de aprendizado
Nosso primeiro contato
![Page 40: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/40.jpg)
Idade Avançada
Nós, daqui
alguns
anos
![Page 41: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/41.jpg)
![Page 42: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/42.jpg)
![Page 43: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/43.jpg)
![Page 44: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/44.jpg)
Acessibilidade na web
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 45: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/45.jpg)
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 Domicílios – CETIC.br
![Page 46: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/46.jpg)
Acessibilidade na web
Fonte: Pesquisa TIC Domicílios 2011 – CGI.br
Fonte: http://www.cetic.br/
A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO
Percentual sobre o total de domicílios com acesso à Internet
Percentual (%) Acesso
discado
TOTAL
Banda larga fixa
TOTAL BRASIL 10 68
![Page 47: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/47.jpg)
Acessibilidade na web
Fonte: Pesquisa TIC Domicílios 2011 – CGI.br
Fonte: http://www.cetic.br/
A6 - VELOCIDADE DA CONEXÃO À INTERNET UTILIZADA NO DOMICÍLIO
Percentual sobre o total de domicílios com acesso à Internet em que os
respondentes sabem o tipo de conexão que possuem
Percentual
(%)
Até
256
Kbps
256
Kbps
a 1
Mbps
1 Mbps
a 2
Mbps
2 Mbps
a 4
Mbps
4 Mbps
a 8
Mbps
Acima
de
8 Mbps
Não
sabe /
Não
respond
eu
TOTAL
BRASIL 5 29 16 6 5 9 30
![Page 48: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/48.jpg)
Acessibilidade na web
Acessibilidade na web e o
potencial do HTML5
![Page 49: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/49.jpg)
Acessibilidade na web
HTML4 – XHTML – HTML5
![Page 50: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/50.jpg)
Acessibilidade na web
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
![Page 51: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/51.jpg)
Acessibilidade na web
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
![Page 52: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/52.jpg)
Acessibilidade na web
Web Content Accessibility
Guidelines (WCAG)
Versão 1.0 – 5 de maio de 1999
Versão 2.0 – 11 de dezembro de 2008
www.w3.org/TR/WCAG/
![Page 53: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/53.jpg)
Acessibilidade na web
Recomendações que permanecem
TABELAS
![Page 54: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/54.jpg)
Acessibilidade na web
“As tabelas não devem ser utilizadas como auxiliares de layout.
Historicamente, alguns autores têm abusado das tabelas em HTML,
como forma de controlar o seu layout de página. Esse uso não é
recomendado, porque as ferramentas que tentam extrair os dados
tabulares de tais documentos obtém resultados confusos. Em
particular, os usuários de ferramentas de acessibilidade, como
leitores de tela podem achar muito difícil de navegar em páginas com
tabelas usadas para layout.”
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
![Page 55: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/55.jpg)
Acessibilidade na web
![Page 56: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/56.jpg)
Acessibilidade na web
Tabelas foram feitas para apresentar dados
tabulares
![Page 57: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/57.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 58: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/58.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.
Acessibilidade na web
![Page 59: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/59.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.
Acessibilidade na web
![Page 60: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/60.jpg)
Acessibilidade na web
Recomendações que permanecem
Formulários
![Page 61: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/61.jpg)
Acessibilidade na web
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>
![Page 62: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/62.jpg)
![Page 63: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/63.jpg)
Acessibilidade na web
http://html5accessibility.com/
![Page 64: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/64.jpg)
Acessibilidade na web
http://html5accessibility.com/
![Page 65: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/65.jpg)
Speech http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html
Futuro da Web - HTML5
<input type="text" x-webkit-speech />
![Page 66: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/66.jpg)
Acessibilidade na web
Recomendações que permanecem
Textos alternativos
![Page 67: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/67.jpg)
Acessibilidade na web
<img src=“foto.jpg” alt=“Foto das
teclas W, 3 e C fora do teclado”>
![Page 68: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/68.jpg)
Acessibilidade na web
<figure>
<img src="/macaco.jpg" alt=“Foto de um Macaco entre
as folhas de uma árvore">
<figcaption>Um macaco curioso, Lower Kintaganban
River, Borneo. Foto de Richard Clark</figcaption>
</figure>
![Page 69: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/69.jpg)
Os novos elementos
Semântica
Os novos elementos
![Page 70: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/70.jpg)
Vídeo em HTML5
Video
http://www.w3.org/2009/02/ThisIsCoffee.html
![Page 71: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/71.jpg)
Vídeo em HTML5
Legendas em SVG
![Page 72: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/72.jpg)
Vídeo em HTML5
Vídeo Digital Acesso http://acessodigital.net/video-html5/video-acessibilidade-br.html
![Page 73: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/73.jpg)
Vídeo em HTML5
![Page 74: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/74.jpg)
Vídeo em HTML5
![Page 75: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/75.jpg)
ARIA e HTML5
ARIA e HTML5
Ao infinito e além!
![Page 76: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/76.jpg)
ARIA e HTML5
WAI-ARIA (Accessible Rich Internet Applications)
define uma forma de tornar o conteúdo e
aplicativos web mais acessíveis a pessoas com
deficiências. Ele contribui especialmente com
conteúdo dinâmico e interface de controles de
usuário avançadas desenvolvidos com Ajax, HTML,
JavaScript e tecnologias relacionadas.
http://www.w3.org/WAI/intro/aria
![Page 77: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/77.jpg)
ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
alert
Alertdialog
button
checkbox
dialog
menu
menubar
menuitem
option
...
http://www.w3.org/TR/wai-aria/roles#role_definitions
![Page 78: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/78.jpg)
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
![Page 79: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/79.jpg)
ARIA e HTML5
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.
![Page 80: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/80.jpg)
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>
HTML + Scritps + CSS para manipulação
![Page 81: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/81.jpg)
Mas é muito complicado!
![Page 82: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/82.jpg)
Comece belo básico
![Page 83: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/83.jpg)
ARIA e HTML5
![Page 84: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/84.jpg)
ARIA e HTML5
![Page 85: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/85.jpg)
Enriqueça aplicações
![Page 86: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/86.jpg)
![Page 87: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/87.jpg)
http://test.cita.uiuc.edu/aria/
![Page 88: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/88.jpg)
http://webaim.org/projects/screenreadersurvey4/
Com que frequência 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%
![Page 89: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/89.jpg)
E o que ficou de fora do HTML5?
![Page 90: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/90.jpg)
O que ficou de fora do HTML5?
abbr, align, allowtransparency, archive,
background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color,
compact, frameborder, height, hspace,
link, marginbottom, marginheight,
marginleft, marginright, margintop,
marginwidth, noshade, nowrap, profile,
rev, rules, scheme, scrolling, size, standby,
target, text, urn, valign, valuetype,
version, vlink, vspace, width
![Page 91: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/91.jpg)
O que ficou de fora do HTML5?
abbr, align, allowtransparency, archive,
background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color,
compact, frameborder, height, hspace,
link, marginbottom, marginheight,
marginleft, marginright, margintop,
marginwidth, noshade, nowrap, profile,
rev, rules, scheme, scrolling, size, standby,
target, text, urn, valign, valuetype,
version, vlink, vspace, width
![Page 92: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/92.jpg)
Acessibilidade na web
Quem gera o código mais
acessível?
HTML4
XHTML
HTML5
ARIA
HTML5 + CSS3 + ARIA
XHTML + CSS2
![Page 93: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/93.jpg)
Você
![Page 94: Acessibilidade, HTML5 e WAI-ARIA - Tableless conf 2012](https://reader033.vdocuments.pub/reader033/viewer/2022042613/554bcb8db4c905ac708b4570/html5/thumbnails/94.jpg)
Obrigado!
Reinaldo Ferraz W3C Escritório Brasil
www.w3c.br Twitter: @w3cbrasil
Twitter: @reinaldoferraz