ウェブアクセシビリティとh1-h6見出し - すべてのコンテンツはこれらのタグの下にある必要がありますか？

Question

ウェブアプリケーションの多くのページの上部には、エラーメッセージと通知、「保存」とその他のボタンがあり、、次に h1タグがコンテンツタイトル付きです。 Webアプリケーションをアクセシブルにする場合、トップレベルの構造タグの上にコンテンツを置くことは、私たちがここで行うように受け入れられますか？

Answer 1

はい（それらの上に置くことができます）。 Hは単に見出しを意味します。それは私が推測する見出しとは何かの問題です。

私の唯一の注意点は、H2は実際にはH1より上にあってはならず、H3はH2より上ではいけません。しかし、私はそれが実際のルールだとは思わない。ウェブサイトにはメニュー、警告、通知がある。それらをコンテンツの残りの部分に配置することは可能です。あなたのコンテンツが論理的に注文されている限り、どのようにアクセシビリティに影響するかはわかりません。 CSSがオフになっているページを見てください。論理的に見えますか？それがアクセシビリティの最も重要な部分です。

マークアップの最後の項目としてメニューがあり、CSSを使用してトップに戻す人もいますが個人的には、その解決策は生産的であることがわかります。メニューはまだ重要です。メニューはページの上部にあります。

Answer 2

はい、ユーザーが情報を取得するのと同じ順序であると考えてください。だから、ちょうど操作をした場合、それに関連するメッセージを最初のものとして得るのは良い考えのように思えます。あなたがやっていることと無関係なページに表示される通知であれば、それはちょっと変わったかもしれないので、上には載せません。 また、スタイルを使用しないテキストブラウザを使用することもできます。適切なヘッダーを持つドキュメントのように見えるはずです。

Answer 3

スクリーンリーダーのユーザーは、メイン見出しの上にあるコンテンツは好きではありません。通常、見出しによってナビゲートするので、エラーメッセージが表示されません。より良い解決策は、エラーメッセージの上にh1見出しを出力し、残りの見出しをそのままにして、2つの見出しを与えます。

Answer 4

見出しタグは、その下位のコンテンツの階層を示すために使用されます。 1つのh1タグしか持たず、ページに表示する最初のコンテンツでなければなりません（これは通常、サイトの名前です）。また、異なる層のコンテンツをドリルダウンするときに見出しタグをスキップしないでください。

あなたの場合でも、htmlの正しい順序である限り、CSSを使用してh1タグの上にアイテムを配置することはできます。

Answer 5

見出しの上にある要素はJavaScriptで使用されているものとします。その場合、ページのソースには含まれていないJavaScriptで作成された方がよいでしょう。

元の質問に戻るには、おそらくページの足元にあることをお勧めします。ただし、CSSを使用して非表示にしている場合は、 "display：none;"または「可視性：隠し;」プロパティは、大部分の（おそらく全ての）スクリーンリーダーや他の多くの支援技術では見られないので、問題ではありません。私はかなり詳細explanation of why accessibility technology ignores such elementsを書いた。

もちろん、誰かがCSSを無効にすると、かなり面倒に見えます。 CSSやJavaScriptが無効になっていても使用できるコンテンツがページにある場合、それらの要素をページの最下部に置くことは、少なくとも物事を混乱させないようにします。