2 - Níveis de cabeçalhos

Utilizar corretamente os níveis de cabeçalho

Porque usar cabeçalhos

Os níveis de cabeçalho (elementos HTML H1 a H6) " No Meu Vivo empresas usamos do H1 a H4" devem ser utilizados de forma hierárquica, pois organizam a ordem de importância e subordinação dos conteúdos, facilitando a leitura e compreensão.

Além disso, muitos leitores de tela utilizam a hierarquia de cabeçalhos como uma forma de navegação na página, pulando de um para outro, agilizando, assim, a navegação. Conceitualmente, existem seis níveis de títulos, sendo o H1 o mais alto, ou seja, deverá corresponder ao conteúdo principal da página, assim é recomendável que toda página tenha apenas um H1.

Já os níveis do H2 ao H6, podem ser utilizados mais de uma vez na página, mas sem excesso e com lógica textual, obedecendo uma hierarquia.

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

Morga

1 - utilizar corretamente os níveis de cabeçalho;

Exemplos

Web

exemplo de layout com headlines - "cabeçalhos"em vários níveis

Headlines

<h1>Titulo Principal</h1>
<section>
<h2>Titulo Nível 2</h2>
        <div class="card">
            <h3>Titulo Nível 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="card">
            <h3>Titulo Nível 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="card">
            <h3>Titulo Nível 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
</section>

Uso em Novum

Em novum/mistica os estilos de texto estão separados da semântica de cabeçalhos, sempre defina a semântica correta indicada pelo designer na tech spec de acessibilidade usando a propriedade " as ".

Headline Novum

<!-- Text6 é o estilo de texto e H1 seu valor semântico -->

<Text6 as="h1">Titulo Principal</Text6>

Cabeçalho invisível

Algumas interfaces legadas não aplicavam corretamente os níveis de cabeçalho e por isso já iniciam com h2 ou h3.

Quando não for possível adicionar o H1 ao redesign da interface podemos contornar esse problema, adicionando uma headlines H1 de forma oculta, saiba mais sobre métodos de ocultar elementos.

Black Hat

Em ambientes web abertos ao público, ocultar links pode ser considerado Black Hat e isso afeta penalidades no SEO, se limite a usar apenas em áreas logadas.

headlines invisible

/* Usar apenas em cenário onde não é possível o redesign */
/* Display none ou invisible oculta o elemento para leitores de tela */

.invisible-reader {
    opacity: 0;
    width: 0px;
    height: 0px;
}