WAI-ARIA e redundância

[felipefialho]

Olá amigos.

Estou escrevendo um artigo sobre WAI-ARIA e acabei caindo no assunto da redundância do uso de algumas roles em conjunto com tags HTML5. Os casos mais famosos:

<main class="main" role="main"> 
</main> 

<nav class="navbar" role="navigation"> 
</nav>

Essas roles ajudam ou atrapalham na semântica e acessibilidade?

Chamando na discussão: @deividmarques, @talitapagani, @reinaldoferraz, @marcobrunobr

[bernardodiasc]

No HTML5 <main/> e <nav/> "recebem" os roles automaticamente, não é preciso fazer a redundância.

HTML5 defined a new set of structural and sectioning elements with default implicit semantics that match ARIA roles (for some, only under certain conditions):

• article maps to role=article
• aside maps to role=complementary
• footer maps to role=contentinfo (if not within an article or section element)
• header maps to role=banner (if not within an article or section element)
• main maps to role=main
• nav maps to role=navigation
• section maps to role=region

Referência: http://html5doctor.com/on-html-belts-and-aria-braces/

[brunopulis]

@lfeh Tudo bom? Como nosso colega @bernardodiasc exemplificou os elementos no caso <main> e <nav> possuem essas roles nativas, logo não há necessidade de usá-las. Um link interessante que pode sanar dúvidas em relação do uso ou não é este.

Por exemplo, por padrão o <footer> deveria aplicar a role="contentinfo", como ele é um elemento HTML que já possui a role implicita por causa da Accessibility API, não há necessidade de colocar, agora caso ele seja filho de um <article> ou um <section> tem necessidade de colocar a role.

Espero que possa ter ajudado! :)

[andre-mendes]

Fala galera, aproveitando o gancho :D pensando em semantica... é correto usar uma tag <nav> dentro de uma tag <header> , no caso de ser o menu do site ?? :)

[brunopulis]

@andre-mendes Pode usar sim sem problema! :)

[talitapagani]

Como o pessoal já comentou, as roles para o <main> e <nav> tornam-se desnecessárias. Há uma controvérsia sobre usar as roles banner e contentinfo para header e footer também, porque os leitores de tela podem ler estes elementos como marcas de cabeçalho e rodapé. Tem outra questão também sobre redundância: já vi códigos onde é colocado uma role="button" em um elemento <button> e isto não é necessário, pois o leitor de telas já entende a semântica daquele elemento. O Reinaldo sempre comenta que uma boa semântica pode evitar o uso desnecessário de WAI-ARIA.

[reinaldoferraz]

O problema com elementos semânticos são os legados de navegadores/leitores antigos (IE não suportava bem os elementos semânticos com leitor de tela). Isso é algo que já está diminuindo. Na última pesquisa do WebAim o uso do IE10 é maior que a soma de IE6, 7 e 8 (http://webaim.org/projects/screenreadersurvey6/#browsers).

Por outro lado, existem atributos que são bons para se usar, como role="search" para que o usuário possa ir direto o campo de busca.

Tem um artigo legal sobre o suporte de elementos semânticos e a combinação de leitores de tela
http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/