A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout. Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém. Veja um artigo completo neste link: http://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/

1. ACESSIBILIDADE
WAI-ARIA

2. DIEGO
EIS
@diegoeis
@tableless
tableless.com.br
slideshare.net/diegoeis
bit.ly/locawebstyle

4. ESTENDENDO O
SIGNIFICADO

5. NOVAS TAGS DO HTML5
As novas tags do HTML5 ajudaram a externar a semântica dos
elementos.

6. div#cabecalho
div#sidebar
div#content
div#rodape
div#sidebar

7. div
div
div
div
div

8. header#cabecalho
aside#sidebar
article#content
footer#rodape
aside#sidebar

9. header
aside
article
footer
aside

10. MICRODATA
As microdatas nos ajudaram a marcar micro informações no
meio do conteúdo.

11. name
nacionality
Olá, eu me chamo Diego Eis, sou brasileiro,
worksFor
jobTitle
trabalho na Locaweb como Coordenador do Time
de Front-end. Tenho um website chamado
URL
Tableless e você pode entrar em contato comigo
pelo email contato@tableless.com.br.
email

12. MAS E AS INTERAÇÕES
Como você avisa para um leitor de tela ou outros meios de
acesso sobre as interações que acontecem na tela?
!
Por exemplo: uma modal abrindo, validações de formulários,
submenu, tabs, collapse etc…

16. WAI-ARIA

17. INTERAÇÕES
WAI-ARIA aumenta a acessibilidade em conteúdos dinâmicos
nos componentes interfaces.

18. ROLES
São atributos que representam ações nos elementos HTML. Elas
são categorizadas em 4 tipos.

19. ABSTRACT
Para definição de conceitos gerais. Não devemos usar para marcar
conteúdo.
WIDGET
Para elementos de interface soltos, como caixas de alerta, botões,
checkbox, links, tabs etc.
DOCUMENT STRUCTURE
Para estruturas de organização da página. Estruturas que não são
interativas.
LANDMARK
Pra regiões de páginas que são pontos importantes para onde o usuário
navegaria, por exemplo: buscas, main, sidebar, formulários etc…

20. <ul
<ul>role="tablist">
<li id="tab1">role="tab" aria-selected="true">
id="tab1"
<a href=“#”>Primeira Aba</a>
</li>
</ul> <div role="tabpanel" aria-labelledby="tab1">
<p>Conteúdo, my friend…</p>
</div>

21. <nav ! role="navigation">
!
! <ul role="menubar">
!
! ! <li role="menuitem">
! !
<a href=“#”>Primeira Aba</a>
! ! </li>
! </ul>
!
</nav>

22. <select role="combobox" aria-multiselectable="true">
!
<option role="listbox">
Opção 2
</option>
!
<option role="listbox">
Opção 2
</option>
!
</select>

23. LISTA COMPLETA DAS
ROLES
http:// bit.ly /wai-aria-roles
!
http://www.w3.org/TR/wai-aria/roles#roles_categorization

24. STATES AND PROPERTIES
Muitas vezes precisamos customizar formulários ou outros
elementos com algum código que não é o padrão. Por exemplo,
customizar checkboxes ou radio buttons. Quando isso acontece,
precisamos indicar que estes elementos devem ter o mesmo
peso de significado dos elementos originais.

25. <div role="radiogroup">
<span role="radio" aria-checked=“unchecked">
Option Unchecked
</span>
!
<span role="radio" aria-checked=“checked">
Option Checked
</span>
</div>

26. <div class="collapse">
<h1>Um exemplo simples com texto</h1>
<p>…</p>
!
<div class="collapse-box" aria-expanded=“true”>
…
</div>
</div>

27. <a class="btn btn-primary" aria-describeby="desc-send">
Enviar
</a>
!
<p id=“desc-send">
Esta é uma descrição explicando a ação…
</p>

28. <ul>
<li aria-haspopup=“true">
<a href="#">Mensagens</a>
<ul>
<li><a href="#">Enviar</a></li>
<li><a href="#">Criar</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Relatórios</a></li>
</ul>
</li>
</ul>

29. LISTA DE STATES E
PROPERTIES
http:// bit.ly /wai-aria-states-properties
!
http://www.w3.org/TR/wai-aria/states_and_properties

30. USE SEMPRE AS TAGS
APROPRIADAS
Não substitua a semântica natural dos elementos.
!
Eu sei que WAI-ARIA é muito, muito bom. Mas não prefira usálas ao invés de usar os elementos padrão do HTML. Eles trazem
mais semântica do que elementos neutros usando WAI-ARIA.

31. <!-- Não faça assim: -->
<span role="button">Botão</span>
<!-- Se você pode fazer assim: -->
<button>Botão</button>

32. INTERAÇÃO COM O
TECLADO
Todas as interações com WAI-ARIA devem ser usadas via teclado.
!
Todos os "widgets" devem responder aos comandos e combinações padrão
de teclas dos sistemas operacionais. Por exemplo, se você desenha um
botão com uma tag span e coloca um role=“button”, este elemento deve
trabalhar como um botão, ou seja, se o usuário der foco a este elemento e
apertar ENTER, o botão deve agir.

33. INSERINDO WAI-ARIA VIA
JAVASCRIPT
Prefira colocar estes atributos via Javascript. Não há problema
algum fazer dessa forma.
!
Por outro lado, se você sabe que o seu público usa Javascript
desabilitado (o que é muito, muito difícil), prefira colocar
diretamente no código HTML

34. PARA PESQUISAR MAIS
http://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/
!
http://oaa-accessibility.org/examples/
!
http://www.w3.org/TR/wai-aria/
!
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA

35. ENTÃO, FECHOU!
A palestra vai ficar aqui:
slideshare.net/diegoeis
!
@diegoeis
@tableless
tableless.com.br
!
bit.ly/locawebstyle