Landmarks

Grande parte das páginas web tem uma estrutura muito semelhante: header, navegação, área do conteúdo e o footer.

Clássica estrutura de uma página.
Fonte: a11y-101.com

As landmarks roles ajudam a identificar regiões de uma página e agem de maneira muito semelhante às tags HTML nativas quando se trata de semântica.

Os leitores de ecrãs recolhem as landmarks e podem informar o que está disponível na página. Assim a pessoa pode saltar diretamente para o footer, por exemplo.

Deve-se utilizar HTML elementos como <header> para o topo. Para a navegação o <nav>, para o conteúdo principal usa-se <main>. ATENÇÃO! Não utilizar algo como <div id=”main”>. Coisas que estão de lado como a publicidade, é utilizado <aside>, pode-se ter multiplos <aside>. E termina-se com o <footer>.

<nav role="navigation"></nav>
<main role="main"></main>
Uso de landmarks