最近のドキュメント概要Chatterのまとめ

ソースノード: 1586057

HTMLの見出しが話題になるのは日常茶飯事ではありません de jour、 しかし、保存されたリンクの私のフォルダは、に関する記事を蓄積しています 最近マージされました WHATWGLivingStandardのドキュメントアウトラインアルゴリズムの削除。

まず、アルゴリズムが実際には存在しなかったことを知っておく必要があります。 確かに、それは仕様に含まれていました。 そして確かに、仕様でそれを使用することについての警告がありました。 しかし、ブラウザがそれを実装したことはありません。 ブルース・ローソンは私たちに思い出させました。 私たちはずっとフラットなドキュメント構造で生活してきました。

これは 非常に 古いニュース。 エイドリアン・ロゼリは、文書の概要の神話について書いています 2013から。 しかし、それは彼の2016年の投稿です。 「ドキュメントアウトラインアルゴリズムはありません」 それは包括的にそれを詳しく説明し、私たちをここに導いた会話と闘争についてのコンテキストの追加のナゲットで定期的に更新されています。 これは本当に物語の最高のタイムラインです。 アメリアベラミーロイズも ジレンマのルーツを掘り下げた 過去にここCSS-トリックで。

私の心は、セクショニングをサポートするドキュメントアウトラインアルゴリズムの作成に費やされたすべての作業に即座に行きます。 仕様からそれを削除することは確かに正しい要求ですが、それが現在いくつかのバージョン履歴に埋もれているとしても、それに費やされた大変な努力を損なうものではありません。 私はまた、アルゴリズムが間近に迫っていることを期待して、時間の経過とともに誤ってアルゴリズムについて書いたすべての善意の人々について考えます(このサイトを含む!)。 行動の欠如と思われるものから私たちが生じた精神的および技術的負債はXNUMX年近くあります。

アルゴリズムが公式になくなったという「ニュース」を過ぎて見て、ブルースはジェネリックがないことを嘆きます <h> 正しい見出しレベルを生成するためにセクション化できる要素など。 同意します。 持っている <h1> 要素は本質的に露出したものとして存在します <title> 特に、ページが単一のトップレベルの見出しを持つ単一の記事を中心に構成されることはめったにないため、制約があります。 ある種のカードコンポーネントを作成するたびに、自分がウインクすることがよくあります。 <h3> 技術的には正しいかもしれませんが、故障しているように感じます。 そして、それは、低い見出しレベルが明確な高い見出しレベルのように見える必要があるスタイリングの考慮事項について話す前です。

見出しレベルの管理について言えば、Steve Faulkner(仕様からアルゴリズムを取り出したPRを作成した)には、 使用の超実用的な概要 <hgroup> 素子 小見出し、サブタイトル、代替タイトル、sndタグラインを含む見出しパターンを処理するため。 野生でこのようなマークアップを見たことがあると思います。

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

それは、見出しレベルによって駆動されるフラットなドキュメントのアウトラインとは相容れません。 これらの見出しはそれぞれ、情報の階層を形成するセクションを表しています。

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

代わりに必要なのは グループヘッド 見出しの。 キュー <hgroup> 素子:

内にネストされている場合 <hgroup> 要素、 <p> 要素のコンテンツは、ドキュメントのアウトラインに含まれていない小見出し、代替タイトル、またはタグラインを表します。

したがって、次の構造が得られます。

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> is role=generic 現時点では、しかしスティーブ 提案を指す それをマップすることができます role=group。 それが起こった場合、アクセシビリティツリーにより、支援技術者は、それらの段落に、それらがそうであるサブタイトルおよびタグライン部分として、より意味的な意味を割り当てることができます。 簡単そうに聞こえますが、スティーブは邪魔になっている課題に注意します。 彼はまた、この種のパターンをARIA属性を使用して今日どのように実装できるかをデモします。

切り上げている限り、MatthiasOttはいくつかのヒントを公開しました。 見出し付きの構造化されたアウトラインの作成。 見出しの概要を確認するためのツールのすばらしいリストについては、最後を確認してください。

タイムスタンプ:

より多くの CSSトリック