Vou demonstrar que é simples, não machuca, não vai aumentar o tempo de desenvolvimento e ainda vai melhorar a semântica e consequentemente a acessibilidade do projeto.
O que é WAI-ARIA
O WAI-ARIA é dividido em duas categorias: roles e states/ properties.
Roles
A maioria das roles foram definidas no ARIA 1.0, e acabaram sendo adicionadas no HTML5 mais tarde. Elas servem para dar significado (ou mais significado) aos elementos, já que nem sempre a tag HTML fornece por si só o comportamento esperado.
Vamos ver exemplos de uso prático para você começar a usar agora.
button
Quantas vezes você já criou um link que não levava para lugar nenhum, simplesmente colocando um [href='#' e mudando o comportamento via JavaScript?
Na maioria das vezes, o correto seria utilizar a tag <button>, mas por alguma limitação ou característica do projeto, você pode ter utilizado a tag <a>
Então, vamos dar um significado para esse botão!
<a href="#" data-modal="#modal-1" role="button">Abre o modal!</a>
logo
Antigamente, era comum utilizarmos a tag <h1> e adicionar a imagem e esconder o texto via CSS.
<h1 class="logo">
<a href="#">
Empresa foda!
</a>
</h1>
.logo {
background: url
height: 80px
text-indent: -999em
width: 160px
}
Pare de fazer isso o quanto antes!
A imagem do logo é uma das informações mais importantes do projeto, e pode ter certeza que o cliente espera que ela (e não um texto) esteja sempre disponível.
O WAI-ARIA nos ajuda a fornecer significado.
<a class="logo" role="logo"> <img src="/img/logo.svg" alt="Empresa foda!"> </a>
banner
É possível ter vários <header> no projeto, então essa role ajuda a informar onde está o header principal, geralmente o do topo.
<header class="header" role="banner"> </header>
contentinfo
Também é possível que um projeto tenha vários <footer>, com essa role podemos marcar o rodapé da página.
<footer class="footer" role="contentinfo"> </footer>
search
Ainda não temos um elemento search no HTML. Mas podemos dar uma mãozinha:
<form class="search" role="search"> <input type="search" class="search--control" placeholder="Faça uma busca :)"> <button class="search--btn">Buscar!</button> </form>
dialog
Normalmente usado para elementos como modal. Que só estarão ativos após a ação do usuário.
<div class="modal" role="dialog" tabindex="-1"> </div>
Vamos falar sobre redundância… Os exemplos a seguir são redundantes e sempre vejo discussões sobre a utilização ou não dessas roles (pode acompanhar uma discussão sobre o tema no nosso fórum e aqui tem um ótimo artigo sobre o tema aqui).
main
Essa role também deve ser única na página, normalmente utilizada em conjunto com a tag <main>.
<main class="main" role="main"> </main>
navigation
Essa role auxilia elementos de navegação.
<nav class="navbar" role="navigation"> </nav>
complementary
Sabe aqueles conteúdos e informações que não são os mais importantes da página, mas são complementares, onde você geralmente usa o <aside>?
Podemos usar essa role para informar tal função.
<aside class="content__complementary" role="complementary"> </aside>
!important
Como qualquer propriedade, as roles podem ser alteradas via CSS. Você sempre devia usar classes, mas caso você tenha algum problema quanto a isso, também é possível usar assim.
<a role="logo"> <img src="/img/logo.svg" alt="Empresa foda!"> </a>
a[role="logo"] {
margin: 2rem
}
Existem muitas roles, que cobrem praticamente qualquer situação. Você pode ver a lista completa aqui.
Status / Properties
Você consegue usar essas propriedades para informar se determinado elemento está escondido ou visível para o usuário, fornecer informações de texto ou até esconder elementos visuais desnecessários.
aria-hidden
<a href="#" title="Acessar o Facebook">
Facebook
<svg aria-hidden="true" class="icon">
<use xlink:href="/assets/svg/icons.svg#facebook"></use>
</svg>
</a>
No exemplo acima, o link tem um ícone com um significado apenas visual, já que a informação importante está no texto. Sendo assim, o aria-hidden=”true” faz com que leitores de tela ignorem esse elemento.
aria-label
É usado para fornecer informações sobre o elemento caso o texto não esteja disponível na tela.
De novo, um exemplo com ícone:
<svg aria-label="Facebook" class="icon"> <use xlink:href="/assets/svg/icons.svg#facebook"></use> </svg>
Ao contrário do outro exemplo, dessa vez não tínhamos um texto ao lado, tornando o ícone um elemento importante na navegação. Então, ao invés de usar o aria-hidden=”true”, usamos o aria-label para informar o significado do ícone.
Super exemplo!
O Deivid Marques adicionou no CSS Components, um dos melhores exemplos que já vi de aria-label. Aqui é possível ver CSS e HTML trabalhando juntos para melhorar semanântica e acessibilidade.
<div class="tooltip" aria-label="Informações em tooltip"></div>
.tooltip:after content: attr(aria-label)
Conclusão
Acredito que na maioria dos casos, os exemplos acima serão os mais utilizados no dia a dia. Mas tenha em mente que o assunto é extremamente extenso e existem milhares de propriedades WAI-ARIA, englobando várias situações para te ajudar a fornecer mais significado e semântica ao seu projeto.
Portanto, vou deixar alguns links que costumo acessar quando tenho dúvidas ou quero procurar alguma propriedade.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?