開発者ツール · HTML WYSIWYG エディター
見出しは大きくない太字: Web コンテンツで見出しレベルが重要な理由
· なぜそれが重要なのか
html アクセシビリティ テキスト編集
h1 から h6 がスクリーン リーダー ユーザーと検索エンジンが依存するドキュメントのアウトラインを形成する理由と、視覚的な見出しが実際の見出しであることを確認する方法について説明します。
見出しのない記事 — 明らかな見出しがすべて太字の段落であるページが開きます。
CSS によって拡大され太字になった行は、ドキュメント ツリー内の段落のままでありながら、セクション見出しのように見えることがあります。目の見える読者はタイポグラフィーから区分を推測するかもしれませんが、ソフトウェアは識別、収集、または移動するための見出し要素を受け取りません。見た目だけで階層が生まれるわけではありません。
ToolAcre はスタイル コントロールを回避し、h1 から h4 までの明示的なブロックの選択肢を提供します。したがって、作成者は、強力なテキストで見出しをシミュレートするのではなく、見出しをエンコードできます。ホワイトリストはソース内の h5 および h6 も受け入れますが、ツールバーはこれらのレベルのコントロールをアドバタイズしません。
見出し要素がサイズを超えて行うこと — 見出し要素が提供する概要、ナビゲーション ショートカット、および構造について説明します
見出し要素は、その後に続くコンテンツにラベルを付け、ナビゲート可能な文書構造に貢献します。ブラウザーはアクセシビリティ API を通じてその役割を公開し、多くの支援ツールは見出しのリストを表示したり、見出しの間を移動したりできます。スタイルシートが存在しない場合、またはスタイルシートが置き換えられた場合でも、要素は識別可能なままです。
太字の段落では、構造上のシグナルがまったく示されていません。それは依然として有用な散文である可能性がありますが、セクションの境界の代わりとなるべきではありません。ローカル プレビューでは見出しの関係がレポートされず、作成者の組織が検証されないため、アウトラインまたはアクセシビリティ検査ツールを使用して最終ドキュメントをテストします。
サイズではなくレベルがネストされています — h2 から h4 へのスキップがリーダーとツールを混乱させる理由を説明します
レベルは、型サイズのメニューではなく、ネストを表します。 h2 は通常、ページの主要なコンテキストの下にセクションを導入します。 h3 はその h2 のサブセクションを導入します。デフォルトのフォントが正しく見えるという理由だけで h4 を選択すると、中間構造が欠落している可能性があります。
ToolAcre は h1 から h6 までを保持し、スキップされたレベルを拒否しません。フィルターは編集ロジックではなく語彙を強制します。紙またはソースでアウトラインを作成し、目的の CSS を使用してレベルを変更せずに外観を制御し、好みの視覚スケールを追求します。
コンテキスト内のページ見出しを選択します。このエディタは one-h1 ルールを強制しません
ワークブックでは 1 つの h1 が規定されていますが、実装にはそのようなルールはなく、この記事では普遍的な法則として h1 を発明するものではありません。ページ テンプレート、埋め込まれたフラグメント、およびドキュメントの規則によって、コンテンツが主見出しを提供するか、ホストによって提供される見出しの下で開始するかが決まります。
フラグメントだけではなく、完全な宛先を検査します。 CMS がすでに記事タイトルを h1 としてレンダリングしている場合、貼り付けられた本文コンテンツは適切には h2 で始まる可能性があります。 ToolAcre はその外側のテンプレートを認識できないため、その h1 オプションはすべてのドラフトに対する推奨事項ではなく、機能です。
作業例: ソース内の太字の段落と見出し要素を比較する
`<p><strong>Installation</strong></p>` と `<h2>Configuration</h2>` を作成します。どちらもサンドボックス内では目立つように見えるかもしれませんが、ソースでは、Configuration のみが見出しであることが明らかになりました。公開されたページのアクセシビリティ ツリー検査でも、同様に h2 のみが見出しとして識別されるはずです。
ブロック セレクターまたはソース モードを使用して、インストールを正しいレベルに変更します。次に、2 つの見出しが同等であるか、親子であるかを確認します。サニタイザーは両方の形式を保存しますが、言葉から関係を判断することはできません。その判断はドキュメントの作成者とページのコンテキストに属します。
レベルを乱用せずに見出しをスタイリングする — レベルの選択ではなく CSS が外観を制御する必要があることを説明します
見出しの外観は CSS に属します。デザインが階層を伝えている限り、サイトでは、論理レベルを維持しながら、h2 を控えめにし、h3 を視覚的に特徴付けることができます。正しい h2 のスタイルを設定することは、単に小さいブラウザーのデフォルトを取得するために h4 を置き換えるよりも安全です。
プレビューのスタイルシートは意図的にシンプルかつ軽量になっています。これは製品のテーマではないため、デフォルトの見出しの寸法は宛先デザインの証拠としては不十分です。セマンティック フラグメントをコピーし、承認されたスタイルをそこに適用し、1 つの分離されたビューを満たすようにアウトラインを書き換えることなく、応答動作を確認します。
これでカバーされないもの — <section> や <article> などのセクション要素、または構造を超えた SEO
この記事では、セクションと記事の要素、ARIA 見出しの役割、完全な SEO ガイダンス、またはすべてのスクリーン リーダーについては説明しません。また、ToolAcre がスキップされたレベル、タイトルの重複、見出しテキストの品質を検証しているとは主張していません。ツールバーは要素を提供します。著者は一貫した構造を提供します。
サニタイズされた出力は、自動的に安全で信頼できない出版物にはなりません。プレビュー サンドボックスは ToolAcre 内での実行を制限しますが、コピーされたマークアップはその保護を残します。目的地側の衛生状態とアクセシビリティのテストを使用します。正しい見出しツリーは品質の 1 つの側面であり、セキュリティ管理や完全な監査ではありません。
要点: 構造が最初、スタイルが 2 番目 — ルールと、ToolAcre の HTML WYSIWYG エディターを使用して視覚的な見出しの背後にあるマークアップが見出し要素であるかどうかを確認する方法を要約します。
構造が最初、スタイルが 2 番目です。どのトピックがセクションとサブセクションであるかを決定し、その関係からレベルを割り当てて、ToolAcre が出力する実際の h 要素を検査します。見出しは、フォント、色、間隔が消えても意味のあるものでなければなりません。
最後に、フラグメントを実際のテンプレート内に配置し、結合された階層を確認します。ローカル編集者は、外側のページのタイトルやナビゲーション シェルを知ることができません。その価値は透明性です。視覚的な書式設定とソースが隣り合って配置されているため、公開前に偽の見出しを検出しやすくなります。