Incluíndo a acessibilidade no desenvolvimento Web

590371c05fc56adf612fd91ea509cf74?s=47 Bruno Pulis
September 18, 2014

Incluíndo a acessibilidade no desenvolvimento Web

Palestra ministrada na UNA Barreiro, falando sobre a inclusão da acessibilidade no desenvolvimento web e sua importância para os usuários.

590371c05fc56adf612fd91ea509cf74?s=128

Bruno Pulis

September 18, 2014
Tweet

Transcript

  1. Desenvolvimento Acessível

  2. Quem sou 2

  3. Quem sou • Desenvolvedor Frontend desde 2010; • Tecnólogo em

    Sistemas para Internet pela Faculdade Pitágoras; • Especialista em acessibilidade; • Idealizador do projeto Acessibilidade Urbana; • Colaborador e integrante do Minas Dev; • Fundador do Frontend Beagá; • Administrador do Compass Brasil, Grunt Brasil. 3
  4. 4

  5. Minas Dev É uma comunidade de desenvolvedores que promovem o

    diálogo e troca de conhecimentos. Alguns projetos do Minas Dev: • Acessibilidade Urbana • Dev In Company • Dev In University • Minas Dev Beer 5
  6. O que é acessibilidade? Acessibilidade é o direito de usuários

    acessarem a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, disponibilidade de comunicação, acesso físico, equipamentos e programas adequados, conteúdo e apresentação da informação em formatos alternativos. “ 6
  7. Público Alvo

  8. Público Alvo • Você sem deficiência alguma; • Deficiência visual;

    • Deficiência Motora; • Deficiência Auditiva; • Paralisia Cerebral; • Tetraplegia; 8
  9. Público Alvo • Pessoas com baixa visão; • Idosos; •

    Crianças; • Alguém que sofreu algum acidente; • Deficiência Cognitiva (dislexia, deficit de atenção). 9
  10. Público Alvo Logo, concluímos que todos, em algum momento, precisarão

    de mais acessibilidade no seu dia a dia, enquanto alguns, necessitam dela todos os dias para realização de tarefas comuns. 10
  11. Porquê acessibilidade na Web?

  12. De acordo com pesquisa 1 bilhão de pessoas possuem algum

    tipo de deficiência no mundo. Estimativa aproximada. Fonte: ONU. 12
  13. 45.623.910 de pessoas ... com deficiência no Brasil. 24,9% da

    população. Fonte: Censo 2010. 13
  14. Leis de acessibilidade 14

  15. Leis de acessibilidade 1. Decreto 5.296 de 2 Dezembro de

    2004; Inclui pessoas com necessidades especiais nos meios urbanos, arquitetônicos e meios de comunicações; 2. Decreto 6.949 de Agosto de 2009. Visa a convenção sobre os direitos das pessoas com deficiência. 15
  16. Exemplos de acessibilidade urbana

  17. #FAIL 17

  18. #FAIL 18

  19. #FAIL 19

  20. #FAIL 20

  21. #FAIL 21

  22. #SUCCESS 22

  23. #SUCCESS 23

  24. #SUCCESS 24

  25. O que é WCAG?

  26. WCAG É uma recomendação de acessibilidade para conteúdo na Web

    que visa torná-los mais acessíveis. • A primeira versão do WCAG 1.0 foi lançada em 1998; • A segunda e atual 2008, onde o documento ficou de fácil compreensão para desenvolvedores e gestores. 26
  27. Príncipios da WCAG 2.0 • Príncipio 1: Perceptível A informação

    e os componentes da interface do usuário têm de ser apresentados de forma que os mesmos possam perceber. • Príncipio 2: Operável O usuário deve ser capaz de operar toda interface via teclado. 27
  28. Príncipios da WCAG 2.0 • Príncipio 3: Compreensível Toda informação

    e operação da interface deve ser compreensível. • Príncipio 4: Robusto O conteúdo deve ser robusto para ser entendido por navegadores e tecnologias assistivas. 28
  29. Estudo de Caso

  30. Prefeitura de Belo Horizonte Iremos avaliar o site da PBH,

    nos quesitos: • Performance; • Acessibilidade. 30
  31. Site PBH Performance Acessibilidade 1.2Mb de carregamento da home Nota

    3.1 em 10 90 request's Tabelas para layout 22 Page Speed Grade: D (65%) Imagens 77, 55 sem atributo alt YSlow Grade: C (73%) Erros de validação (X)HTML 624. http://goo.gl/ijBNIc Access Monitor - Ferramenta para testar acessibilidade 31
  32. You doing it wrong, dude! 32

  33. Dicas e Truques

  34. Definição do idioma <!DOCTYPE html> <html lang=" pt-br "> <head>

    <title>Definição de idioma correto</title> <meta charset="UTF-8"> </head> 01. 02. 03. 04. 05. 06. 34
  35. exemplo

  36. Definição do idioma <!DOCTYPE html> <html lang="pt-br"> <body> <p> Os

    <span lang=" en ">smarthpones</span> são telefones inteligentes! </p> </body> 01. 02. 03. 04. 05. 36
  37. exemplo

  38. Declaração de ALT em imagens Sempre devemos declarar um texto

    alternativo referente a imagem, descrever exatamente a imagem, exemplo: • A descrição deve ser concisa e ter sentido, afinal você está descrevendo algo pra quem não enxerga. :) 38
  39. Declaração de ALT em imagens • Imagem meramente decorativas no

    layout recomenda-se colocá-las via background através do CSS. • Imagem que, caso não possam sair do layout o uso do ALT em vazio é recomendado. 39
  40. Declaração de alt <!DOCTYPE html> <html lang="pt-br"> <body> <img src="images/1234.jpg"

    alt="Casal abraçado na praia de Cabo Frio" /> </body> 01. 02. 03. 04. 05. 40
  41. exemplo

  42. Sem declaração de alt <!DOCTYPE html> <html lang="pt-br"> <body> <img

    src="images/1234.jpg" /> </body> 01. 02. 03. 04. 05. 42
  43. exemplo

  44. None
  45. Links Evite ao máximo utilizar as seguintes expressões: • Saiba

    mais • Clique aqui • Leia mais 45
  46. Links Estas expressões não auxiliam um deficiente visual só dificultam

    o acesso. O ideal é colocar o link no contexto da frase. Utilize o outline para destacar os links, desta forma visualmente o usuário sabe onde ele está. 46
  47. Uso correto de links <!DOCTYPE html> <html lang="pt-br"> <body> <p>

    Compre o <a href="http://goo.gl/Ub2wI6"> iPhone 5s </a> com um desconto de 20% </p> </body> 01. 02. 03. 04. 05. 47
  48. Uso incorreto de links <!DOCTYPE html> <html lang="pt-br"> <body> <p>

    Compre um iPhone 5s <a href="http://goo.gl/Ub2wI6"> clicando aqui </a> com um desconto de 20% </p> </body> 01. 02. 03. 04. 05. 48
  49. Dados estatísticos

  50. Dezembro 2013 Dezembro 2013 Valor "Saiba mais" aproximadamente 7.450.000 "Clique

    aqui" aproximadamente 46.600.000 "Leia mais" aproximadamente 18.600.000 50
  51. Setembro 2014 Setembro 2014 Valor "Saiba mais" aproximadamente 54.800.000 "Clique

    aqui" aproximadamente 95.600.000 "Leia mais" aproximadamente 26.200.000 51
  52. Concluímos que...

  53. Setembro 2014 Essas expressões na internet aumentaram consideravelmente. Comparativo de

    crescimento Valor "Saiba mais" aproximadamente 47.350.000 "Clique aqui" aproximadamente 49.000.000 "Leia mais" aproximadamente 7.600 53
  54. Tabelas

  55. Tabelas Não utilize para construir layout's, foi criada para ser

    utilizada em dados tabulares Utilize de outras tags especifícas para elaboração do layout. 55
  56. 56

  57. Forms

  58. Formulários Construa formulários com label's apontando para o determinado input.

    Use as estruturas de fieldset para agrupar seções do formulário e legend para nomear cada seção. 58
  59. sem label

  60. com label

  61. fieldset e legend

  62. CAPTCHA

  63. CAPTCHA Não utilize Captcha, já foi comprovado que ele não

    é seguro! http://www.karlgroves.com/2013/02/09/list-of- resources-breaking-captcha/ Uma alternativa para promover segurança é utilizar de perguntas lógicas, qual a cor de determinado objeto e etc. 63
  64. CAPTCHA 64

  65. Web Semântica

  66. Web Semântica Abuse e use das novas tags do HTML5

    elas irão enriquerecer seu código. Procure fazer um código funcional e limpo que todos possam entender. Acessibilidade é uma etapa importante de um todo, porém quase todos esquecem, é sua amiga. 66
  67. Citações Se o lugar não está pronto para receber todas

    as pessoas, então o lugar é deficiente. Thaís Frota As experiências que nós projetamos serão as que usaremos daqui há 20 anos, você pode ser vitíma do seu próprio veneno. Bruno Pulis “ “ 67
  68. Referências • Definição de acessibilidade; • Decreto de lei 5296;

    • Decreto de lei 6949; • http://giphy.com/ • Acessibilidade na prática • Palestra sobre HTML5 + WAI-ARIA 68
  69. Obrigado! Bruno Pulis • @brunopulis • facebook.com/bpulis • speakerdeck.com/brunopulis •

    brunopulis.com • github.com/brunopulis/talks/una-barreiro 69