Melhorar estrutura de tópicos HTML (document outline)

[fititnt]

O site, na versão atual, tem alguns problemas no document outline.

Por exemplo, para a Home atual, temos "Untitled Section"

https://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fpokemongo.vet.br%2F

[icaromh]

Bom, na verdade tem mesmo sessões sem título. Mas se seguir o layout, ela não possui um "titulo mesmo".

<section id="two" class="wrapper alt style2">
   <section class="spotlight">
     <div class="image"><img src="images/entei.gif" alt="Entei soltando ataque de energia" /></div><div class="content">
       <h2>Acabou a bateria?</h2>
       <p>Eles têm energia infinita! Não precisa recarregar na tomada!</p>
     </div>
   </section>
        ...
</section>

Seria o caso de colocar a tag, mas deixar visível só pra leitores de tela? Particularmente não tenho conhecimento de acessibilidade suficiente pra dizer o que é a melhor prática aqui :|

[woliveiras]

O Google penaliza conteúdo oculto @icaromh. A não ser que exista uma ação na página para exibir esse tal conteúdo, como aqueles botões "ler mais" que exibem o restante de um post.

Teria de existir mesmo um título pra sessão.

[icaromh]

@woliveiras Então seria o caso de ajustar no layout?

Na imagem abaixo tem uma das sections sem header, a unica informação referente a ela é o link "Quero capturar meu pokémon" que tá na section anterior.

[fititnt]

Tenho quase certeza que só não removi a section das classes com wrapper porque isso, no layout atual, causava quebra de CSS. Preferi abrir esse tópico aqui até pra dar chance de mais gente entender esse tipo de problema e me responsabilizo por ajudar até via vídeo conferência algum desenvolvedor front-end que queira treinamento sobre document outline pra entender como resolver isso aqui.

(Nota: já dei palestras sobre acessibilidade e semântica. Não por acaso eu prefiro ir com mais calma com soluções que usam muito javascript e não tenham suporte pleno para mecanismos de busca ou leitores de tela)

[fititnt]

woliveiras commented 3 days ago O Google penaliza conteúdo oculto @icaromh. A não ser que exista uma ação na página para exibir esse tal conteúdo, como aqueles botões "ler mais" que exibem o restante de um post.

Teria de existir mesmo um título pra sessão.

Isso é meio polêmico, mas tem casos aonde, por questão de leitores de tela, é perfeitamente OK usar conteúdo visível apenas para leitores de tela, desde que não haja abuso. Creio que até vou procurar novamente uma fonte respeitável e citar link aqui no futuro, até porque isso é útil para todos os envolvidos.

Uma estratégia está nessa linha aqui https://github.com/alligo/semantic-html-patterns/blob/master/estrutural/outline/html5/exemplo.html#L50

    <!--
       Nota 2: quanto necessário para manter a estrutura do documento sem afetar visual da página, use técnicas
               para exibir conteúdo apenas para leitores de tela

       Erro Típico 2: não use 'visibility: hidden;', 'display:none;' ou 'width:0px;height:0px'
    -->
    <h1 class="screen-reader-only">Título nível 1, visualmente escondido, mas presente no outline</h1>
    <p>Conteúdo D</p>

Isso não quer dizer que, no nosso caso seja colocar um título extra, mas, se fizer sentido ter um seccionamento, faz sentido colocar um título hN. Se esse titulo não deve aparecer visualmente, ele pode aparecer para leitores de tecnologia assistiva.

E sim, o google detecta equivalente ao que leitores de tecnologia assistiva detectam https://github.com/alligo/semantic-html-patterns/blob/master/estrutural/outline/html5/mecanismo-de-busca.md