4 - Semântica

Usar corretamente as tags semânticas do html melhora a acessibilidade

Organizando regiões semânticas da interface

Áreas de informação devem ser divididas em grupos fáceis de gerenciar. As divisões mais comuns são “topo”, “conteúdo”, “menu” e “rodapé”. Nas páginas internas deve-se manter uma mesma divisão para que o usuário se familiarize mais rapidamente com a estrutura do produto. As regiões devem vir especificadas no entregável de acessibilidade.

Perfis atendidos: Deficiência visual & Cognitiva

Morga

7 - dividir áreas de informação. As divisões mais comuns são “topo”, “conteúdo”,

“menu” e “rodapé”.

Exemplo - Regiões da página

semantic regions

<!-- Exemplos de tags nativas do html5 -->

<header>
Contém informações introdutórias para uma página ou para uma seção dela.

<nav>
É utilizada para seções da página que contenham links para outras páginas ou 
seções, como o menu principal, por exemplo.

<main>
Conteúdo principal da interface

<section>
Representa uma seção genérica ou uma seção que contém uma aplicação. 
Funciona de maneira parecida com a elemento <div>, separando seções 
do documento.

<article>
Representa uma seção da página independente, como uma postagem em um blog, 
um comentário em um fórum, entre outros.

<aside>
Contém conteúdo relacionado à área principal do documento.

<footer>
É utilizada para demarcar o rodapé da página ou de uma seção 
do conteúdo.

Aria role

As elementos estruturais do HTML HEADER, NAV, SECTION, ARTICLE, ASIDE e FOOTER já são interpretadas pela maioria dos leitores de tela. No entanto, é importante utilizar os landmarks roles de ARIA associados a elas, para garantir que todos os recursos de tecnologia assistiva realizem a interpretação da informação. Apesar de a informação ficar duplicada, os leitores de tela que reconhecem o HTML5 darão preferência ao HTML e, dessa forma, não irão ler duas vezes a mesma informação.

Aria role regions sample

<header role="banner"></header>

<nav role="navegation"></nav>

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

<section role="complementary"></section>

<article role="article"></article>

<aside role="complementary"></aside>

<footer role="contentinfo"></footer>

<form id="search" role="search">
  <label for="search-input">Campo de pesquisa</label>
  <input type="search" id="search-input" name="search" spellcheck="false">
  <input value="Submit" type="submit">
</form>