O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Acessibilidade na Prática

145 visualizações

Publicada em

Práticas recomendadas para acessibilidade na web

Publicada em: Tecnologia
  • Seja a primeira pessoa a gostar disto

Acessibilidade na Prática

  1. 1. ACESSIBILIDADE WEB
  2. 2. TIAGO RAFAEL L. NEVES about.me/rafaneves tiago@w3c.ae #quemsoueu FATEC JAHU – Informática c/ Gestão Prod. Ind. UNINTER – MBA em Adm. e Marketing
  3. 3. www.w3corp.com.br #quemsoueu
  4. 4. 1996 #comochegueiaqui * Imagem: Google Imagens
  5. 5. 1999 </> #comochegueiaqui * Aparência do site em 2002
  6. 6. HTML3 HTML4.01 HTML5 <1999/> <2011/> #comochegueiaqui
  7. 7. Uso do CSS Fim das TABELAS TABLELESS Importância da SEMÂNTICA #comochegueiaqui
  8. 8. ACESSIBILIDADE #comochegueiaqui
  9. 9. 2013 PRIMEIRO PROJETO 2014 ESTUDOS E MAIS ESTUDOS... </> #comochegueiaqui
  10. 10. 2014 Premiação realizada pelo W3C Brasil, em parceria com o NIC.br, CGI.br, AACD e Ministério do Planejamento e Secretaria dos Direitos da Pessoa com Deficiência - São Paulo. Visa estimular e fomentar o desenvolvimento de sites e sistemas acessíveis.
  11. 11. www.casajau.com.br
  12. 12. 4ª EDIÇÃO Inscrições até 11/05/2016 Prêmio até R$5.000,00 http://premio.w3c.br
  13. 13. ACESSIBILIDADE?
  14. 14. “ O poder da WEB está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial.” Sir Tim Berners-Lee Inventor da WWW * Fonte Wikipedia - 2014
  15. 15. Acessibilidade é para quem ?
  16. 16. TODOS (Mesmo que seja por um curto espaço de tempo)
  17. 17. QUESTÕES VISUAIS Cegueira total ou grave Problemas visuais parciais Cegueira temporária Daltonismo
  18. 18. QUESTÕES AUDITIVAS Surdez total Surdez parcial Dispositivos sem som
  19. 19. QUESTÕES MOTORAS Mobilidade reduzida temporariamente Navegação por teclado Navegação por apontador Tetraplegia Problemas na coordenação fina Tremores
  20. 20. PRINCIPAIS BARREIRAS * Falta de documentação em português * Documentação muito técnica, não amigável * Pouca divulgação sobre acessibilidade * Pequena demanda por parte dos clientes * Baixo conhecimento dos desenvolvedores
  21. 21. MAIORES BENEFÍCIOS * Responsabilidade Moral * Recompensa Financeira * 24% dos brasileiros tem alguma deficiência** * Diferenciação no mercado WEB #devs ** Fonte: IBGE 2010 * É LEI! (Artigo 63 do Estatuto da Pessoa com Deficiência)
  22. 22. </>
  23. 23. DOCUMENTAÇÃO eMAG http://emag.governoeletronico.gov.br/ WCAG 2.0 https://www.w3.org/Translations/WCAG20-pt-PT/ WAI-ARIA https://www.w3.org/WAI/ Cartilha Acessibilidade WEB http://goo.gl/YZnoVm
  24. 24. #1 SEMÂNTICA
  25. 25. DIV - topo DIV - menu DIV - corpo DIV - rodape ERRADO
  26. 26. HEADER ASIDE ARTICLE FOOTER
  27. 27. <H1> HIERARQUIA DE TÍTULOS <H2> <H3> <H4> <H5> <H6>
  28. 28. <ul> EXEMPLO DE MENU <li><a href=“#” title=“”>MENU</a></li> <li><a href=“#” title=“”>MENU</a></li> <li><a href=“#” title=“”>MENU</a></li> </ul>
  29. 29. #2 SEGUIR PADRÕES
  30. 30. www.totalvalidator.com https://validator.w3.org
  31. 31. #3 LINGUAGEM
  32. 32. <html lang=“pt-br”> Linguagem no formato ISO 639-1 <p lang=“en-us”>Hardware</p>
  33. 33. #4 LINKS E TÍTULOS
  34. 34. <a href=‘#’ title=“ABC”> No HTML5 o atributo TITLE pode ser aplicado em qualquer elemento <attr title=“World Wide Web”>WWW</attr>
  35. 35. #5 IMAGENS
  36. 36. <img src=“foto.jpg” alt=“” />PÉSSIMO
  37. 37. <img src=“foto.jpg” alt=“Paisagem” />RUIM
  38. 38. <img src=“foto.jpg” alt=“Elefantes paisagem” />REGULAR
  39. 39. <img src=“foto.jpg” alt=“Dois elefantes caminhando em uma paisagem árida com pôr-do-sol ao fundo” />
  40. 40. DICA Para imagens apenas estéticas, deixe o atributo ALT em branco e use o aria-hidden
  41. 41. #7 NAVEGAÇÃO
  42. 42. Mostrar qual é o link ativo para navegação pelo teclado IDENTIFICAR LINK ATIVO a:focus { outline: thin solid #00F; }
  43. 43. O primeiro item do site deve ser um link para o conteúdo principal da página em questão. CONTEÚDO PRINCIPAL
  44. 44. #8 CONTRASTE
  45. 45. Manter uma relação adequada de contraste entre a fonte e o fundo. CONTRASTE MÍNIMO Use o software Colour Contrast Analyser https://www.paciellogroup.com/resources/contrastanalyser/
  46. 46. #9 FORMS
  47. 47. <label for=“nome”> Nome completo </ul> <input type=“text” id=“nome” title=“” />
  48. 48. search email url tel number range date month week time datetime datetime-local color <input type=“
  49. 49. #10 WAI-ARIA
  50. 50. <ul role=“navigation”> <li role=“menubar”> <a href=“#” title=“” role=“menuitem”> MENU </a> </li> </ul>
  51. 51. role=“banner” Pode ter apenas 1 por página. Define a área com informações sobre o site / empresa
  52. 52. role=“main” Pode ter apenas 1 por página. Define a área com as informações principais (conteúdo) da página.
  53. 53. role=“search” Pode ter vários por página. Define a área com uma ferramenta de pesquisa do site
  54. 54. aria-expanded=“true|false” Define o estado de um elemento do “expansível”, como uma tabela ou menu tipo “acordeon”
  55. 55. aria-describeby=“elemento” Define um elemento que tem a descrição para um outro elemento... <button aria-describeby=“descreve”...> ... <div id=“descreve”> Descrição do item</div>
  56. 56. aria-haspopup=“true|false” Define se um elemento tem Sub-itens no esquema popup (como um menu)
  57. 57. Como faço para testar ?
  58. 58. http://wave.webaim.org/ http://www.sidar.org/hera/ http://www.dasilva.org.br/ http://www.cynthiasays.com/ http://www.acessibilidade.net/web/avalweb.php TESTES AUTOMATIZADOS
  59. 59. http://intervox.nce.ufrj.br/dosvox/ http://www.freedomscientific.com/Products/Blindness/JAWS http://www.nvaccess.org/ LEITORES DE TELA
  60. 60. TIAGO RAFAEL L. NEVES about.me/rafaneves tiago@w3c.ae slideshare.net/labombajau OBRIGADO!

×