WAI-ARIAのrole属性の"menu"と"navigation"の違い【WAI-ARIA】【アクセシビリティ】

ここ最近、WAI-ARIAについて色々調べているのですが、role属性の「menu」と「navigation」があります。これらの違いはご存知でしょうか？

"menu"と"navigation"は一見、同じような役割を担うのではないかと思ってしまうのですが、これらには違いがあり、当然ながら使う場面によって使い分けが必要です。

"menu"と"navigation"の違い

まずこれらの違いは、roleそのものにあります。具体的に言うと、「menu」はウィジェットrole、「navigation」はランドマークroleです。

ランドマークroleは、こちらの記事でごにょごにょと書いているので、そちらを参考にしていただければと思いますが、ウィジェットroleとは何かということですが。

ウィジェットrole

ウィジェットroleとは、WAI-ARIAからの抜粋ですが、

The following roles act as standalone user interface widgets or as part of larger, composite widgets.

と、あるのですが、簡単に訳すと、

スタンドアロンのユーザインターフェースウィジェット、あるいはより大きな合成ウィジェットの一部の役割をする。

これだけでは、分かりにくいと思いますが、ユーザーインタフェースの一部として使われるものに対してのroleということになります。

menuの役割

実際にどのようにして「menu」を使っていくかということですが、menuの説明には、以下のように記述されています。

メニューは多くの場合、文書またはサイトにとって重要なセクションへのリンクのリストである。menuのロール（role）は、リンクのリストがデスクトップアプリケーションのメニューと同様の形式で示されている場合に適切である。

menuの日本語訳ですが、ポイントは、「リンクのリストがデスクトップアプリケーションのメニューと同様の形式で示されている場合に適切である。」です。

デスクトップアプリケーションと同様なメニューのときに、role="menu"とするわけで、そうでないリンクの集合の時には、role="navigation"とします。

使う場面

"menu"にせよ"navigation"にせよ、使う場面の多くは、グローバルナビゲーションではないでしょうか？

結局どちらもリストやナビゲーションの項目で使うものですので、HTMLでいくとul要素やnav要素です。

ナビゲーションのタイプ

やはりナビゲーションのタイプによって決まります。menuは上記で述べたように、「デスクトップアプリケーションと同様なメニュー」です。WindowsにしろMacにしろアプリのメニュバーを想像してみてください。

ドロップダウン形式のナビゲーションではないでしょうか？

サイトによったら、ドロップダウン形式のナビゲーションを見るかと思いますが、まさにそのときにこの「menu」を使います。

マークアップ

ドロップダウン形式のナビゲーションの場合、li要素の中にul要素を入れたりします。ソースコード自体が結構複雑な感じになるのですが、ドロップダウン形式のナビゲーションのような場合に使うrole属性の値は以下のようになっています。

menubar: menubarのロール（role）は、 Windows、Mac、Gnomeのデスクトップアプリケーションで使われているものに似たメニューバーを作るのに使われる。メニューバーは、よく使われるコマンドに対して一貫性のある環境を作るために使われる。ナビゲーション動作は、一般的なグラフィカルユーザーインタフェースのメニューバーに似た動作とすべきである。
menu: メニューは多くの場合、文書またはサイトにとって重要なセクションへのリンクのリストである。menuのロール（role）は、リンクのリストがデスクトップアプリケーションのメニューと同様の形式で示されている場合に適切である。
menuitem: メニュー項目は、関連したウィジェットであることを示すため、menuのロール（role）を持った要素のなかに置かれるべきである。また、separatorを使ってグループに分けるか、ネイティブのマークアップ言語からの等価のロール（role）を持った要素を使ってグループに分けてもよい。

<nav role="menubar">
<ul role="menu">
  <li role="menuitem">
    メニュー1
    <ul role="menu">
      <li role="menuitem"><a href="#">サブメニュー1-1</a></li>
      <li role="menuitem"><a href="#">サブメニュー1-2</a></li>
      <li role="menuitem"><a href="#">サブメニュー1-3</a></li>
    </ul>
  </li>
  <li role="menuitem">
    メニュー2
    <ul role="menu">
      <li role="menuitem"><a href="#">サブメニュー2-1</a></li>
      <li role="menuitem"><a href="#">サブメニュー2-2</a></li>
      <li role="menuitem"><a href="#">サブメニュー2-3</a></li>
    </ul>
  </li>
  <li role="menuitem">
    メニュー3
    <ul role="menu">
      <li role="menuitem"><a href="#">サブメニュー3-1</a></li>
      <li role="menuitem"><a href="#">サブメニュー3-2</a></li>
    </ul>
  </li>
</ul>
</nav>

今回はHTMLのソースコードだけしか示してませんが、GUIと同様のUIの時に用いるためですので、メニューを表すnav要素に「menubar」を指定し、ul要素自体がメニューになりますので、「menu」を指定、アイテムになるのでli要素に「menuitm」を指定するという感じになるかと思います。

最後に

僕は、今回いろいろ調べてみて、コンテンツによって使い分けが大事だと感じました。それぞれUIのデザイン段階でこのUIの役割は何だというのを最初から認識していく必要がありますね。

今回書いたことがすべて正しいというわけではないと思いますが、このエントリーを通して"menu"と"navigation"の違いを何となくでもお分かりいただけたら幸いです。また、何かおかしな部分があればご指摘ください。

E-riverstyle Vanguard