aria - aplicações web ricas e acessíveis
DESCRIPTION
O que fazer para manter a acessibilidade do seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica.TRANSCRIPT
![Page 1: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/1.jpg)
ARIA
APLICAÇÕES WEB RICAS E ACESSÍVEISO que fazer para manter a acessibilidade do seu sistema, sem abrir mão de uma interface rica, atrativa e dinâmica.
Alan Vasconcelos Alves
![Page 2: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/2.jpg)
A EVOLUÇÃO DA INTERFACE
![Page 3: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/3.jpg)
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!!
![Page 4: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/4.jpg)
A EVOLUÇÃO DA INTERFACE
E o Design participa dessa evolução?
![Page 5: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/5.jpg)
A EVOLUÇÃO DA INTERFACE
Claro que sim! ;-)
O Design atua no aprimoramento da experiência do usuário
![Page 6: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/6.jpg)
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
“
![Page 7: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/7.jpg)
A EVOLUÇÃO DA INTERFACE
A Apple é a empresa que mais investe (e lucra*) com UX.
![Page 8: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/8.jpg)
A EVOLUÇÃO DA INTERFACE
Com a Web, não poderia ser diferente.
![Page 9: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/9.jpg)
A EVOLUÇÃO DA INTERFACE
Dos anos 90 pra cá, muitos paradigmas de uso foram alterados.
![Page 10: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/10.jpg)
A EVOLUÇÃO DA INTERFACE
Novos elementos de interação surgiram e estes foram chamados de RIA(Rich Internet Application)
![Page 11: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/11.jpg)
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.
![Page 12: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/12.jpg)
A EVOLUÇÃO DA INTERFACE
Tecnologias como Flash, Silverlight além das bibliotecas Javascript contribuíram muito para o
crescimento vertiginoso das RIA.
![Page 13: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/13.jpg)
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.
![Page 14: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/14.jpg)
A EVOLUÇÃO DA INTERFACE
Os sites deixaram de ser meras “páginas” para se tornarem verdadeiros ambientes interativos.
![Page 15: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/15.jpg)
A EVOLUÇÃO DA INTERFACE
Mas nem todos foram convidados.
![Page 16: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/16.jpg)
A EVOLUÇÃO DA INTERFACE
O uso intensivo de Flash, Ajax e outros componentes JavaScript, acabou
prejudicando a acessibilidade nas interfaces.
Por causa disso...
![Page 17: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/17.jpg)
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.
![Page 18: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/18.jpg)
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
![Page 19: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/19.jpg)
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.
![Page 20: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/20.jpg)
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.
![Page 21: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/21.jpg)
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!!!
![Page 22: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/22.jpg)
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
![Page 23: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/23.jpg)
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.
![Page 24: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/24.jpg)
COMO FUNCIONA?
![Page 25: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/25.jpg)
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.
![Page 26: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/26.jpg)
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.
![Page 27: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/27.jpg)
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.
![Page 28: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/28.jpg)
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.
![Page 29: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/29.jpg)
COMO FUNCIONA
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.
Convocando a “categoria de base”
![Page 30: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/30.jpg)
COMO FUNCIONA
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...)
Elenco forte e coeso
![Page 31: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/31.jpg)
COMO FUNCIONA
Um elemento de interação ARIA é caracterizado pelas seguintes instâncias:
Elenco forte e coeso
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...)
![Page 32: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/32.jpg)
COMO FUNCIONA
role=“banner”
role=“main”
role=“contentinfo”
Papéis para estrutura
![Page 33: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/33.jpg)
COMO FUNCIONA
role=“navigation”
role=“article”
Papéis para estrutura
![Page 34: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/34.jpg)
COMO FUNCIONA
role=“complementary”
role=“form”
Papéis para estrutura
![Page 35: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/35.jpg)
COMO FUNCIONA
role=“application”
role=“slider”
Papéis para widget
role=“presentation”
![Page 36: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/36.jpg)
COMO FUNCIONA
Propriedades para widget
aria-valuetext=“Nov 03”
![Page 37: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/37.jpg)
COMO FUNCIONA
Estados para widget
aria-pressed=“true”
aria-pressed=“false”
![Page 38: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/38.jpg)
COMO FUNCIONA
Live regions
aria-live=“polite”
![Page 39: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/39.jpg)
COMO FUNCIONA
Para ver a lista completa dos papéis, estados e propriedades acesse:
http://www.w3.org/WAI/PF/aria/roles
![Page 40: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/40.jpg)
ALGUNS EXEMPLOShttp://www.alanvasconcelos.com/aria/exemplos/exemplos.html
![Page 41: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/41.jpg)
O FUTURO
![Page 42: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/42.jpg)
HTML5
O FUTURO
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!
![Page 43: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/43.jpg)
O FUTURO
<header> </header>
Elementos de estrutura
<footer> </footer>
<aside> </aside>
![Page 44: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/44.jpg)
O FUTURO
<nav> </nav>
<article> </article>
Elementos de estrutura
![Page 45: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/45.jpg)
O FUTURO
Multimídia
<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
![Page 46: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/46.jpg)
ALGUNS EXEMPLOShttp://www.alanvasconcelos.com/aria/exemplos/exemplos-html5.html
![Page 47: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/47.jpg)
COMPATIBILIDADE DAS ARIA
![Page 48: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/48.jpg)
COMPATIBILIDADE
Browsers compatíveis
Fonte: W3C
![Page 49: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/49.jpg)
COMPATIBILIDADE
Tecnologias assistivas compatíveis
Fonte: W3C
![Page 50: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/50.jpg)
COMPATIBILIDADE
Frameworks compatíveis
Fonte: W3C
![Page 52: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/52.jpg)
Hein?!?!?
?PERGUNTAS
![Page 53: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/53.jpg)
VALEU!
ALAN VASCONCELOS – www.alanvasconcelos.com
![Page 54: ARIA - Aplicações web ricas e acessíveis](https://reader034.vdocuments.pub/reader034/viewer/2022052622/5590b0ba1a28abe4058b45fa/html5/thumbnails/54.jpg)
Referências
ALAN VASCONCELOS – www.alanvasconcelos.com
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 Roleshttp://www.w3.org/TR/xhtml-role/
FilamentGrouphttp://www.filamentgroup.com/lab
Crianças, não façam isso em casa!Arquivos dos exemplos utilizados:http://alanvasconcelos.com/aria/exemplos-aria.zip