123456

WAI-ARIA Extendendo a acessibilidade nas páginas por meio da semântica. O WAI-ARIA melhora ajuda a melhorar a semântica de elementos e ações do HTML. Essa semântica é estendida para widgets, estruturas e comportamentos, dessa forma os leitores de tela conseguem entender quando o usuário está interagindo com TABS ou elementos formatados. Por exemplo: você utiliza uma imagem personalizada para simular o comportamento de um input radio. É possível fazer todo o comportamento emulando as ações de um input radio via javascript. O problema é que os leitores de tela não vão entender esse comportamento, e é aí que entra o WAI-ARIA, avisando ao leitor de tela que determinado elemento é um input radio. Com WAI-ARIA também podemos definir áreas de navegação na página, avisando o leitor de tela que na página existem cabeçalho, rodapé, content, sidebar e etc... O Locaweb Style já faz uma captação automática destas áreas, inserindo as respectivas roles. Veja o pedaço de código exemplificando:
//
// Menu
$('#menuPrincipal').attr('role','navigation');
$('#menuPrincipal li a').attr('role','menuitem');
$('#rodape').attr('role','contentinfo');
$('.alert').attr('role','alert');
$('a.btn').attr('role','button');
$('.boxGray').attr('role','region');
$('.boxGray h2').attr('role','presentation');
$('.headerPrincipal').attr('role','banner');
$('.content').attr('role','main'); // criar essa classe nos produtos ??
$('.sidebar').attr('role','complementary');
//
// TABS
$('.tabs').attr('role','tablist');

WAI-ARIA – Estendendo o significado das interações
Saiba como você pode aumentar a acessibilidade da sua página de um jeito fácil com WAI-ARIA. O HTML serve para apenas uma coisa: dar significado à informação. Ele faz isso marcando a informação com as famosas tags. Feito isso você passa para o CSS e o Javascript, que ficarão com as responsabilidades de formatar essa informação e manipular seu comportamento. O ponto é que a semântica não fica apenas na hora de marcar a