Acessibilidade na Prática

67 visualizações

Publicada em

Práticas recomendadas para acessibilidade na web

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
67
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Quem sou eu? Dados Básicos
  • Sobre a W3 – Incubadora Tecnológica para Startups e novos negócios
  • Como conheci a internet. Queria saber como fazer um site
    Fiz alguns sites pessoais
  • Primeiro site não-pessoal (.com.br)
  • Vi o simples HTML3 ser substituído por um HTML4 muito mais interativo. Anos depois testemunhei o HTML4 dando espaço para toda semântica do HTML5
  • Também acompanhei várias mudanças na forma de se programar. E todas estas mudanças levaram a mim, e a internet no todo à convergir para a ACESSIBILIDADE
  • 2013 – Primeiro projeto para um cliente em 2014 decidi me aprofundar e aplicar em um projeto maior e não destinado apenas para pessoas com deficiência E foi sem querer que acabei indo participar do....
  • Prêmio Sobre o prêmio e sobre como foi minha participação
  • Sobre o dia da premiação final e apresentação para os jurados
  • Resultado: 2ª colocação na categoria E-commerce Único site finalista que não era voltado para o público com deficiência
  • Quem quiser visitar
  • Como participar
  • O que é acessibilidade? Qual sua importância e principais barreiras?
  • 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!

    ×