Guia de desenvolvimento
de aplicações acessíveis
Felipe de Albuquerque: fa@cesar.org.br
Edson Samuel Jr: esgsj@cesar.org.br
O Guia
Acessibilidade é
Criar ou tornar algo acessível ao maior
número de usuários possível,
principalmente, às pessoas com
neces...
Leitores de Tela
Text-to-Speech
Braille
Leis e decretos
● Decreto nº 5.296 de 02 de dezembro de 2004 (link externo)
● Decreto nº 6.949, de 25 de agosto de 2009 (l...
Escreva códigos de forma clara, que faça sentido
para pessoas e para computadores
Separar
• Conteúdo
• Apresentação
• Interatividade
</Guidelines>
http://www.w3.org/TR/WCAG20/
Princípios
Guideline
s
Perceptível Operável Compreensível Robusto
Alternativas em
texto
Mídias baseadas
em tempo
Conteúdo
...
O governo brasileiro, seguindo o exemplo de outros países,
desenvolveu suas próprias diretrizes, reunidas no documento
cha...
Outros guidelines de acessibilidade
• UAAG (User Agent Accessibility Guidelines):
Descreve comofazer os browsers e media p...
Testes e validadores
Markup Validation
http://validator.w3.org/
Cynthia Says
http://www.cynthiasays.com/
Hera
http://www.sidar.org/hera/
Dasilv...
Diretrizes e técnicas de
implementação
É um dos fatores mais importantes para o desenvolvimento de uma web acessível
Código HTML5 Semântico
Código Ruim
<div class="topo-pagina">
Título da página
</div>
<div class="texto-paragrafo">
Texto "...
Definir o idioma padrão da página
<html lang="pt-br">
ou em um trecho específico
<p lang="en">Simple text</p>
DocType HTML...
Não esqueça da Tag Title!!
<title>Escreva algo que faça
sentido e no contexto certo!
Não me menospreze<title>
Títulos e subtítulos
Usar as TAGs de título para os textos que são títulos (cabeçalhos), e respeitar a hierarquia deles
<h...
</Navegação>
Usar a Tag nav e listas
Escreva menus com as tags certas
<nav>
<ul>
<li><a href=”#”>home</a></li>
<li><a href=”#”>About</a...
Colocar descrição nos links
Escreva os textos de forma que façam sentido, o conduza!
<a href=”#” title="Ir para a página h...
Navegação por Tab
Usuários que não podem ou não querem usar o mouse, podem usar o teclado pra percorrer os links,
<p><a hr...
TECLAS DE ATALHO (ACCESSKEYS)
<!-- ex: Se você apertar Shift + alt + “tecla” vai para a página -->
<a href="contato.html" ...
</Imagens>
Imagens
<img src="na_sala.jpg" alt="mãe e filho brincado na sala com bloquinhos de letras” />
Imagens
<img src="na_sala.jpg" longdesc=”http://example.com/descs#item3” />
</Intervenções acessíveis>
Menu de acessibilidade
http://turismoacessivel.gov.br/ta/
Ir ao conteúdo
<a href="#content" title="pular para o conteúdo">ir direto ao conteúdo</a>
Leva para uma página específica
visite o site para observar!
http://www.saudeacessivel.com.br/
Contraste
</Tabelas>
Tabelas acessíveis
<table>
<tr>
<td>Nome</td>
<td>Posição</td>
</tr>
<tr>
<td> Fábio </td>
<td> 12 </td>
</tr>
</table>
<t...
Tabelas acessíveis
<table>
<caption>Os melhores do ano</caption>
<thead>
<tr>
<th>Nome</th>
<th>Posição</th>
</tr>
</thead...
Tabelas acessíveis
<table summary="Os melhores do ano">
<th abbr="ameixa">Ameixa preta</th>
<th abbr="pera">Pera d'água</t...
W3C HTML5 tabular data
http://www.w3.org/TR/html5/tabular-data.html
W3C Tables Recommendation
http://www.w3.org/TR/html401...
</Formulários>
Formulários
<form action=”/action” method="post" id=”formulario”>
<label for="nome">Nome:</label>
<input type="text" name=...
Formulários com captchaNÃOOOOooooo!!
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Guia de desenvolvimento de aplicações acessíveis
Próximos SlideShares
Carregando em…5
×

Guia de desenvolvimento de aplicações acessíveis

737 visualizações

Publicada em

Esta apresentação é uma palestra que preparamos para um mini workshop sobre acessibilidade para o grupo de Front-End do CESAR.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
737
No SlideShare
0
A partir de incorporações
0
Número de incorporações
335
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Guia de desenvolvimento de aplicações acessíveis

  1. 1. Guia de desenvolvimento de aplicações acessíveis Felipe de Albuquerque: fa@cesar.org.br Edson Samuel Jr: esgsj@cesar.org.br
  2. 2. O Guia
  3. 3. Acessibilidade é Criar ou tornar algo acessível ao maior número de usuários possível, principalmente, às pessoas com necessidades especiais.
  4. 4. Leitores de Tela
  5. 5. Text-to-Speech
  6. 6. Braille
  7. 7. Leis e decretos ● Decreto nº 5.296 de 02 de dezembro de 2004 (link externo) ● Decreto nº 6.949, de 25 de agosto de 2009 (link externo) - Promulga a Convenção Internacional sobre os Direitos das Pessoas com Deficiência e seu Protocolo Facultativo, assinados em Nova York, em 30 de março de 2007 ● Decreto nº 7.724, de 16 de Maio de 2012 (link externo) - Regulamenta a Lei No 12.527, que dispõe sobre o acesso a informações ● Modelo de Acessibilidade de Governo Eletrônico (link externo) ● Portaria nº 03, de 07 de Maio de 2007 (link externo) - formato .pdf (35,5Kb) - Institucionaliza o Modelo de Acessibilidade em Governo Eletrônico – e-MAG
  8. 8. Escreva códigos de forma clara, que faça sentido para pessoas e para computadores
  9. 9. Separar • Conteúdo • Apresentação • Interatividade
  10. 10. </Guidelines>
  11. 11. http://www.w3.org/TR/WCAG20/
  12. 12. Princípios Guideline s Perceptível Operável Compreensível Robusto Alternativas em texto Mídias baseadas em tempo Conteúdo adaptável a layout Informação discernível Acessível por teclado Tempo para utilização Evitar conteúdo que possa causar convulsões Navegabilidade Legibilidade Previsibilidade Assistência à entrada de dados Compatível com diversos agentes de usuário Guidelines
  13. 13. O governo brasileiro, seguindo o exemplo de outros países, desenvolveu suas próprias diretrizes, reunidas no documento chamado de eMAG http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
  14. 14. Outros guidelines de acessibilidade • UAAG (User Agent Accessibility Guidelines): Descreve comofazer os browsers e media players acessíveis http://www.w3.org/TR/UAAG20/ • ATAG (Authoring Tool Accessibility Guidelines): Descreve como fazer software que produz conteúdo) http://www.w3.org/WAI/intro/atag.php
  15. 15. Testes e validadores
  16. 16. Markup Validation http://validator.w3.org/ Cynthia Says http://www.cynthiasays.com/ Hera http://www.sidar.org/hera/ Dasilva http://www.dasilva.org.br/
  17. 17. Diretrizes e técnicas de implementação
  18. 18. É um dos fatores mais importantes para o desenvolvimento de uma web acessível
  19. 19. Código HTML5 Semântico Código Ruim <div class="topo-pagina"> Título da página </div> <div class="texto-paragrafo"> Texto "conteúdo da página" </div> <a class="menu-item" href="#"> Menu item 1 </a> <a class="menu-item" href="#"> Menu item 2 </a> ... <header> <h1>Título da página</h1> </header> <section> <article> <p>Conteúdo da página </p> </article> </section> <nav> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> </ul> </nav> Código Melhor
  20. 20. Definir o idioma padrão da página <html lang="pt-br"> ou em um trecho específico <p lang="en">Simple text</p> DocType HTML5 <!DOCTYPE HTML>
  21. 21. Não esqueça da Tag Title!! <title>Escreva algo que faça sentido e no contexto certo! Não me menospreze<title>
  22. 22. Títulos e subtítulos Usar as TAGs de título para os textos que são títulos (cabeçalhos), e respeitar a hierarquia deles <h1> Título da página </h1> <h2> Subtítulo = Seja bem vindo ao nosso site</h2> <h3> ...</h3>
  23. 23. </Navegação>
  24. 24. Usar a Tag nav e listas Escreva menus com as tags certas <nav> <ul> <li><a href=”#”>home</a></li> <li><a href=”#”>About</a></li> </ul> </nav>
  25. 25. Colocar descrição nos links Escreva os textos de forma que façam sentido, o conduza! <a href=”#” title="Ir para a página home">home</a>
  26. 26. Navegação por Tab Usuários que não podem ou não querem usar o mouse, podem usar o teclado pra percorrer os links, <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> <nav> <ul> <li> <a href=”#” tabindex="3">Link 1</a> </li> <li> <a href=”#” tabindex="1">Link 2</a> </li> <li> <a href=”#” tabindex="2">Link 3</a> </li> </ul> </nav>
  27. 27. TECLAS DE ATALHO (ACCESSKEYS) <!-- ex: Se você apertar Shift + alt + “tecla” vai para a página --> <a href="contato.html" accesskey="a">Contato</a>
  28. 28. </Imagens>
  29. 29. Imagens <img src="na_sala.jpg" alt="mãe e filho brincado na sala com bloquinhos de letras” />
  30. 30. Imagens <img src="na_sala.jpg" longdesc=”http://example.com/descs#item3” />
  31. 31. </Intervenções acessíveis>
  32. 32. Menu de acessibilidade http://turismoacessivel.gov.br/ta/
  33. 33. Ir ao conteúdo <a href="#content" title="pular para o conteúdo">ir direto ao conteúdo</a>
  34. 34. Leva para uma página específica visite o site para observar! http://www.saudeacessivel.com.br/
  35. 35. Contraste
  36. 36. </Tabelas>
  37. 37. Tabelas acessíveis <table> <tr> <td>Nome</td> <td>Posição</td> </tr> <tr> <td> Fábio </td> <td> 12 </td> </tr> </table> <table> <tr> <th>Nome</th> <th>Posição</th> </tr> <tr> <td> Fábio </td> <td> 12 </td> </tr> </table>
  38. 38. Tabelas acessíveis <table> <caption>Os melhores do ano</caption> <thead> <tr> <th>Nome</th> <th>Posição</th> </tr> </thead> <tbody> <tr> <td> Fábio </td> <td> 12 </td> </tr> </tbody> </table> <table> <caption>Os melhores do ano</caption> <thead> <tr> <th>Nome</th> <th>Posição</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td> Fábio </td> <td> 12 </td> </tr> </tbody> </table> TFOOT deve estar antes de TBODY em uma definição de TABLE para que os user agents possam renderizar o rodapé de tabela antes de receber todas as possíveis linhas (numerosas) de dados
  39. 39. Tabelas acessíveis <table summary="Os melhores do ano"> <th abbr="ameixa">Ameixa preta</th> <th abbr="pera">Pera d'água</th>
  40. 40. W3C HTML5 tabular data http://www.w3.org/TR/html5/tabular-data.html W3C Tables Recommendation http://www.w3.org/TR/html401/struct/tables.html
  41. 41. </Formulários>
  42. 42. Formulários <form action=”/action” method="post" id=”formulario”> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome" /> <fieldset> <legend>Quais suas cores preferidas?</legend> <input type="checkbox" name="chk0" id="chk0_0" value="vermelho" /> <label for="chk0_0">Vermelho</label> <input type="checkbox" name="chk2" id="chk2_2" value="azul" /> <label for="chk2_2">Azul</label> </fieldset> </form>
  43. 43. Formulários com captchaNÃOOOOooooo!!

×