Guia de desenvolvimento de aplicações acessíveis

744 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
744
No SlideShare
0
A partir de incorporações
0
Número de incorporações
335
Ações
Compartilhamentos
0
Downloads
5
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!!

×