2019年10月25日

navタグの使い方(補足編)|アクセシビリティを少しだけ考える

navタグの使い方(補足編)|アクセシビリティを少しだけ考える

お世話になっております。佐藤です。

前回はnavタグの使い方に関して基本や僕なりの考えなどを書かせてもらいました。まとめには「神経質に使い方を考えなくても問題ない」とは書きましたが、やはり仕事としてコーディングしている以上、やはり気になりますよね。なので、少しだけですが、補足情報を書いていこうと思います。

もちろん、通常は前回までのnavタグの利用方法で問題ないと思いますが、アクセシビリティの面から考えるとした方がいい事はあります。

アクセシビリティ詳細に関しては別の記事で書こうと思いますが、以下のように定義されています。

アクセシビリティの定義

ウェブ開発におけるアクセシビリティとは、何らかの理由により能力に制約がある場合でも、可能な限り多くの人々がウェブサイトを使用できるようにすることを意味します。”ハードウェア、ソフトウェア、言語、文化、所在地、物理的/精神的能力にかかわらず、ウェブは基本的にすべての人に向けて設計されています。ウェブがこの目的を達成できると、さまざまな聴力、視力、認知能力をもつ人々がウェブにアクセスできるようになります

https://developer.mozilla.org/ja/docs/Web/Accessibility

つまり今日では特に、【誰でも簡単に使えるウェブ】が求められるようになってきています。ウェブの世界でもユニバーサルデザイン*が評価されてきているのです。GoogleのSEO担当者も「アクセシビリティを意識、対策しているサイトは高評価されやすい」と発言しています。UI目線でもみても、SEOの観点からみても、今後アクセシビリティを意識してデザイン、コーディングを行って、サイトやウェブアプリを開発、実装していく事は重要な事です。

*ユニバーサルデザインとは、製品、環境、建物、空間などをあらゆる人が利用できるようにデザインすることです。

アクセシビリティの簡単な紹介をしたところでnavタグの補足情報に戻ります。navタグにはrole="navigation" 属性を使用して navigation ランドマーク*を定義する事でアクセシビリティを高めることが可能な要素です。

ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role

使い方を見ることが一番実感しやすいと思うので、以下のコードを見てください。(MDNで紹介されているコードです。)

<div role="navigation" aria-label="顧客サービス">
  <ul>
    <li><a href="#">ヘルプ</a></li>
    <li><a href="#">注文追跡</a></li>
    <li><a href="#">出荷と配達</a></li>
    <li><a href="#">返品</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">お店を探す</a></li>
  </ul>
</div>

上のような感じでroleとaria-labelを追加することによって、ここはナビゲーションだよと明示的にできるのです。ちなみに弊社のフッターにはこれを採用しています。(navタグを使用した場合は自動的にこういったことを明示してくれています。)

アクセシビリティに関する懸念

これを採用する際にも注意点は存在します。MDNのサイトでは以下のように書かれています。

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role

つまり簡単にまとめると「多用はしないでね。使うべきところに使ってね」ということでしょう。

<h1>タグをいくつまで使用できますかという問いに、Googleのミュラー氏が「As many as you want」=「お好きなように」と答えたように自由なんです。もちろん、ページに1つしか書いてはいけませんよというサイトや考えの人はいますが、厳格な決まりはないんです。ただ、一般的に考えて見出しは階層的につけていくものだろう+いくつも<h1>があるとどれが本当に伝えたい内容なのか分かりづらくなるというだけなんです。

<h1>タグを例に出しましたが、navのランドマークロールは制作者が本当に使いたい場所、使うべき場所に使用しておけば問題ないと思います。

アクセシビリティに関して、完璧な対応は「必要な箇所全てにランドマークなどを付与して明示的にし、分かりやすくする」ことかもしれません。ただ、制作上難しいことも多いと思います。
サイトのユーザーを意識しながらコーディングすることもこれからの時代は求められてくると私は考えております。デザインにもよりますが、ただ単純に(アニメーションもしない)コーディングをする事はそこまで難しくありません。だからこそ「どんなサイトなのか?」、「想定するユーザー」によってコーディングやアクセシビリティをどこまで対応するかという判断や技術、経験がこれからは求められていくと考えております。

私自身、またまだアクセシビリティに関しては学び始めたばかりなので、ご意見等がありましたら、是非ご教授下さい。
以上、navタグの使い方補足でした。