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. 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
  2. 4.

    4

  3. 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
  4. 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
  5. 8.

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

    • Deficiência Motora; • Deficiência Auditiva; • Paralisia Cerebral; • Tetraplegia; 8
  6. 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
  7. 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
  8. 12.

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

    tipo de deficiência no mundo. Estimativa aproximada. Fonte: ONU. 12
  9. 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
  10. 17.
  11. 18.
  12. 19.
  13. 20.
  14. 21.
  15. 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
  16. 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
  17. 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
  18. 30.

    Prefeitura de Belo Horizonte Iremos avaliar o site da PBH,

    nos quesitos: • Performance; • Acessibilidade. 30
  19. 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
  20. 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
  21. 35.
  22. 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
  23. 37.
  24. 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
  25. 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
  26. 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
  27. 41.
  28. 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
  29. 43.
  30. 44.
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 54.
  38. 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
  39. 56.

    56

  40. 57.
  41. 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
  42. 59.
  43. 60.
  44. 62.
  45. 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
  46. 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
  47. 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
  48. 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
  49. 69.

    Obrigado! Bruno Pulis • @brunopulis • facebook.com/bpulis • speakerdeck.com/brunopulis •

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