Não é todo dia que os títulos HTML são o assunto de hoje, mas minha pasta de links salvos está acumulando artigos sobre o recentemente fundido remoção do algoritmo de esboço de documento no WHATWG Living Standard.
Em primeiro lugar, você deve saber que o algoritmo nunca existiu de verdade. Claro, estava nas especificações. E claro, havia um aviso sobre seu uso nas especificações. Mas nenhum navegador jamais o implementou, como Bruce Lawson nos lembrou. Vivemos em uma estrutura de documentos plana o tempo todo.
Isto é muito Noticias antigas. Adrian Roselli tem escrito sobre o mito do esboço do documento desde 2013. Mas é sua postagem de 2016 intitulada “Não existe algoritmo de esboço de documento” que explica tudo de forma abrangente e é atualizado regularmente com informações extras de contexto sobre as conversas e lutas que nos trouxeram até aqui. Esta é realmente a melhor linha do tempo da saga. Amelia Bellamy-Royds também mergulhou nas raízes do dilema no passado aqui no CSS-Tricks.
Minha mente se volta instantaneamente para todo o trabalho necessário para criar um algoritmo de esboço de documento que suporte o seccionamento. Removê-lo das especificações é a decisão certa, com certeza, mas não diminui os esforços hercúleos que foram feitos, mesmo que agora esteja enterrado em algum histórico de versões. Também penso em todas as pessoas bem-intencionadas que escreveram erroneamente sobre o algoritmo ao longo do tempo (inclusive neste mesmo site!) com a expectativa de que ele estivesse chegando. Há quase sete anos de dívida mental e técnica que acumulamos devido ao que parece ser uma falta de ação.
Olhando além da “notícia” de que o algoritmo oficialmente não existe mais, Bruce lamenta que não exista um algoritmo genérico <h> elemento ou algo semelhante que pode ser seccionado para produzir o nível de título correto. Concordo. Ter um <h1> elemento existe essencialmente como um elemento exposto <title> é restritivo, especialmente porque as páginas raramente são estruturadas em torno de um único artigo com um único título de nível superior. Muitas vezes me pego estremecendo toda vez que estou fazendo algum tipo de componente de cartão onde uso <h3> pode estar tecnicamente correto, mas parece fora de ordem. E isso antes mesmo de falarmos sobre as considerações de estilo em que um nível de título inferior agora precisa se parecer com um nível de título superior distinto.
Falando em gerenciamento de nível de título, Steve Faulkner (autor do PR que extraiu o algoritmo das especificações) tem um visão geral super prática do uso do <hgroup> elemento para lidar com padrões de títulos que envolvem subtítulos, legendas, títulos alternativos e slogans. Tenho certeza que você já viu marcações como esta por aí:
<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>Isso não combina com um esboço de documento plano que é orientado por níveis de título. Cada um desses títulos representa uma seção que forma uma hierarquia de informações:
Disappointingly Average
└── The Autobiography of Geoff Graham
└── by Geoff GrahamO que queremos, em vez disso, é um grupo de títulos. Deixe o <hgroup> elemento:
Quando aninhado dentro de um
<hgroup>elemento, o<p>o conteúdo do elemento representa um subtítulo, título alternativo ou slogan que não está incluído no esboço do documento.
Então, obtemos esta estrutura:
<hgroup>
<h1>Disappointingly Average</h1>
<p>The Autobiography of Geoff Graham</p>
<p>by Geoff Graham</p>
</hgroup><hgroup> is role=generic no momento, mas Steve aponta para uma proposta que poderia mapeá-lo para role=group. Se isso acontecer, a árvore de acessibilidade permitirá que a tecnologia assistiva atribua mais significado semântico a esses parágrafos, assim como as partes do subtítulo e do slogan que eles são. Parece fácil, mas Steve observa os desafios que estão no caminho. Ele também demonstra como esse tipo de padrão poderia ser implementado hoje com atributos ARIA.
Já que estamos resumindo, Matthias Ott publicou algumas dicas sobre criando um esboço estruturado com títulos. Confira no final uma ótima lista de ferramentas para verificar os contornos do título.
