Acessibilidade digital

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

Transcript

2. Pessoa com deficiência
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
10. Video acessibilidade digital: custo ou benefício?
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?
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
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/
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
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
42. Então, como faz?
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
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
49. <a href=“#content”>Saltar conteúdo</a> .... <section id=“content”>
52. <html lang=“pt-br”> ... Esse texto está em português <a href=“english/” lang=“en”> and in english also </a>
55. Vídeos com legendas
56. Libras e audiodescrição
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...