Your SlideShare is downloading. ×
0
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WAI-ARIA - Interações acessíveis na web

15,303

Published on

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ê …

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/

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,303
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
53
Comments
0
Likes
11
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. ACESSIBILIDADE WAI-ARIA
  • 2. DIEGO EIS @diegoeis @tableless tableless.com.br slideshare.net/diegoeis bit.ly/locawebstyle
  • 3. ESTENDENDO O SIGNIFICADO
  • 4. NOVAS TAGS DO HTML5 As novas tags do HTML5 ajudaram a externar a semântica dos elementos.
  • 5. div#cabecalho div#sidebar div#content div#rodape div#sidebar
  • 6. div div div div div
  • 7. header#cabecalho aside#sidebar article#content footer#rodape aside#sidebar
  • 8. header aside article footer aside
  • 9. MICRODATA As microdatas nos ajudaram a marcar micro informações no meio do conteúdo.
  • 10. 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
  • 11. 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…
  • 12. WAI-ARIA
  • 13. INTERAÇÕES WAI-ARIA aumenta a acessibilidade em conteúdos dinâmicos nos componentes interfaces.
  • 14. ROLES São atributos que representam ações nos elementos HTML. Elas são categorizadas em 4 tipos.
  • 15. 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…
  • 16. <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>
  • 17. <nav ! role="navigation"> ! ! <ul role="menubar"> ! ! ! <li role="menuitem"> ! ! <a href=“#”>Primeira Aba</a> ! ! </li> ! </ul> ! </nav>
  • 18. <select role="combobox" aria-multiselectable="true"> ! <option role="listbox"> Opção 2 </option> ! <option role="listbox"> Opção 2 </option> ! </select>
  • 19. LISTA COMPLETA DAS ROLES http:// bit.ly /wai-aria-roles ! http://www.w3.org/TR/wai-aria/roles#roles_categorization
  • 20. 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.
  • 21. <div role="radiogroup"> <span role="radio" aria-checked=“unchecked"> Option Unchecked </span> ! <span role="radio" aria-checked=“checked"> Option Checked </span> </div>
  • 22. <div class="collapse"> <h1>Um exemplo simples com texto</h1> <p>…</p> ! <div class="collapse-box" aria-expanded=“true”> … </div> </div>
  • 23. <a class="btn btn-primary" aria-describeby="desc-send"> Enviar </a> ! <p id=“desc-send"> Esta é uma descrição explicando a ação… </p>
  • 24. <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>
  • 25. LISTA DE STATES E PROPERTIES http:// bit.ly /wai-aria-states-properties ! http://www.w3.org/TR/wai-aria/states_and_properties
  • 26. 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.
  • 27. <!-- Não faça assim: --> <span role="button">Botão</span> <!-- Se você pode fazer assim: --> <button>Botão</button>
  • 28. 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.
  • 29. 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
  • 30. 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
  • 31. ENTÃO, FECHOU! A palestra vai ficar aqui: slideshare.net/diegoeis ! @diegoeis @tableless tableless.com.br ! bit.ly/locawebstyle

×