Elementos de seção dividem uma página em regiões significativas. Vários deles mapeiam para landmarks ARIA — regiões nomeadas que a tecnologia assistiva permite aos usuários pular entre elas, como um índice da página.
...
Details
...
...
Os usuários de leitores de tela podem pressionar uma tecla para listar landmarks e ir direto para <main>, pulando cabeçalhos e navegação repetidos. Este é um ganho de eficiência importante — as tags semânticas o fornecem automaticamente, nenhuma ARIA necessária.
<article> — conteúdo que faz sentido por si só e pode ser sindicado: um post de blog, um cartão de produto, um comentário.<section> — um agrupamento temático dentro de um documento, normalmente com seu próprio título. Não é independente.<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
Regra prática: se pode ficar sozinho, é um <article>; se é apenas uma parte rotulada de um todo maior, é uma <section>. Não use <section> apenas como um wrapper de estilo — é para isso que serve <div>.
Usar os elementos de seção corretos oferece a você landmarks gratuitos e robustos para navegação do teclado/leitor de tela e um esboço de documento claro — melhorando a acessibilidade e SEO sem nenhum atributo ARIA extra.