ランドマークロールについて

よりアクセシブルなサイトを目指すには、HTML5に合わせて実装したいのがWAI-ARIAです。WAI-ARIAは2014年にW3Cの勧告になった、Web Accessibility Initiative (WAI) が策定した技術仕様です。JavaScript、Ajaxなどで動くようなアプリケーションの構造をより適切に、ブラウザやスクリーンリーダーなどの技術支援へ情報をもたらすことを目的としています。インタラクティブなサイトだけでなく、通常のHTML5にプラスして導入することで、よりマシンリーダブルにする期待が持てます。

導入が容易なrole属性、Landmark Roles(role属性には、Landmark Roles、Document Structure RolesWidget Rolesがあります)の仕様をまとめました。

Landmark Roles

ランドマークロールは構造上のランドマーク、目印的な要素を示します。

  • banner:
    ページの序文。<header>にあたる(<h1>を含む)部分。ページに一回だけ使用できる
  • contentinfo:
    ページ、サイト全体の情報を示す部分。<footer>にあたる(著作権に適している)部分。ページに一回だけ使用できる。
  • main:
    メインコンテンツ。ページに一回だけ使用できる。
  • navigation:
    別ページへのナビゲーションに対してのランドマーク。ページに複数回使用できるが、使いすぎないようにする。role=”banner”の中に入れることが出来る。
  • complementary:
    補足的な情報。<aside>にあたる部分。
  • search:
    コンテンツの検索機能を示す。ページ内のフォームの中でも検索部分に使われる。ページに複数回使用できる。
  • form:
    一般的にフォームと機能している部分に対してのランドマーク。入力を必要とする<form>にあたる。(input type=”button”のみには使用しない。)
  • application:
    ページにあるアプリケーション機能、要素について使われる。

実装について

コードの見本。

<body>
  <header class="header" role="banner">
    <h1 class="logo">Landmark Roles</h1>
    <nav class="g_nav" role="navigation">
      <ul>
        <li>nav_item_A</li>
        <li>nav_item_B</li>
        <li>nav_item_C</li>
      </ul>
    </nav>
  </header>
  <section class="contents" role="main">
    <p>Main contents</p>
  </section>
  <aside class="sidebar" role="complementary">
    <p>Side</p>
  </aside>
  <footer class="footer" role="contentinfo">
    <p class="copyrighgt"><small>&#169;luuuing_web</small></p>
  </footer>
</body>

以下のような構成になります。

20510928img02

まだまだ勉強中ですが、勉強の段階に合わせて、当サイトもアクセシビリティ配慮したものにしていきます。

参考サイト、ブログ

参考書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする