Website Usability Infoでブロックスキップに関するエントリが３月に公開されています。また、それに対して、@kazuhitoさんも返信エントリを公開されています。
Website Usability Infoの公開から2ヶ月が経過がしてしまい、タイミングを逸してしまった感もありますが、ブロックスキップについては、いろいろと考えさせることも多いので、少し自分の考えをまとめておきたいと思います。
目次
そもそもブロックスキップがなぜ必要なのか
スクリーンリーダーユーザーであるか否かに関わらず、そのページのメインコンテンツにたどり着くコストが少なければ少ないほど、そのページは使いやすい、というのがブロックスキップを考える上での大前提です。
視覚機能に問題がなく、マウス等のポインティングデバイスを利用できる人であれば、視覚的にメインコンテンツを認識して、マウスでフォーカスをメインコンテンツに移動させることも容易ですが、スクリーンリーダーユーザーのように、ウェブページ中を１つずつ順番に移動するユーザーにとっては、画面表示時のフォーカスの開始点とメインコンテンツの距離が離れていればいるほど、使いづらくなります。そのようなユーザーにとっって、メインコンテンツに辿り着くコストが高くなる場合は、ブロックスキップのメカニズムを用意する必要があります。
ブロックスキップの実装方法として、WACG達成方法集では、①スキップリンクの設置（G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する）、②見出し要素やARIAランドマーク等による適切にマークアップによる構造化（H69: コンテンツの各セクションの開始位置に見出し要素を提供する、ARIA11: ページの領域を特定するために ARIA ランドマークを使用する）が紹介されていますが、どちらも一長一短で、必ずしも全てのスクリーンユーザーが使いこなせるものではないと感じています。
スキップリンクの有効性
スキップリンクは、ユーザー側からみても、支援技術からみても、ただのページ内リンクにすぎません。同じページ内に大量にリンクが埋め込まれている中では、スキップリンクを機械的に判別する方法はありませんので、リンクテキストの内容から判断するしかありません。スクリーンリーダーユーザーは、Tabキーを連打して、リンクテキストからリンクテキストへとフォーカスを高速で移動することが多いので、そのような操作の中で、大量のリンクに紛れるスキップリンクをリンクテキストの内容からユーザーに判別できるかどうか、です。
スキップリンクのラベルをどう表記するか？誰でも理解できる平易な言語表現が可能か？
ブロックスキップを考える — Website Usability Info
リンクラベルにまつわる課題は大きいと思いますね。リンクラベルはユーザーにとってわかりやすい、遷移先をイメージしやすいものにする必要があるわけですけど、スキップリンクでは特にユーザーに学習コストを強要する結果に陥りがちというか、ユーザーの側からすると、同じサイト内にある複数のページを閲覧した結果としてようやくページ間にある構造上の共通点を学習でき、そこで初めてラベルの意味するところが実用性を伴って伝わるのではないかと思っていて。
Re: ブロックスキップを考える | 覚え書き | @kazuhito
上でお二人が述べられているように、ナビゲーションとしての使用に耐えうる短い言葉で、リンク先を誰でもイメージできる言葉は、なかなか難しいと、個人的にも感じているところです。@kazuhito さんが上で書かれているように、何度か使用してサイトの構造を学習した上でないと、リンクテキストの意味を理解することが難しいことが多いのではないかと思います。
また、スキップリンクは、当然ですが、そのリンクテキストにフォーカスが当たらないと使用できません。スキップリンクの存在に気がつかず、スキップリンクを通過していまうと、当然、そのスキップリンクは活用できません。そこにあると知っていれば、フォーカスをうまく当てる事もできると思いますが、ユーザーは、最初にそのページを開いた時にはそのページの情報を全く持っていませんので、スキップリンクがどこに埋め込まれているかもわからない、そもそもあるかどうかもわからないという状態で、大量のリンクテキストを高速にフォーカスを移動しながら読み上げるわけですので、リンクテキストの内容を判断して、ピタッとフォーカスを当てて、利用するというのは、なかなか大変ではないかと思います。Tabキーを連打して、フォーカスを高速で、しかし、1つずつ順番に移動する場合に、スキップリンクの存在を気がつかずに通過してしまっているケース、多いかもしれません。
ただし、スキップリンクが無用というわけではありません。スクリーンリーダーユーザーのICTスキルにもばらつきはあり、後述する見出し要素間の移動などができない人もいると思います。Tabキーによるフォーカスの移動やリンクテキストにフォーカスをあてた上でリンク先に移動することは、見出しジャンプよりは利用できる方がずっと多いと思いますので、スキップリンクを不要であるとは言い切れない。ユーザーが何度も繰り返し利用するようなウェブサイトでは、自然のページの構造は把握できるでしょうし、スキップリンクの存在も把握するようになりますので、スキップリンクの存在は、ユーザービリティを高める一定の効果はあると思います。
今回は言及しきれませんが、Website Usability Infoでも言及されているように、スクリーンリーダーユーザー以外にも、マウスが使用できず、キーボードだけで操作を完結させたい（あるいはさせる必要がある）ユーザーや、キーボードも使用困難でスイッチ等でウェブを利用するユーザーが存在します。一般のウェブブラウザでは、後述する見出しジャンプ等はできませんので、スキップリンクが視覚的に認知しやすい設計であれば、これらのユーザーにとって、サイトの利便性を大幅に向上させるものになると思います。
見出し要素やARIAランドマーク等による適切にマークアップによる構造化
Website Usability Infoで書かれているように、確認する限り、PC-Talker、NVDA、ナレーター、JAWS、VoiceOverなど、主要なスクリーンリーダーは全て見出し要素間の移動をサポートしています（WAI-ARIA ランドマークのサポートは知りませんでした 汗）。
見出し要素間移動やランドマークの移動は、操作に必要なキーを押せば、フォーカスがどこにあっても使用することができます。スキップリンクのように特定のリンクテキストにフォーカスを当てる必要をユーザーに強いることはありません。スキップリンクなどの特定のサイトの使用に習熟するよりは、支援技術の操作方法というより汎用性の高い手段に習熟したほうがユーザー側にとってメリットが大きいと思います。
と、思うのですが・・・
上で述べたように、スクリーンリーダーユーザーのICTスキルもかなりばらつきがあり、見出し要素間の移動などを使いこなすことができないユーザーも多いと感じています。あくまで私個人が感じた中での話ですが、このあたりは、私が接する機会の多いユーザーが、Webをがんがん利用する方というよりは、DAISYを利用したいために、Web（もっと具体的にはサピエ図書館など）を利用するという方が多く、傾向として高齢の方が多いということがあるかもしれません。スクリーンリーダーを使用するのは、視覚障害者に限りませんが、視覚障害者に限定するなら、視覚障害者の高齢化を非常に進んでいます（参考: 日本の視覚障害者の人口-日本眼科医会の調査より）。ユーザーのICTスキルにかなりばらつきがあることは留意する必要があるのではないかと感じています。
やはり優先すべきは、そもそもソースレベルでのページ設計から
スキップリンクも適切なマークアップによる構造化も全ての人のとっての解決策にはならないように感じます。考えると、やはり考えるべきはページ設計の段階でメインコンテンツへ到達するコストを可能な限り減らすことを検討するべきだと思います。これはスクリーンリーダーユーザーに限定されず、あらゆる、控えめに言っても一般ユーザーを含む幅広いユーザーにとって、ユーザビリティを高めるものと信じます。そう考える私ですので、
コストをかけてスキップリンクを「正しく」設計することに腐心する代わりに、そもそものウェブページ設計において、メインコンテンツ手前のブロック (ナビゲーションメニュー) をコンパクトにすることを検討する、というのも合理的な解決なのかなと考えます。
ブロックスキップを考える — Website Usability Info
@kazuhito さんも「200%同意します」とおっしゃっていますが、私もWebsite Usability Infoのこの意見に完全に同意します。
スキップリンクも適切なマークアップもメインコンテンツへのアクセスを改善しうる方法ではありますが、十分ではないということからもまずは、上の先に考え、追加でスキップの設置を考えるべきなのだろうと思います（適切なマークアップは、ブロックスキップ云々を考える以前に対応すべきということで）。
① メインコンテンツに辿り着くコストをソースレベルで減らすことをまずは考えるべき
② 適切なマークアップによる構造化
それをフォローする形で
③ 必要に応じてスキップリンクを埋め込む
という形が現時点では必要ではないかと考えています。
①が十分であれば、③は不要になりますが、②と③だけでは、上で述べたように①で生じる問題は十分に解決できない、と思う。
スキップリンクを設けなくても、さほどストレスなくメインコンテンツ内をフォーカスできるようになるのではないでしょうか。たとえば 5～7つくらいのメニュー項目で、メインコンテンツにたどり着くまでの [Tab] キーの押下回数が10程度であれば、(サイト独自のスキップリンクの使いかたを学習して操作することと比較しても) そう悪くない気がします。ブロックスキップを考える — Website Usability Info
こちらもほぼ同意で、個人的にも以下のように感じています。もう少しこれは、いろいろな人の意見を聞いてみたいところ。
- Tabキーの押下回数が10程度であれば、つかいやすい。スキップリンクを設けることで、むしろTabキーを押す回数が増えてしまうので、設置の要否そのものを検討するべきレベル
- 20程度でも、ちょっと使いづらいかもしれないけど、スキップリンクの使い方を学習しなくてもTabキーのみで使えるレベル（許容範囲）、ただし、スキップリンクの設置は必要
5以下になると、スクリーンリーダーユーザーにとっては、「超絶使いやすい」といレベルと思いますが、視覚障害者等の利用に特価したサピエ図書館でも一部でしか実現できていません。グローバルナビゲーションをそのものをバッサリ切ってしまうなどしないとなかなか実現できない領域で、そこでまやるとなると、@kazuhito さんの別のエントリの言葉を借りれば、「音声でコンテンツを読み上げさせる、というコンテキストに目一杯寄せた（そういう目的に特化した）デザインは、全体最適化ではなく部分最適化を目指したもの」になるかもしれません。スクリーンリーダーユーザーの利用に特化したサイトであれば、それでも良いと思いますが、幅広いユーザーが利用することを想定するサイトであれば、Website Usability Infoでエントリの最後に以下のように締められているように、サイト全体のコンテンツのあり方を含めて、まずはサイトの構成をシンプルにする方向で検討し、必要な情報をウェブページにシンプルな構造で埋め込めるよう、デザインに落とし込めるとよいのかなと考えています。その方向を追及できるとよいのですが。
メニューの項目数を絞ることはユーザーの認知負荷軽減 (選択のしやすさ) という点でも意義があります。また、メインコンテンツの手前をコンパクトにすることはスモールスクリーン (スマートフォン) でのウェブコンテンツ利用という文脈にもマッチします。対処療法的にスキップリンクに頼らざるを得ないケースもあるかもしれませんが、せっかくならユーザビリティの向上も見据えつつウェブページ設計を最適化することも含めて、考えたいなと思います。
ブロックスキップを考える — Website Usability Info