ARIA - Aplicações web ricas e acessíveis

2,588 views
2,527 views

Published on

O que fazer para manter a acessibilidade do seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,588
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

ARIA - Aplicações web ricas e acessíveis

  1. 1. ARIAAPLICAÇÕES WEB RICASE ACESSÍVEISO que fazer para manter a acessibilidade do seu sistema, sem abrir mão deuma interface rica, atrativa e dinâmica.Alan Vasconcelos Alves
  2. 2. A EVOLUÇÃO DA INTERFACE
  3. 3. A EVOLUÇÃO DA INTERFACEOs objetos em geral, vão, ao longo do tempo, se aprimorando emfuncionalidade e interatividade,o que altera completamentea relação entre usuário e produto.Até um Camaro precisou evoluir!!
  4. 4. A EVOLUÇÃO DA INTERFACEE o Design participa dessa evolução?
  5. 5. A EVOLUÇÃO DA INTERFACEClaro que sim! ;-)O Design atua no aprimoramento da experiência do usuário
  6. 6. A EVOLUÇÃO DA INTERFACEUser Experience,ou UX, é um campo de estudo multidisciplinar que visa enriquecer aexperiência de do usuário, propondo “algo mais” além da eficácia e daeficiê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
  7. 7. A EVOLUÇÃO DA INTERFACEA Apple é a empresa que mais investe (e lucra*) com UX.
  8. 8. A EVOLUÇÃO DA INTERFACECom a Web, nãopoderia ser diferente.
  9. 9. A EVOLUÇÃO DA INTERFACEDos anos 90 pra cá,muitos paradigmas de usoforam alterados.
  10. 10. A EVOLUÇÃO DA INTERFACENovos elementos de interaçãosurgiram e estes foramchamados de RIA(Rich Internet Application)
  11. 11. A EVOLUÇÃO DA INTERFACE RIA é uma extensão do HTML comum, para seapresentar nas aplicações web com elementos ricos em interação, como nos sistemas desktop.
  12. 12. A EVOLUÇÃO DA INTERFACE Tecnologias como Flash, Silverlight além dasbibliotecas Javascript contribuíram muito para o crescimento vertiginoso das RIA.
  13. 13. A EVOLUÇÃO DA INTERFACE Nos últimos 4 anos, novos produtos e serviços mudaram definitivamente nossaexperiência de uso na web, levando-nos a uma nova maneira de interagir.
  14. 14. A EVOLUÇÃO DA INTERFACE Os sites deixaram de ser meras “páginas” parase tornarem verdadeiros ambientes interativos.
  15. 15. A EVOLUÇÃO DA INTERFACEMas nem todos foram convidados.
  16. 16. A EVOLUÇÃO DA INTERFACE O uso intensivo de Flash, Ajax e outros componentes JavaScript, acabouprejudicando a acessibilidade nas interfaces. Por causa disso...
  17. 17. 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.
  18. 18. A EVOLUÇÃO DA INTERFACEMas desde setembro de 2006, a W3C começou a rascunhar os primeirosdocumentos com as diretrizes necessárias para tornar as RIAs acessíveis. Esse conjunto de diretrizes foi chamado ARIA. Accessible Rich Internet Applications
  19. 19. 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.
  20. 20. A EVOLUÇÃO DA INTERFACEAs especificações estão sendo construídas em conjunto com os principais representantes da indústria, sobretudo os fabricantes de browsers.
  21. 21. A EVOLUÇÃO DA INTERFACEAs 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!!!
  22. 22. A EVOLUÇÃO DA INTERFACECuriosidade:Sugestão enviada à W3C pedindo a criação do elemento IMG:http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
  23. 23. A EVOLUÇÃO DA INTERFACE Com ARIA, é possível manter a acessibilidadedo seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica.
  24. 24. COMO FUNCIONA?
  25. 25. COMO FUNCIONA Um código semântico, transmite o sentido atrelado ao conteúdo. Mas, se malaplicado, pode tornar o conteúdo incessível.
  26. 26. COMO FUNCIONAFolhas de estilo bem aplicadas e estruturadas podem aprimorar a usabilidade do sistema.Porém, elas podem reduzir a acessibilidade se forem mal usadas.
  27. 27. COMO FUNCIONA Bibliotecas Javascript podem enriquecer a interação, tornando as interfaces maisdinâmicas. Mas lembre-se que elas podem não funcionar em 100% dos casos.
  28. 28. COMO FUNCIONAARIA estende a semântica do documento para fornecer informações adicionais sobre o estado da interface e sobre como interagir com ela.
  29. 29. COMO FUNCIONAConvocando 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.
  30. 30. COMO FUNCIONAElenco forte e coeso Portanto, os novos elementos de interação ARIA (abas, sliders, menus, árvores, etc...) na verdade, não são novoselementos do HTML, mas sim, papéis representados por elementos já constantes no HTML atual (selects, lists, inputs, buttons...)
  31. 31. COMO FUNCIONAElenco 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...)
  32. 32. COMO FUNCIONA role=“banner” role=“main” role=“contentinfo”Papéis para estrutura
  33. 33. COMO FUNCIONArole=“navigation”role=“article”Papéis para estrutura
  34. 34. COMO FUNCIONA role=“complementary”role=“form” Papéis para estrutura
  35. 35. COMO FUNCIONA role=“application”role=“slider” role=“presentation” Papéis para widget
  36. 36. COMO FUNCIONAaria-valuetext=“Nov 03” Propriedades para widget
  37. 37. COMO FUNCIONAaria-pressed=“true” aria-pressed=“false” Estados para widget
  38. 38. COMO FUNCIONAaria-live=“polite” Live regions
  39. 39. COMO FUNCIONAPara ver a lista completa dos papéis, estados epropriedades acesse:http://www.w3.org/WAI/PF/aria/roles
  40. 40. ALGUNS EXEMPLOShttp://www.alanvasconcelos.com/aria/exemplos/exemplos.html
  41. 41. O FUTURO
  42. 42. O FUTURO HTML5O 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!
  43. 43. O FUTURO <header> </header><aside> </aside> <footer> </footer> Elementos de estrutura
  44. 44. O FUTURO <nav> </nav> <article> </article>Elementos de estrutura
  45. 45. O FUTURO<video controls> <source src=movie.webm> <source src=movie.mp4> <track src=english.vtt kind=captions srclang=en> <track src=french.vtt kind=captions srclang=fr> <p>Texto alternativo aqui com link para download do vídeo</p></video>Mais detalhes em:http://youtu.be/gK72pcu3cpkCuriosidade (sugestão enviada à W3C pedindo a criação do elemento VIDEO):http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html Multimídia
  46. 46. ALGUNS EXEMPLOShttp://www.alanvasconcelos.com/aria/exemplos/exemplos-html5.html
  47. 47. COMPATIBILIDADE DAS ARIA
  48. 48. COMPATIBILIDADEBrowsers compatíveis Fonte: W3C
  49. 49. COMPATIBILIDADETecnologias assistivas compatíveis Fonte: W3C
  50. 50. COMPATIBILIDADEFrameworks compatíveis Fonte: W3C
  51. 51. O FUTUROMais detalhes em:http://html5accessibility.com Multimídia
  52. 52. Hein?!?!? ?PERGUNTAS
  53. 53. VALEU!ALAN VASCONCELOS – www.alanvasconcelos.com
  54. 54. ReferênciasWAI ARIA•Accessible Rich Internet Applications (WAI-ARIA) (internal editors draft)•WAI-ARIA Best Practices (internal editors draft)•WAI-ARIA Primer (internal editors draft)•Accessible drag and drop using WAI-ARIA Gez lemon•WAI-ARIA Implementation in JavaScript UI Libraries•Using WAI ARIA Landmark Roleshttp://www.w3.org/TR/xhtml-role/FilamentGrouphttp://www.filamentgroup.com/labCrianças, não façam isso em casa!Arquivos dos exemplos utilizados:http://alanvasconcelos.com/aria/exemplos-aria.zip ALAN VASCONCELOS – www.alanvasconcelos.com

×