Loading article…
HTMLランドマークは、アクセシビリティとSEOを向上させるために、 Webページ上のコンテンツを分類およびグループ化するために使用されます。 [1]
セクション要素
HTML5には、デフォルトのランドマークロールを継承する以下のコンテンツセクション要素が追加されました。[2]
画期的な役割
このrole属性は、ページ上の要素の役割を定義するために使用されます。セクション要素が導入されると、このrole属性はランドマークとしてあまり使用されなくなりました。これは、ほとんどのセクション要素に役割がデフォルトで適用されたため、そのシンプルさから広く使用され、受け入れられたためです。[5]
このrole属性は、コンテンツセクションに役割を割り当てるためだけに使われるのではありません。この属性は他の多くの要素に役割を割り当てるためにも使用できますが、新しいセマンティックHTML要素の登場により、最近ではあまり使われていません。[6]
例
< div role = "banner" >
< h1 >こんにちは、世界！</ h1 >
</ div >
上記のコードは、より広く受け入れられている次のバージョンと同じです。[7]
<ヘッダー>
< h1 >こんにちは、世界! </ h1 >
</ヘッダー>
悪用
HTML5でセクション要素が追加された後、セクション要素にロール属性が必要かどうかについて混乱が生じました。実際、セクション要素にロール属性を与えることは冗長です。[8]
さらに、セクション要素のデフォルトの役割を変更しようとしないでください。[9]
誤用の例
main要素の
の役割は<main>、その役割をすでにデフォルトのランドマーク役割として継承しているため、役に立ちません。
< main role = "main" >
< p >こんにちは、世界！</ p >
</ main >
formにロールを適用することは、のデフォルトのロール<header>を上書きするため、意味的に不適切です。<header>banner
< header role = "form" >
<!--ここに HTML コードをいくつか記述します-->
</ header >
参照
参考文献
- ^ リチャード・クラーク、オリ・スタッドホルム、クリストファー・マーフィー、ディビア・マニアン。『Beginning HTML5 and CSS3』75～81ページ。
- ^ Wood, Adam. 「HTML5: 最新バージョンの HTML の新機能」。HTML.com。2022年 3 月 13 日閲覧。
- ^ abc 「HTML セクショニング要素: ARIA ランドマークの例」。www.w3.org 。2022 年 3 月 13 日閲覧。
- ^ 「ARIA: リージョンロール - アクセシビリティ | MDN」。developer.mozilla.org 。 2022年3月13日閲覧。
- ^ 「Aria を使用しない方法」cccaccessibility.org . 2022 年 3 月 13 日閲覧。
- ^ 「ARIA の使用: ロール、状態、プロパティ - アクセシビリティ | MDN」。developer.mozilla.org 。2022 年 3 月 13 日閲覧。
- ^ 「HTML で ARIA のロール、プロパティ、状態を使用する方法」。Webデザイン Envato Tuts+。2020 年 11 月 17 日。2022年 3 月 13 日閲覧。
- ^ 「WAI-ARIA Authoring Practices 1.1」。www.w3.org 。 2022年3月13日閲覧。
- ^ 「ARIA の使用」www.w3.org . 2022 年 3 月 13 日閲覧。