アリアランドマークの理解-一般原則と役割

アリアランドマークは、Webページの構造を識別するために、HTML要素に提供されるAIAロールのセットです.私たちがウェブページを訪問するとき、我々は最初からその視覚構造の感覚を得ます、しかし、この構造も我々のマークアップに存在しなければなりません.
いくつかの理由でアリアランドマークを使うべきです.

我々の視覚構造を表す意味的マークアップを得ている.知覚できる内容は意味的に意味のあるランドマークを持つべきです.

キーボードナビゲーションは、画面リーダーのユーザーのためにサポートされています.スクリーンリーダーのユーザーは、そのページ構造に基づいてWebページを移動できます.

我々は両方の画面リーダーのユーザーとため息をつきユーザーのキーボードナビゲーションを強化することができますスキップのリンクを作成することができます.

アリア一般原則

The World Wide Web Consortium (W3C) 私たちを提供していますARIA landmarks general principles .

1：Webページの論理構造を識別する

これが我々のウェブページの構造について本当に考えるべきであることを意味します.我々は、我々のページを知覚できる地域に壊さなければなりません.必要に応じてさらにサブエリアにページを割ることもできます.

2：各領域にランドマークの役割を割り当てる

我々は、我々のウェブページの各々の領域にランドマーク役割を割り当てるべきです.バナー、メイン、補完、およびcontentinfoのような役割は、トップ/ルートレベルランドマークであるべきです.

3 :各領域にラベルを付ける

この原理は、特に補助技術を使用しているユーザーのために非常に重要です.

ウェブページがマークアップに複数のランドマークを持つ場合、各ランドマークのラベルは一意であるべきです.

この例としては、複数のnavigation ランドマーク.我々は、ウェブページ上でプライマリとセカンダリのナビゲーションを持つことができました.だから、それぞれのユニークなラベルを与える必要があります.最初のナビゲーションにはaria-label attribute 値のprimary . 二次ナビゲーションにはアリアラベルがありますsecondary または、どんな文脈でもその文脈で意味をなします.

ランドマークエリアがheading level element その後、我々は提供することができますaria-labelledby attribute その地域へ.

スクリーンリーダーは、我々が現在訪問しているランドマークのタイプを発表します.したがって、要素に提供されているラベルからランドマークを省略できます.

私たちが使用するとき、この例は上で見ることができますPrimary の代わりにPrimary Navigation ラベルで.我々が保つならばPrimary Navigation その後、画面リーダーが発表するPrimary Navigation Navigation これはユーザにとって混乱するかもしれません.
以下にこれらのタイプのラベルの例を示します:

<nav role="navigation" aria-label="primary">
   // code here
</nav>
<nav role="navigation" aria-label="secondary">
   // code here
</nav>
<aside role="complementary" aria-labelledby="notice">
 <h2 id="notice">Site Notice</h2>
</side>

アリアランドマークのリスト

トップレベルランドマーク

トップレベルのランドマークは、他のランドマーク内に含まれていないランドマークの略です.これらのランドマークの各々のために、アリアランドマークデザイン原則は、読む価値があります.

banner - これは、ロゴやサイト検索などのサイト指向コンテンツを表します.このロールは各Webページの先頭に表示されます.

contentinfo - これはWebページのフッターを表すことです.

main - これはウェブページの主な内容を表すことです.

complementary - Webページのサポート内容を表します.

その他の目印

ナビゲーション

地域

フォーム

アプリケーション

サーチ

これらのすべてを読むことができますARIA landmarks W 3ウェブサイトで.

HTML分割要素

HTML 5が導入される前に、我々はこれらのアリアランドマークを要素に適用しなければならなかったでしょうdivs 私たちがマークアップのウェブページの構造を伝えるために.
たとえば、ヘッダーセクションは次のようになります.

<div role="banner" id="header">
  // site-oriented content goes here
</div>

新しい導入されたHTML 5sectioning elements それはデフォルトでアリアランドマークを提供します.
元素
デフォルトランドマーク役割
ケース
メインmain常に
Navnavigation常に
脇にcomplementary常に
ヘッダーbannertop level要素*
フッターcontentinfotop level要素*

The footer 要素にはcontentinfo 役割と役割header 要素にはbanner 彼らが子孫であるときの役割section , main , nav , aside or article 要素.

The section 要素はregion とform 要素はform を使用してアクセス可能なラベルがある場合のみaria-label , aria-labelledby or title 属性.これらの標識方法のいくつかを上に述べた.
これを行動で見ましょう.
我々がホームページを訪問するならばCSS Tricks website ブラウザの開発ツールを開き、その要素パネルに移動します.プレスCmd +オプション+ C(Mac)またはCtrl + Shift + C(Windows、Linux、クロームOS)を開きます.
これはあなたが見るべきことです.

さて、要素パネルにいくつかの要素を見ることができます.我々がページを調べるならば、我々はいくつかの分割要素を見ることができますheader , main , section , and footer . ヘッダーを調べるなら、そのアクセシビリティ情報を見ることなく、その役割について何も見ることができません.
これを行うには、その要素のアクセシビリティパネルを訪問する必要があります.これは私たちのスタイルがある下のメニューになります.
メニューは次のようになります.

をクリックしてAccessibility タブ.その役割について何か気がつきますか.

私たちは、デフォルトでそれが役割を与えられるのを見ることができますbanner . これはheader 要素は、body要素のコンテキストにあるときに、この要素が既に提供しているバナーの役割を持ちます.

ラッピング

執筆時には、Internet Explorer(IE)11、10、および9をサポートしていますmain のみ持つ要素partial support for sectioning elements . 他のブラウザーのサポートは比較的よいです、しかし、より多くの情報のためにCaniuseウェブサイトを参照することは最高です.
ランドマークは、ほとんどの主要な画面リーダーとスコットオハラによってサポートされていますAccessible Landmarks .
すべての要素については、IEバージョン8以降をサポートする必要がある場合は、スタイルをAとしてスタイルにする必要がありますblock レベル要素で、サポートされていない場合は、JavaScriptを使用して要素を作成します.
ブラウザのサポートの要件に応じて、手動でテストするブラウザをテストし、各テストで様々な画面リーダーを使用することが提案されます.
あなたがこのブログを楽しんで、将来的に類似した内容を見たいと思うならば、あるいは、タッチしてくださいHashnode .