ACESSIBILIDADE WAI-ARIA

DIEGO EIS

slideshare.net/diegoeis bit.ly/locawebstyle

@diegoeis @tableless tableless.com.br

ESTENDENDO O SIGNIFICADO

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

div#cabecalho

div#rodape

div#sidebar div#content div#sidebar

div

div

div div div

header#cabecalho

footer#rodape

aside#sidebar article#content aside#sidebar

header

footer

aside article aside

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

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

MAS E AS INTERAÇÕESComo 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…

WAI-ARIA

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

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

ABSTRACTPara definição de conceitos gerais. Não devemos usar para marcar conteúdo.

WIDGETPara elementos de interface soltos, como caixas de alerta, botões, checkbox, links, tabs etc.

DOCUMENT STRUCTUREPara estruturas de organização da página. Estruturas que não são interativas.

LANDMARKPra regiões de páginas que são pontos importantes para onde o usuário navegaria, por exemplo: buscas, main, sidebar, formulários etc…

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

<nav role="navigation"> !!!!!</nav>

!!<li role="menuitem"> <a href=“#”>Primeira Aba</a> </li> !

!<ul role="menubar"> !!!</ul>

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

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

STATES AND PROPERTIESMuitas 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.

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

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

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

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

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

USE SEMPRE AS TAGS APROPRIADASNã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.

<span role="button">Botão</span>

<!-- Não faça assim: -->

<!-- Se você pode fazer assim: -->

<button>Botão</button>

INTERAÇÃO COM O TECLADOTodas 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.

INSERINDO WAI-ARIA VIA JAVASCRIPTPrefira 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

PARA PESQUISAR MAIShttp://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

ENTÃO, FECHOU!

A palestra vai ficar aqui: slideshare.net/diegoeis !@diegoeis @tableless tableless.com.br !bit.ly/locawebstyle