Ｌａｎｄｍａｒｋ（ランドマーク）Ｒｏｌｅｓ実装方法

Ｌａｎｄｍａｒｋ（ランドマーク）Ｒｏｌｅｓの実装方法は、ＨＴＭＬの要素に「role属性」を付記して、文書構造の意味を支援技術に伝え、Ｗｅｂアクセスビティの向上を図ります。

Ｌａｎｄｍａｒｋ（ランドマーク）Ｒｏｌｅｓの種類

banner（バナー）
サイト名・サイトのロゴ・ナビ・検索機能が含まれる「ヘッダー」部分に使用します。

form（フォーム）
ユーザー側で入力を行なう「フォーム」部分に使用します。

search（サーチ）
「検索機能」部分に使用します。

main（メイン）
「メインコンテンツ」部分に使用します。

application（アプリケーション）
Ｗｅｂドキュメントと異なり「Ｗｅｂアプリケーション」領域に使用します。

navigation（ナビケーション）
関連ドキュメントをナビケートする「nav要素」に使用します。

complementary（カンプルメントリー）
メインコンテンツを補完する「補完的」な領域に使用します。

contentinfo（コンテンツインフォ）
ドキュメントの情報を表す領域で「footer要素」に使用します。

ＨＴＭＬ５にＬａｎｄｍａｒｋ（ランドマーク）Ｒｏｌｅｓを実装した例

ＨＴＭＬソース

「ヘッダー」
<header>　
<p role="banner">サイト名</p>
</header>

「中央」
<main>　
<div role="main">
  ・・・メインコンテンツ・・・
</div>
</main>

「左サイドバー」
<nav>　
<div role="navigation">
　・・・ul・li要素・・・
</div>
</nav>

「右サイドバー」
<aside>
<div role="search">
　・・・サイト内検索・・・
</div>
<div role="complementary">
　・・・Ａｄ・・・
</div>
</aside>　

「フッター」
<footer>　
<address>
<p role="contentinfo">・・・製作者の連絡先・・・</p>
</address>
<p role="contentinfo"><small>・・・著作権表示・・・</small></p>
</footer>

WAI-ARIA実装方法 に戻る

ホームページ作成方法 TOPに戻る