Acessibilidade digital

Acessibilidade digital

Aula de acessibilidade digital ministrada no curso de design da UFRGS - estágio docência - dia 30/05/2017

Transcript

  1. None
  2. Pessoa com deficiência

  3. None
  4. Deficiência Física • Caracterizada pela alteração completa ou parcial de

    um ou mais segmentos do corpo humano, acarretando o comprometimento da função física; • amputação ou ausência de membro, paralisia cerebral, membros com deformidade congênita ou adquirida.
  5. Caracteriza pela perda parcial ou total das possibilidades auditivas sonoras,

    variando em graus e níveis. Deficiência auditiva
  6. Diminuição da resposta visual que pode ser leve, moderada, severa

    ou profunda, o que caracteriza o grupo de pessoas com visão subnormal ou baixa visão. Essa deficiência pode ainda, ser caracterizada pela ausência total da resposta visual, ou seja, pela cegueira. Deficiência visual
  7. Caracterizadas por um funcionamento intelectual significativamente inferior à média, com

    manifestação antes dos dezoito anos e limitações associadas a duas ou mais áreas de habilidades adaptativas. Deficiência mental
  8. Pessoas afetadas em duas ou mais áreas, caracterizando uma associação

    entre diferentes deficiências, com possibilidades bastante amplas de combinações. Deficiência múltipla
  9. None
  10. Video acessibilidade digital: custo ou benefício?

  11. None
  12. None
  13. Como as pessoas navegam pelo leitor de tela?

  14. Como as pessoas navegam pelo leitor de tela?

  15. Como as pessoas navegam pelo leitor de tela?

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. Agora pare e pense um pouco: Você acha que os

    recursos de acessibilidade ajudam apenas as pessoas com deficiência?
  23. Idade Avançada Foto: Flickr.com - Jacob Bøtter Nós, daqui ha

    alguns anos
  24. None
  25. Acessibilidade na web: A quem se destina? Usuários de Dispositivos

    Móveis Foto: everystockphoto.com -bartimaeus-
  26. Deficiência temporária Foto: Flickr.com - Tuftronic10000

  27. Pessoas com dificuldade de usar o computador

  28. “Falta de habilidade” é o motivo de 74% das pessoas

    não usar a Internet no desktop... e 52% que não usam no celular. Pesquisa TicDomicílios 2015 - https://www.cgi.br/publicacao/pesquisa-sobre-o-uso-das-tecnologias-de- informacao-e-comunicacao-nos-domicilios-brasileiros-tic-domicilios-2015/
  29. None
  30. None
  31. Acessibilidade 7 mitos e 1 equívoco por Leda Spelta

  32. Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta

    Mito 1 "Acessibilidade Web é só para deficientes visuais." Temor oculto: "Imagina o trabalhão que vai dar, fazer acessibilidade para todo mundo!"
  33. Mito 2 "Na prática, o número de usuários beneficiados com

    a acessibilidade é relativamente muito pequeno." Temor oculto: "Esse negócio de acessibilidade é muito investimento para pouco retorno." Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  34. Mito 3 "Fazer um site acessível demora e custa caro."

    Temor oculto: “Não estarei empregando mal os recursos que tenho, ao fazer acessibilidade? Não vou ficar no prejuízo?” Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  35. Mito 4 "É melhor fazer uma página especial para os

    deficientes visuais." Temor oculto: "A gente não vai conseguir fazer uma página acessível, que seja tão bonita e funcional como a nossa." Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  36. Mito 5 "Um site acessível a deficientes visuais não é

    bonito." Temor oculto: "Só sei fazer sites bonitos usando tecnologias inacessíveis; de fato, não sei exatamente quais são os elementos visuais que atrapalham a acessibilidade. Por isso, quando tenho que fazer um site acessível, faço sempre o arroz com feijão." Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  37. Mito 6 “Vamos por partes: primeiro fazemos o site, depois

    fazemos acessibilidade." Temor oculto: "Não vamos conseguir fazer um site acessível, com o tempo, os recursos e a equipe que temos." Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  38. None
  39. Mito 7 "A gente sabe o que é bom para

    o usuário." Temor oculto: "Não quero expor meu projeto às críticas." Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  40. Equívoco "Meu site é direcionado a um público específico; ele

    não interessa a todos os grupos de usuários." Quando restringimos o acesso do nosso site ao que julgamos serem as características do seu público alvo, estamos, na prática, usando a internet para limitar o nosso público, ao invés de ampliá-lo. Acessibilidade – 7 mitos e 1 equívoco por Leda Spelta
  41. None
  42. Então, como faz?

  43. None
  44. WCAG • Padrão internacional • Tradução do Documento base do

    WCAG http://traducoes.w3c.br/TR/WCAG/ • Grupo de especialista de acessibilidade do W3C Brasil http://www.ceweb.br/ • Cartilhas de acessibilidade http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-w eb-fasciculo-I.html http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-w eb-fasciculo-II.html
  45. eMAG • Padrão do governo Brasileiro https://www.governoeletronico.gov.br/eixos-de-atuacao/governo/acessibilida de • Documento

    base: http://emag.governoeletronico.gov.br/ • Cursos desenvolvedor e conteudista http://emag.governoeletronico.gov.br/cursodesenvolvedor/ http://emag.governoeletronico.gov.br/cursoconteudista/index.html
  46. None
  47. O básico: 1.Criar uma hierarquia adequada com cabeçalhos 2. Relacionar

    <label> com o <input> 3.Usar elementos semânticos do HTML5 4. Declarar o atributo LANG no HTML
  48. None
  49. <a href=“#content”>Saltar conteúdo</a> .... <section id=“content”>

  50. None
  51. None
  52. <html lang=“pt-br”> ... Esse texto está em português <a href=“english/”

    lang=“en”> and in english also </a>
  53. None
  54. None
  55. Vídeos com legendas

  56. Libras e audiodescrição

  57. None
  58. None
  59. 73 ROLES (Ou Papéis) • progressbar • radiogroup • scrollbar

    • slider • spinbutton • status • Tab • tabpanel • textbox • tooltip • alert • alertdialog • button • checkbox • dialog • menu • menubar • menuitem • option • ...
  60. 35 States and Properties (Estados e Propriedades) • aria-activedescendant •

    aria-atomic • aria-autocomplete • aria-busy (state) • aria-checked (state) • aria-controls • aria-describedby • aria-disabled (state) • aria-dropeffect • aria-expanded (state) • aria-flowto • aria-grabbed (state) • aria-haspopup • aria-hidden (state) • aria-invalid (state) • aria-label • aria-labelledby • aria-level • aria-live • aria-multiline • aria-multiselectable • aria-orientation • aria-owns • ... •
  61. 1. As WCAG utilizam a semântica do HTML para tornar

    o conteúdo acessível 2. ARIA são atributos que conseguem mudar a semântica dos elementos para tornar o conteúdo acessível
  62. 1.Teste seu site sem CSS 2.Teste seu site sem imagens

    3.Navegue somente por teclado 4.Teste com um leitor de tela 5.Verifique o markup (W3C Validator) 6.Verifique a acessibilidade (com validadores de acessibilidade automáticos) 7.Verifique os avisos da páginas 8.Coloque a acessibilidade na rotina do desenvolvimento Resumo
  63. Eu gostaria de jogar um jogo com vocês...