3 - Áreas de informação

Instrução para validar os critérios do morga de relacionado a divisão de áreas semânticas de uma interface

Áreas de informação e semântica

Áreas de informação são tags do html que permitem dar uma semântica/significado e função a alguns elementos da interface, usar esse tipo de convenção torna o produto mais acessível.

Perfis atendidos: Deficiência visual, motora e cognitiva.

Morga

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

Instruções gerais

Usar as áreas de informação correta é fundamental para usuários de leitores de tela obterem maior agilidade durante a navegação, além de dar consistência às composições das interfaces e semântica de conteúdo que favorecem o SEO - Search Engine Optimization.

Exemplos de áreas de informação

  • <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.

  • <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.

Itens de verificação

Verificação com o Wave

Header e navigation

Referências

http://emag.governoeletronico.gov.br/

Last updated