開発者ツール · HTML WYSIWYG エディター
強力 vs b および em vs i: 編集者にとってセマンティック インライン HTML が重要な理由
· なぜそれが重要なのか
html アクセシビリティ コンテンツ編集可能
セマンティック インライン要素とプレゼンテーション インライン要素の実際的な違い、支援技術と検索エンジンがそれらを使って行うこと、およびエディターが出力するものを確認する方法について説明します。
太字は常に重要であるとは限りません — 外観の前に意味を選択してください
製品コードは、読者がすぐに見つけられるようにするためにのみ太字にすることができます。警告は、その重要性が文の意味に関係しているため、強力である可能性があります。これら 2 つの意図は、デフォルトのスタイルシートでは似ているように見えます。外観だけで選択すると、CSS が変更されたり、別のリーダーが構造を使用したりしたときにマークアップがあいまいになります。
ToolAcre のツールバーはアクションを太字と斜体でラベル付けしますが、サニタイザーは従来の b 要素と i 要素を Strong と em に正規化します。これは強調された散文には便利なデフォルトですが、編集者は選択した単語が装飾ではなく本当に重要性や強調を伝えているかどうかを判断する必要があります。
現在の HTML 仕様の内容 — Strong、em、b、i の現在の意味を要約しています。
強いは、強い重要性、深刻さ、または緊急性を表します。 em は強勢の強調を表し、その配置は解釈に影響を与える可能性があります。 b 要素は重要性を追加せずに注意を引くことができ、i は強調を主張することなく、用語、音声、慣例など、周囲の散文からオフセットされたテキストをマークできます。
実際的な教訓は、2 つのタグが禁止されているということではありません。それは、視覚的な同一性が意味上の違いを消去するものではないということです。 ToolAcre のナロー出力では、strong と em が選択されるため、単にスタイル上のオフセットを必要とするコンテンツは、作成されたツールバー機能ではなく、レビューまたは別の宛先ワークフローが必要になる場合があります。
支援技術はセマンティクスを異なる方法で公開する場合があります。このリポジトリは発表がないことを証明します
支援技術では要素セマンティクスを使用できますが、正確な音声処理は製品、モード、ユーザー構成によって異なります。リポジトリにはスクリーン リーダーの互換性スイートが含まれていないため、この記事は、strong が常に特定の音声でアナウンスされること、または b が常に沈黙することを保証するものではありません。
構造は、スタイル付きスパンに欠けているソフトウェア情報を提供するため、依然として重要です。サポート ポリシーの支援技術を使用して代表的なページをテストします。意味要素は意味のある解釈の機会を生み出します。すべての環境において 1 つの普遍的な聴覚効果を保証するものではありません。
検索効果はこの編集者の証拠の外にあります。セマンティクスは依然として文書構造を改善します
検索エンジンは文書構造を解析できますが、b を Strong に交換することによるランキングの変化を証明するローカル情報源はありません。セマンティック HTML を SEO の公式に変えることは避けてください。検索の可視性は、コンテンツ、リンク、技術的なアクセシビリティ、およびこのエディターの外部にある多くのシステムによって決まります。
セマンティクスを使用する正当な理由は、明確さと相互運用性です。作成者、ブラウザ、およびダウンストリーム変換は、スタイル宣言をリバースエンジニアリングすることなく、意図された重要性または強調点を特定できます。検索結果は、ローカルの書式設定ボタンから推測するのではなく、関連するプラットフォームからの証拠のみを使用して説明する必要があります。
実際にはリストであるリスト - ダッシュと手動の番号付けではなく、引数を <ul> と <ol> に拡張します。
同じ原則がリストにも当てはまります。ハイフンで始まる 3 行は通常のテキストですが、ul と li はピア項目のコレクションを表します。段落の前に入力された数値文字は、シーケンスとオプションの開始値が構造の一部である ol と同等ではありません。
ToolAcre は箇条書きおよび番号付きリストのコマンドを公開し、そのフィルターを通じて ul、ol、および li を許可します。ブラウザ コマンドの動作は、特にネストの場合に異なる場合があるため、リストを作成した後にソースを検査してください。リストのセマンティクスが正しいとしても、ラベルの欠落、順序の混乱、宛先でのサポートされていない深さは許容されません。
作業例: ToolAcre は、フィルタリング中に b を Strong に、i を em にマップします
「スキーマを変更する前にデプロイメントを停止します」と入力し、「デプロイメントを停止する」を選択して、太字を押します。ブラウザーのコマンドは最初に b を作成する可能性がありますが、サニタイザーのエイリアス マップは強力に出力します。斜体は i から em まで同じパターンに従います。ソース モードでは、正規化された結果が表示されます。
ここで、視覚的にのみ強調表示されている製品ラベルを選択します。 ToolAcre には b-only またはクラスベースのアテンション コントロールがなく、マークはツールバー クレームではなく直接ソース編集を通じてのみホワイトリストに登録されます。 「強い」が正確かどうかを判断します。そうでない場合は、この制約されたワークフローの外側で宛先固有のスタイルを使用します。
これでカバーされないもの — ARIA 属性、完全なアクセシビリティ監査、または見出し構造。これについては別途説明します。
この記事では、ARIA、完全なアクセシビリティ監査、見出し階層、または正確な検索エンジンの動作については説明しません。また、許可リストに登録されているすべてのインライン要素にツールバー コントロールがあるとも主張しません。ソース モードでは、有効な場合は u、s、sub、sup、mark、small、code、kbd、samp、var、および abbr を保持できますが、ビジュアル コマンドでは選択肢が少なくなります。
セマンティック タグのフィルタリングでは、公開用に任意の敵対的な HTML をサニタイズしません。 ToolAcre のトークナイザーには、明示的なパーサー差分制限があります。信頼できない送信をレンダリングするサーバーには、適切なパーサーベースのサニタイザーとポリシーが必要ですが、アクセシビリティのレビューでは、この分離されたプレビューだけではなく、最終的な宛先を検査する必要があります。
要点: 意味をフォーマットして確認する — 習慣と、ToolAcre の HTML WYSIWYG エディターが生成された正確な要素を公開する方法を要約します。
意味をフォーマットしてから検査します。 Strong と em は、散文に本当に重要性と強調が含まれている場合に価値があります。これらは、すべての太字または斜体のビジュアルの普遍的な代替品ではありません。 ToolAcre は、各アクションの後にフィルター処理された HTML を公開することで、その選択を可視化します。
ドラフトにはビジュアル コントロールを、検証にはソース モードを、外観には宛先 CSS を使用します。目的のプレゼンテーションに正確なセマンティック要素がない場合は、デザインに似ているという理由だけで誤解を招くタグを強制しないでください。作者の意図をそれを表現できるシステムに保存します。