Your SlideShare is downloading. ×
ARIA - Aplicações web ricas e acessíveis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

2,323
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.

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,323
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. A EVOLUÇÃO DA INTERFACE
  • 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. A EVOLUÇÃO DA INTERFACEE o Design participa dessa evolução?
  • 5. A EVOLUÇÃO DA INTERFACEClaro que sim! ;-)O Design atua no aprimoramento da experiência do usuário
  • 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. A EVOLUÇÃO DA INTERFACEA Apple é a empresa que mais investe (e lucra*) com UX.
  • 8. A EVOLUÇÃO DA INTERFACECom a Web, nãopoderia ser diferente.
  • 9. A EVOLUÇÃO DA INTERFACEDos anos 90 pra cá,muitos paradigmas de usoforam alterados.
  • 10. A EVOLUÇÃO DA INTERFACENovos elementos de interaçãosurgiram e estes foramchamados de RIA(Rich Internet Application)
  • 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. A EVOLUÇÃO DA INTERFACE Tecnologias como Flash, Silverlight além dasbibliotecas Javascript contribuíram muito para o crescimento vertiginoso das RIA.
  • 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. A EVOLUÇÃO DA INTERFACE Os sites deixaram de ser meras “páginas” parase tornarem verdadeiros ambientes interativos.
  • 15. A EVOLUÇÃO DA INTERFACEMas nem todos foram convidados.
  • 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. 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. 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. 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. 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. 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. 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. 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. COMO FUNCIONA?
  • 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. 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. 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. 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. 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. 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. 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. COMO FUNCIONA role=“banner” role=“main” role=“contentinfo”Papéis para estrutura
  • 33. COMO FUNCIONArole=“navigation”role=“article”Papéis para estrutura
  • 34. COMO FUNCIONA role=“complementary”role=“form” Papéis para estrutura
  • 35. COMO FUNCIONA role=“application”role=“slider” role=“presentation” Papéis para widget
  • 36. COMO FUNCIONAaria-valuetext=“Nov 03” Propriedades para widget
  • 37. COMO FUNCIONAaria-pressed=“true” aria-pressed=“false” Estados para widget
  • 38. COMO FUNCIONAaria-live=“polite” Live regions
  • 39. COMO FUNCIONAPara ver a lista completa dos papéis, estados epropriedades acesse:http://www.w3.org/WAI/PF/aria/roles
  • 40. ALGUNS EXEMPLOShttp://www.alanvasconcelos.com/aria/exemplos/exemplos.html
  • 41. O FUTURO
  • 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. O FUTURO <header> </header><aside> </aside> <footer> </footer> Elementos de estrutura
  • 44. O FUTURO <nav> </nav> <article> </article>Elementos de estrutura
  • 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. ALGUNS EXEMPLOShttp://www.alanvasconcelos.com/aria/exemplos/exemplos-html5.html
  • 47. COMPATIBILIDADE DAS ARIA
  • 48. COMPATIBILIDADEBrowsers compatíveis Fonte: W3C
  • 49. COMPATIBILIDADETecnologias assistivas compatíveis Fonte: W3C
  • 50. COMPATIBILIDADEFrameworks compatíveis Fonte: W3C
  • 51. O FUTUROMais detalhes em:http://html5accessibility.com Multimídia
  • 52. Hein?!?!? ?PERGUNTAS
  • 53. VALEU!ALAN VASCONCELOS – www.alanvasconcelos.com
  • 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