1) O documento discute a evolução da interface web e a necessidade de manter a acessibilidade em aplicações web ricas e dinâmicas. 2) A especificação ARIA (Accessible Rich Internet Applications) da W3C fornece diretrizes para tornar aplicações web ricas acessíveis. 3) ARIA estende a semântica do HTML para fornecer informações adicionais sobre o estado e interação de elementos, sem criar novos elementos.

1. 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

2. A EVOLUÇÃO DA INTERFACE

3. 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!!

4. A EVOLUÇÃO DA INTERFACE
E o Design participa dessa evolução?

5. A EVOLUÇÃO DA INTERFACE
Claro que sim! ;-)
O Design atua no aprimoramento da experiência do usuário

6. 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

7. A EVOLUÇÃO DA INTERFACE
A Apple é a empresa que mais investe (e lucra*) com UX.

8. A EVOLUÇÃO DA INTERFACE
Com a Web, não
poderia ser diferente.

9. A EVOLUÇÃO DA INTERFACE
Dos anos 90 pra cá,
muitos paradigmas de uso
foram alterados.

10. A EVOLUÇÃO DA INTERFACE
Novos elementos de interação
surgiram e estes foram
chamados de RIA
(Rich Internet Application)

11. 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.

12. A EVOLUÇÃO DA INTERFACE
Tecnologias como Flash, Silverlight além das
bibliotecas 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 nossa
experiê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” para
se tornarem verdadeiros ambientes interativos.

15. A EVOLUÇÃO DA INTERFACE
Mas nem todos foram convidados.

16. A EVOLUÇÃO DA INTERFACE
O uso intensivo de Flash, Ajax e outros
componentes JavaScript, acabou
prejudicando 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 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

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 INTERFACE
As 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 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!!!

22. A EVOLUÇÃO DA INTERFACE
Curiosidade:
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 acessibilidade
do 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 mal
aplicado, pode tornar o conteúdo incessível.

26. 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.

27. 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.

28. 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.

29. 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.

30. 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...)

31. 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...)

32. COMO FUNCIONA
role=“banner”
role=“main”
role=“contentinfo”
Papéis para estrutura

33. COMO FUNCIONA
role=“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 FUNCIONA
aria-valuetext=“Nov 03”
Propriedades para widget

37. COMO FUNCIONA
aria-pressed=“true”
aria-pressed=“false”
Estados para widget

38. COMO FUNCIONA
aria-live=“polite”
Live regions

39. COMO FUNCIONA
Para ver a lista completa dos papéis, estados e
propriedades acesse:
http://www.w3.org/WAI/PF/aria/roles

40. ALGUNS EXEMPLOS
http://www.alanvasconcelos.com/aria/exemplos/exemplos.html

41. O FUTURO

42. 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!

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/gK72pcu3cpk
Curiosidade (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 EXEMPLOS
http://www.alanvasconcelos.com/aria/exemplos/exemplos-html5.html

47. COMPATIBILIDADE DAS ARIA

48. COMPATIBILIDADE
Browsers compatíveis
Fonte: W3C

49. COMPATIBILIDADE
Tecnologias assistivas compatíveis
Fonte: W3C

50. COMPATIBILIDADE
Frameworks compatíveis
Fonte: W3C

51. O FUTURO
Mais detalhes em:
http://html5accessibility.com
Multimídia

52. Hein?!?!?
?
PERGUNTAS

53. VALEU!
ALAN VASCONCELOS – www.alanvasconcelos.com

54. 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
Crianças, não façam isso em casa!
Arquivos dos exemplos utilizados:
http://alanvasconcelos.com/aria/exemplos-aria.zip
ALAN VASCONCELOS – www.alanvasconcelos.com