Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WAI-ARIA - Acessibilidade nas interações de página

1bf877955dc2e43662320fd3b0280166?s=47 Diego Eis
November 18, 2013

WAI-ARIA - Acessibilidade nas interações de página

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/

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

November 18, 2013
Tweet

Transcript

  1. ACESSIBILIDADE WAI-ARIA

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

  3. None
  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#rodape div#sidebar div#content div#sidebar

  7. div div div div div

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

  9. header footer aside article aside

  10. MICRODATA As microdatas nos ajudaram a marcar micro informações no

    meio do conteúdo.
  11. Olá, eu me chamo Diego Eis, sou brasileiro, trabalho na

    Locaweb como Coordenador do Time de Front-end. Tenho um website chamado Tableless e você pode entrar em contato comigo pelo email contato@tableless.com.br. name jobTitle URL worksFor email nacionality
  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…
  13. None
  14. None
  15. None
  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> <li id="tab1"> <a href=“#”>Primeira Aba</a> </li> </ul> <ul role="tablist">

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

    <li role="menuitem"> <a href=“#”>Primeira Aba</a> </li> ! ! <ul role="menubar"> ! ! ! </ul>
  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. <span role="button">Botão</span> <!-- Não faça assim: --> <!-- 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