Aplicações Web Ricas e Acessíveis

1.590 visualizações

Publicada em

Em sistemas web, o crescente uso do Ajax e de elementos de interação avançados, chamados de RIA (Rich Internet Application), fez crescer uma enorme barreira aos usuários com algum tipo de deficiência, especialmente àqueles que utilizam leitores de tela, ou navegam apenas via teclado.

Até então, a solução era criar versões simplificadas e estáticas para manter a acessibilidade desses sistemas. Pensando nisso, o consórcio W3C desenvolveu uma série de especificações chamadas ARIA (Accessible Rich Internet Application), o que permite ao desenvolvedor manter a acessibilidade do seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica.

Durante a palestra, veremos quais são essas especificações, além de alguns
exemplos de aplicações ARIA em funcionamento.

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.590
No SlideShare
0
A partir de incorporações
0
Número de incorporações
304
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aplicações Web Ricas e Acessíveis

  1. 1. ARIA APLICAÇÕES WEB RICAS E ACESSÍVEIS Alan Vasconcelos Alves
  2. 2. ARIA APLICAÇÕES WEB RICAS E ACESSÍVEIS O que fazer para manter a acessibilidade do seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica. Alan Vasconcelos Alves
  3. 3. A EVOLUÇÃO DA INTERFACE
  4. 4. A EVOLUÇÃO DA INTERFACE Os objetos em geral, vão, ao longo do tempo, se aprimorando em funcionalidade e interatividade, o que altera completamente a relação entre usuário e produto. Até um Camaro precisou evoluir!!
  5. 5. A EVOLUÇÃO DA INTERFACE E o Design participa dessa evolução?
  6. 6. A EVOLUÇÃO DA INTERFACE Claro que sim! ;-) O Design atua no aprimoramento da experiência do usuário
  7. 7. A EVOLUÇÃO DA INTERFACE User Experience, ou UX, é um campo de estudo multidisciplinar que visa enriquecer a experiência de do usuário, propondo “algo mais” além da eficácia e da eficiência de uso. “ The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.” Nielsen Norman Group
  8. 8. A EVOLUÇÃO DA INTERFACE A Apple é a empresa que mais investe (e lucra*) com UX.
  9. 9. A EVOLUÇÃO DA INTERFACE A Apple é a empresa que mais investe (e lucra*) com UX.
  10. 10. A EVOLUÇÃO DA INTERFACE A Apple é a empresa que mais investe (e lucra*) com UX.
  11. 11. A EVOLUÇÃO DA INTERFACE A Apple é a empresa que mais investe (e lucra*) com UX. *Ok, nem tanto...
  12. 12. A EVOLUÇÃO DA INTERFACE Com a Web, não poderia ser diferente.
  13. 13. A EVOLUÇÃO DA INTERFACE Dos anos 90 pra cá, muitos paradigmas de uso foram alterados.
  14. 14. A EVOLUÇÃO DA INTERFACE Novos elementos de interação surgiram e estes foram chamados de RIA (Rich Internet Application)
  15. 15. A EVOLUÇÃO DA INTERFACE RIA é uma extensão do HTML comum, para se apresentar nas aplicações web com elementos ricos em interação, como nos sistemas desktop.
  16. 16. A EVOLUÇÃO DA INTERFACE Tecnologias como Flash, Silverlight além das bibliotecas Javascript contribuíram muito para o crescimento vertiginoso das RIA.
  17. 17. A EVOLUÇÃO DA INTERFACE Nos últimos 4 anos, novos produtos e serviços mudaram definitivamente nossa experiência de uso na web, levando-nos a uma nova maneira de interagir.
  18. 18. A EVOLUÇÃO DA INTERFACE Os sites deixaram de ser meras “páginas” para se tornarem verdadeiros ambientes interativos.
  19. 19. A EVOLUÇÃO DA INTERFACE Mas nem todos foram convidados.
  20. 20. A EVOLUÇÃO DA INTERFACE O uso intensivo de Flash, Ajax e outros componentes JavaScript, acabou prejudicando a acessibilidade nas interfaces. Por causa disso...
  21. 21. A EVOLUÇÃO DA INTERFACE ...Até bem pouco tempo, era necessário disponibilizar versões estáticas dos sites para atender os usuários portadores de necessidades especiais... ...Que são aqueles que usam leitores de tela, ou apenas o teclado para navegar.
  22. 22. A EVOLUÇÃO DA INTERFACE Mas desde setembro de 2006, a W3C começou a rascunhar os primeiros documentos com as diretrizes necessárias para tornar as RIAs acessíveis. Esse conjunto de diretrizes foi chamado ARIA. Accessible Rich Internet Applications
  23. 23. A EVOLUÇÃO DA INTERFACE ARIA é uma especificação assim como o HTML, CSS, XML etc. Porém, ainda não está finalizada. Sua última publicação foi em dezembro de 2009 sendo que a próxima está prevista para o fim do primeiro semestre deste ano.
  24. 24. A EVOLUÇÃO DA INTERFACE As especificações estão sendo construídas em conjunto com os principais representantes da indústria, sobretudo os fabricantes de browsers.
  25. 25. A EVOLUÇÃO DA INTERFACE As especificações estão sendo construídas em conjunto com os principais representantes da indústria, sobretudo os fabricantes de browsers. Inclusive o Internet Explorer!!!
  26. 26. A EVOLUÇÃO DA INTERFACE Com ARIA, é possível manter a acessibilidade do seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica.
  27. 27. COMO FUNCIONA?
  28. 28. COMO FUNCIONA Um código semântico, transmite o sentido atrelado ao conteúdo. Mas, se mal aplicado, pode tornar o conteúdo incessível.
  29. 29. COMO FUNCIONA Folhas de estilo bem aplicadas e estruturadas podem aprimorar a usabilidade do sistema. Porém, elas podem reduzir a acessibilidade se forem mal usadas.
  30. 30. COMO FUNCIONA Bibliotecas Javascript podem enriquecer a interação, tornando as interfaces mais dinâmicas. Mas lembre-se que elas podem não funcionar em 100% dos casos.
  31. 31. COMO FUNCIONA ARIA estende a semântica do documento para fornecer informações adicionais sobre o estado da interface e sobre como interagir com ela.
  32. 32. COMO FUNCIONA Convocando a “categoria de base” Ao invés de se criar um novo elemento HTML, por exemplo, o "slider", usa-se os elementos já existentes na versão atual do HTML, desde que seja mantida a semântica.
  33. 33. COMO FUNCIONA Elenco forte e coeso Portanto, os novos elementos de interação ARIA (abas, sliders, menus, árvores, etc...) na verdade, não são novos elementos do HTML, mas sim, papéis representados por elementos já constantes no HTML atual (selects, lists, inputs, buttons...)
  34. 34. COMO FUNCIONA Elenco forte e coeso Um elemento de interação ARIA é caracterizado pelas seguintes instâncias: 1. Landmark (Divisões: Cabeçalho, barra de navegação, rodapé, etc...) 2. Roles: (Papéis: aba, slider, árvore, etc...) 3. State: (Estado: ativo/inativo, expandido/contraído, checado/Não- checado, etc...) 4. Properties: (Propriedades: Valor máximo/mínimo, campo obrigatório, exibição do valor, etc...)
  35. 35. COMO FUNCIONA role=“banner” role=“main” role=“contentinfo” Papéis para estrutura
  36. 36. COMO FUNCIONA role=“navigation” role=“article” Papéis para estrutura
  37. 37. COMO FUNCIONA role=“complementary” role=“form” Papéis para estrutura
  38. 38. COMO FUNCIONA role=“application” role=“slider” role=“presentation” Papéis para widget
  39. 39. COMO FUNCIONA aria-valuetext=“Nov 03” Propriedades para widget
  40. 40. COMO FUNCIONA aria-pressed=“true” aria-pressed=“false” Estados para widget
  41. 41. COMO FUNCIONA aria-live=“polite” Live regions
  42. 42. COMO FUNCIONA Para ver a lista completa dos papéis, estados e propriedades acesse: http://www.w3.org/WAI/PF/aria/roles
  43. 43. ALGUNS EXEMPLOS http://www.alanvasconcelos.com/aria/exemplos/exemplos.html
  44. 44. O FUTURO
  45. 45. O FUTURO HTML5 O HTML5 não é: •Um substituto do HTML4; Apesar de ser uma evolução da linguagem. •Um substituto do Javascript; Apesar de dispensar vários de seus componentes de interface. •Um substituto do Flash; Apesar de possuir recursos de animação, de áudio e de vídeo. •Mais uma coisa bacana que não roda no I.Explorer. Apesar de... Ok, não funciona mesmo!
  46. 46. ALGUNS EXEMPLOS http://www.alanvasconcelos.com/aria/exemplos/exemplos-html5.html
  47. 47. COMPATIBILIDADE DAS ARIA
  48. 48. COMPATIBILIDADE Browsers compatíveis Fonte: W3C
  49. 49. COMPATIBILIDADE Tecnologias assistivas compatíveis Fonte: W3C
  50. 50. COMPATIBILIDADE Frameworks compatíveis Fonte: W3C
  51. 51. Hein?!?!? ? PERGUNTAS
  52. 52. VALEU! ALAN VASCONCELOS – www.alanvasconcelos.com
  53. 53. Referências WAI ARIA •Accessible Rich Internet Applications (WAI-ARIA) (internal editor's draft) •WAI-ARIA Best Practices (internal editor's draft) •WAI-ARIA Primer (internal editor's draft) •Accessible drag and drop using WAI-ARIA Gez lemon •WAI-ARIA Implementation in JavaScript UI Libraries •Using WAI ARIA Landmark Roles http://www.w3.org/TR/xhtml-role/ FilamentGroup http://www.filamentgroup.com/lab ALAN VASCONCELOS – www.alanvasconcelos.com

×