Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define...
Transcript of Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define...
![Page 1: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/1.jpg)
Acessibilidade na web e HTML5Desenvolvendo uma web para todos
Frontin BH – 13 de agosto de 2011Reinaldo Ferraz – W3C.br
![Page 2: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/2.jpg)
Um pouco do W3C
É um consórcio internacional, criado em 1994 por Tim Berners-Lee com
• organizações filiadas, • uma equipe em tempo integral, • participação do público
para colaborativamente desenvolver padrões universais para a Web.
![Page 3: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/3.jpg)
O W3C no Brasil
O escritório brasileiro começou suas atividades em outubro de 2007.
É uma iniciativa do CGI.br, que é o responsável por coordenar e integrar as iniciativas de
serviços da Internet no País e do NIC.br, criado para implementar as decisões e os projetos do
Comitê Gestor da Internet no Brasil.
![Page 4: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/4.jpg)
Acessibilidade na web
Porque não desenvolvemos web sites acessíveis?
Algumas hipóteses:
![Page 5: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/5.jpg)
Acessibilidade na web
Desconhecimento
![Page 6: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/6.jpg)
Acessibilidade na web
Desconhecimento
![Page 7: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/7.jpg)
Acessibilidade na web
Preconceitohttp://www.youtube.com/watch?v=k4UOBCRUvGE
![Page 8: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/8.jpg)
Acessibilidade na web
Público alvo
![Page 9: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/9.jpg)
Acessibilidade na web
Porque desenvolver websites acessíveis?
![Page 10: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/10.jpg)
Já testou o seu site?
Acessível via teclado
Foto: Flickr.com - Baddog_
![Page 11: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/11.jpg)
Já testou o seu site?
João é tetraplégico
![Page 12: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/12.jpg)
Já testou o seu site?
Vídeos com legendas
![Page 13: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/13.jpg)
Já testou o seu site?
Michele é surda
![Page 14: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/14.jpg)
Já testou o seu site?
Sem CSSe imagens
Foto: Flickr.com - Baddog_
![Page 15: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/15.jpg)
Ou mesmo sem monitor
![Page 16: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/16.jpg)
Já testou o seu site?
Carlos é cego
![Page 17: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/17.jpg)
Acessibilidade na web
Beneficia pessoas com deficiência
![Page 18: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/18.jpg)
Acessibilidade na web
E outras pessoas também.
![Page 19: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/19.jpg)
Acessibilidade na web
Foto: Flickr.com - Jacob Bøtter
Número de pessoas com 60 anos ou mais
no mundo:
1950 – 205 milhões2000 – 606 milhões
Estimativa para 2050Quase 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 20: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/20.jpg)
Acessibilidade na web
55% Falta de habilidade com o
computador/internetFonte: Pesquisa TIC Domicílios 2010 – 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 21: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/21.jpg)
Acessibilidade na web
Fonte: Pesquisa TIC Domicílios 2010 – CGI.br
Fonte: http://www.cetic.br/
![Page 22: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/22.jpg)
Acessibilidade na web
Mão na massa!Acessibilidade na web e o
potencial do HTML5
![Page 23: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/23.jpg)
Acessibilidade na web
HTML4 – XHTML – HTML5
![Page 24: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/24.jpg)
Acessibilidade na web
HTML 5 [HyperText Markup Language]
1991 – html tag – Tim Berners Lee1994 – HTML 2 - já incluia tag <img>1997 – HTML 3.21999 – HTML 4.012000 – XHTML 1.02001 – XHTML 1.1 – CSS20... – Ian Hickson (Opera) propõe estender HTML:
Web Forms 2.0, Web Apps 1.02004 – Apple, Mozilla e Opera criam WHAT WG
(Web Hypertext Application Technology Working Group)
2007 – W3C retorna HTML Working Group2009 – W3C descontinua XHTML2010-2011 – Apple, Google, Microsoft, Mozilla e Opera
implementam HTML5
![Page 25: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/25.jpg)
Acessibilidade na web
Web Content Accessibility Guidelines (WCAG)
Versão 1.0 – 5 de maio de 1999www.w3.org/TR/WCAG10/
Versão 2.0 – 11 de dezembro de 2008www.w3.org/TR/WCAG/
![Page 26: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/26.jpg)
Acessibilidade na web
Recomendações que permanecem
TABELAS
![Page 27: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/27.jpg)
Acessibilidade na web
Não utilize tabelas para layout
Elas não foram feitas para isso.
![Page 28: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/28.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 29: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/29.jpg)
Acessibilidade na web
Tabelas foram feitas para apresentar dados tabulares
![Page 30: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/30.jpg)
<table border="1"> <caption>ContactInformation</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 31: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/31.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 32: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/32.jpg)
Acessibilidade na web
<table cellspacing="0" cellpadding="0" summary="As duas primeiras colunas da tabela são as variáveis de cruzamento (por exemplo, Regiões do país) e as subdivisões de cada bloco (por exemplo, sudeste, sul, etc.). As demais colunas são os números percentuais de cada indicador. Informações adicionais para melhor leitura dos dados estão no rodapé de cada tabela.">
<caption>A1 - PROPORÇÃO DE DOMICÍLIOS COM COMPUTADOR</caption>… </table>
![Page 33: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/33.jpg)
Acessibilidade na web
Atributo summary - Elemento details
<table> <caption> <strong>Characteristics with positive and negative sides.</strong> <details> <summary>Help</summary> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </details> </caption>
![Page 34: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/34.jpg)
Acessibilidade na web
Recomendações que permanecem
Formulários
![Page 35: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/35.jpg)
Acessibilidade na web
Utilizar o elemento label para associar rótulos de textos em controles de formulários.
![Page 36: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/36.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 37: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/37.jpg)
Acessibilidade na web
![Page 38: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/38.jpg)
Acessibilidade na web
Novidades nos formulários<form><label>Nome <input type="text" name="nome" placeholder="digite seu nome" required /></label><label>E-mail <input type=“email" name="email" placeholder="digite seu e-mail" required /></label>Website <input type="url" name="website" required /></label><label>Escolha a cor <input type="color" name="email" /></label><label>Data de destino <input type="datetime" name="email" /></label><input type="submit"></form>
![Page 39: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/39.jpg)
Acessibilidade na web
http://html5accessibility.com/
![Page 40: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/40.jpg)
Acessibilidade na web
Recomendações que permanecem
Textos alternativos
![Page 41: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/41.jpg)
Acessibilidade na web
<img src=“foto.jpg” alt=“Foto das teclas W, 3 e C fora do teclado”>
![Page 42: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/42.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 KintaganbanRiver, Borneo. Foto de Richard Clark</figcaption>
</figure>
![Page 43: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/43.jpg)
Acessibilidade na web
Recomendações que permanecem
Cabeçalhos
![Page 44: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/44.jpg)
Acessibilidade na web
<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 45: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/45.jpg)
Acessibilidade na web
<hgroup><h1>Seu livro Favorito</h1><h2>O senhor dos anéis - A sociedade do anel</h2></hgroup><p>Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro, Descrição do livro,</p>...
![Page 46: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/46.jpg)
ARIA e HTML5
ARIA e HTML5Ao infinito e além!
![Page 47: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/47.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 48: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/48.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>
![Page 49: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/49.jpg)
Os novos elementos
SemânticaOs novos elementos
![Page 50: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/50.jpg)
Os novos elementos
![Page 51: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/51.jpg)
Vídeo em HTML5
Video
http://www.w3.org/2009/02/ThisIsCoffee.html
![Page 52: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/52.jpg)
Vídeo em HTML5
Legendas em SVG
![Page 53: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/53.jpg)
Vídeo em HTML5
Vídeo Acesso Digitalhttp://acessodigital.net/video-html5/video-acessibilidade-br.html
![Page 54: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/54.jpg)
Vídeo em HTML5
<video id="index_video" width="480" height="360" preload="metadata" controlsposter="./videos/video-acessibilidade-web-pressione-a-tecla-space-para-tocar-e-pausar.jpg" tabindex="0" style="border:0">
<!-- video em MP4, WEBM e OGG --> <source src="./videos/acessibilidade-video-legendas.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="./videos/acessibilidade-video-legendas.webmvp8.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="./videos/acessibilidade-video-legendas.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- legendas em ingles, espanhol e portugues --> <track enabled="true" kind="subtitles" label="English" srclang="en" type="application/ttaf+xml" src="./subtitle/xml_ingles_tt.xml"></track> <track enabled="true" kind="subtitles" label="Español" srclang="es" type="application/ttaf+xml" src="./subtitle/xml_espanhol_tt.xml"></track> <track enabled="true" kind="subtitles" label="Português" srclang="pt" type="application/ttaf+xml" src="./subtitle/xml_portugues_tt.xml"></track>
![Page 55: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/55.jpg)
O que ficou de fora do HTML5?
E o que ficou de fora do HTML5?
![Page 56: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/56.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 57: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/57.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 58: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/58.jpg)
Acessibilidade na web
Quem gera o código mais acessível?
HTML4
XHTML
HTML5
ARIA
HTML5 + CSS3 + ARIA
XHTML + CSS2
![Page 59: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/59.jpg)
Acessibilidade na web
Você
![Page 60: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/60.jpg)
Acessibilidade na web
Fonte: Pesquisa TIC Domicílios 2010 – CGI.brPessoas que nunca acessaram a internet, mas usaram um computador.
Chamada de trabalhos:26 de agosto de 2011
data limite para submissão dos trabalhos para a conferência
![Page 61: Acessibilidade na web e HTML5 - W3C€¦ · WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com](https://reader035.fdocumentos.com/reader035/viewer/2022062506/5f76b471d804025edc34b09c/html5/thumbnails/61.jpg)
Obrigado!
Reinaldo FerrazW3C Escritório Brasil
www.w3c.brTwitter: @w3cbrasil
[email protected] Twitter: @reinaldoferraz