パンくずリストを作ろう入門編

本当に沢山のルールがあります｡ニュースや料理のレシピ､商品やイベント情報など様々なデータが定義されています｡ 今回は､パンくずリストですので､パンくずリストに焦点を当てて紹介していきます｡

興味のある方は､以下googleの構造化データギャラリーも御覧ください｡

構造化データギャラリー

では早速､Microdataを用いたパンくずリストのマークアップを見ていきましょう。

Microdataは､直接HTMLに属性を追加することで､構造化を行います｡

Microdataとは、人やレシピ、イベントや本等Webページ上で共通して登場するもの表現するための記述パターンです。 今回は、パンくずリストを作成しますので、https://schema.org/BreadcrumbListを用いて構造化します。 （今回はMicrodataの入門記事ではありませんので、結果と必要な情報のみを提示します。）

では、先ほど示したパンくずリストをMicrodataを用いて記述したものを見てみましょう。

Microdata

<nav>
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" 
        itemscope itemtype="http://schema.org/ListItem">
         <a itemprop="item" href="/">
             <span itemprop="name">ホーム</span>
         </a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" 
        itemscope itemtype="http://schema.org/ListItem">
         <a itemprop="item" href="/spots/">
             <span itemprop="name">釣りスポット</span>
         </a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" 
        itemscope itemtype="http://schema.org/ListItem">
        < itemprop="name">ルーアン</span>
        <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

では､続いてRDFa（正確には、RDFa Liteです）を用いた構造化の例です｡RDFaも直接HTMLに属性を追加することで､構造化を行います｡

rdfa-lite

<nav>
    <ol vocab="http://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" href="/">
         <span property="name">ホーム</span></a>
         <meta property="position" content="1">
      </li>
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" href="/spots/">
         <span property="name">釣りスポット</span></a>
         <meta property="position" content="2">
      </li>
      <li property="itemListElement" typeof="ListItem">
         <span property="name">ルーアン</span>
         <meta property="position" content="3">
      </li>
    </ol>
</nav>

WAI-ARIAの基本は、HTML要素に適用できる追加の意味を定義しています。

この仕様では、主に次の3つの機能があります。 ロール（Role）属性は意味を、プロパティ（Property）属性は性質を、 ステート（State）属性は状態を定義しています。

これらを使いHTMLに意味付けを行うことができます。

W3Cでは、WAI-ARIAの実装例をWAI-ARIA Authoring Practices 1.1で 公開しております。今回は、パンくずリストの項目について取り上げます。

WAI-ARIA Breadcrumb

では、さっそく先ほどのページのサンプルを見てみましょう。

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="../../">
        WAI-ARIA Authoring Practices 1.1
      </a>
    </li>
    <li>
      <a href="../../#aria_ex">
        Design Patterns
      </a>
    </li>
    <li>
      <a href="../../#breadcrumb">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a aria-current="page" href="./index.html">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>

aria-labelは、nav要素で提供されるナビゲーションのタイプを説明するラベルを提供します。

aria-current="page"は、セット内の最後のリンクに適用され、現在のページを表していることを示します。 (この属性は、a要素にのみ適用されます。)

aria-labelは、サンプルではbreadcrumbとなっていますが、英語表記でかつ日本人にはなじみのない単語です。

実は、オリンピックのウェブサイトでは「現在位置」として表記しています。ここでは、より意味が伝わる「現在位置」を採用します。

また、現在位置を示す文字もURLを指定しハイパーリンクとして書かれていますが、現在位置は一般的にリンクは不要です。 ここでは、hrefを伴わないa要素でマークアップに変更します。

下記例では、「現在位置 ホーム 釣りスポット ルーアン」と音声ブラウザで読まれることになります。

WAI-ARIAを盛り込んだサンプルを提示します。
<nav class="breadcrumb" aria-label="現在位置">
  <ol >
    <li>
      <a href="/">ホーム</a>
    </li>
    <li>
      <a href="/spots/">釣りスポット</a>
    </li>
    <li>
    <a aria-current="page">ルーアン</a>
    </li>
  </ol>
</nav>