外部リンクと target 属性

仕事では外部リンクを新窓で開くのは常識の範疇になりますが、状況を変えてみると常識とばかりは言えないかもしれません。実際、「なぜ WordPress では target が使えないのか？」という質問もフォーラムに寄せられていますが、返答はいたって簡単。「XTHML Valid でなくなるからだ」というものです。しかし、これで人を納得させるのは難しい。実際、ウェブページにこれこれの動作を望んでいる人がいて、「Valid でないから」という理由だけで、何の問題もなく動く機能を諦めなければならないというのは受け入れがたいこともありましょう。そこで、今回は target 属性について考えてみるのであります。

単なる個人の経験や好みだけで話をするなら、僕は「そのサイト内での移動は _self でよいが、外部リンクは _blank の方が自然である」と思っています。これは、僕がアダルトサイトのデザイナーだからではなく（笑、逆に _self で遷移されてしまい、痛い目に何度も遭ってきたからです。特に、バックボタンを押すとすぐに元のページへと差し戻されてしまう凶悪なウェブサイトがたくさんあります。アクセシビリティという基準で考えれば、バックボタンを押しても差し戻されてしまうサイトなど、新窓の比ではないと思っています。が、しばしば言われるように、個人のスキルや印象や好みに基づいて、ユーザビリティやアクセシビリティについて語っても水掛け論にしかなりません。たとえバックボタンを押してもすぐに差し戻されてしまうサイトが個人的に凶悪だと感じられようとも、そこにはそれなりの理由があるのかもしれない。

というわけで target 属性の是非について考えるのですが、まず、「XHTML Strict Valid であること」を最終の目標に置かないよう議論したいと思います。かといって、一般ユーザーの要求が常に正しく自然であるという立場にも立たないようにしましょう。その上で、まずはアクセシビリティについて講じている、次のような文章を読んでみましょう。

The one thing every web user understands is the "Back" button. It’s an integral part of browsing the web. Follow a link, go back. Explore a search engine result, go back. Even my father can do this, and he’s still excited when he can double-click the “Internet” icon successfully on the first try.

In all dominant browsers, using the <a target="_blank"> tag to force a link to open in a new window breaks the Back button. The new window does not retain the browser history of the previous window, so the "Back" button is disabled. This is incredibly confusing, even for me, and I’ve been using the web for 10 years. In 2002, it’s amazing that people still do this. Don’t do this. Don’t force links to open in new windows.

「バック」ボタンは、あらゆるウェブ・ブラウザで使える機能だ。これはウェブをブラウズするのに不可欠な機能なのだ。リンクをたどっては戻り、あるいは検索エンジンの結果を調べては立ち戻る。はじめて「インターネット」アイコンをダブルクリックできて喜んでいる、わたしの父親ですらそのようにブラウズしている。

よく使われているブラウザの全てで、<a taraget="_blank"> タグを使ってリンクを新しいウィンドウで開くことは、バックボタンの機能を無効にしてしまっている。新しいウィンドウは、先に開いていたウィンドウの履歴を保持していないので、「バック」ボタンは使えなくなるのだ。これには、10 年もウェブを利用してきたわたしですら、信じられないくらい頭が痛くなる。2002 年のこんにちでもブラウザが新しいウィンドウを開いてしまうのは、まったく驚くべきことだ。こんなことをしてはならない。リンクを新しいウィンドウで開いてはいけないのだ。

"Day 16: Not opening new windows", Dive Into Accessibility: 30 days to a more accessible web site.

筆者である Mark Pilgrim さんは、ブラウジングのときに一つのウィンドウだけで直線的に進んだり戻ったりできることが「良い」という見解を下敷きにしています。それゆえ、僕としてはこのようなタイプの主張には説得力がないと思う。一つのサイトで紹介されている数多くのリンク集を見て回るのに、いちいち shift キーを押しながらクリックするのは両手を使わなくてはならず、煩わしいと感じる人だっている筈ですし、例えば僕は Google の設定で結果ページに表示されるリンク先を新窓で開くようにしています。このように、個人的な好みや習慣だけで他人から拒絶されても抗弁できないような弱い議論には説得力がありません。上記の文章をみても、Pilgrim さんはバックボタンを使えないことが incredibly confusing だと個人的な感想を述べているにすぎず、これをもってアクセシビリティを論じることはできません。なお、すぐあとで、Pilgrim さんは Shift+クリックの代替操作について言及しているため、彼が上記の個人的な経験だけでアクセシビリティを語っているわけではないのは分かりますが、議論の導入としてはまずいやりかただと思います。

アクセシビリティは、英語のスペルが示しているように、ウェブサイトが潜在的に何かを許容する余地があるということを意味しています。リンクをクリックしたときの画面遷移という具体的な場面を想定すれば、そこには下記のような可能性があるでしょう。

• ユーザーが、リンク先は新規ウィンドウで開いてほしいと期待して、target=”_blank” のリンクをクリックする。[ユーザー操作で実現可能]
• ユーザーが、リンク先は同じウィンドウで遷移してほしいと期待して、target=”_blank” のリンクをクリックする。[ユーザー操作では実現不可能]
• ユーザーが、リンク先は新規ウィンドウで開いてほしいと期待して、target 属性のないリンクをクリックする（もちろん base タグも使われていない）。[ユーザー操作で実現可能]
• ユーザーが、リンク先は同じウィンドウで遷移してほしいと期待して、target 属性のないリンクをクリックする（もちろん base タグも使われていない）。[ユーザー操作で実現可能]

これらの状況で、ユーザーの行動に最大の自由度があるのは、もちろん target 属性のない場合です。なぜなら、リンク先を新規ウィンドウで開きたいと思っているユーザーは、たとえ target 属性がなくても、そのリンクを shift キーを押しながらクリックすれば、新規ウィンドウでリンク先を見られるからです。これに対して、target 属性が “_blank” になっている場合、特殊なプラグインを使うようなマニア向けのブラウザならともかく（FireFox とは言っていません、IE エンジンのものでも可能かもしれませんが、いづれにせよそれらはマニア向けでしょう）、標準的なブラウザならばリンク先は必ず新規ウィンドウで開いてしまい、それを回避するショートカットやマウス操作は（一般人が知りうる範囲では）存在しないのです。それゆえ、「リンクというものは同一のウィンドウで遷移すべきだから target 属性をつけてはならない」のではなくて、「できるだけ多数のユーザーがリンク先を自分の意志でどう見るか選択できるようにすべきだから target 属性をつけてはならない」のだという理屈が適当かと思います。

しばしばアクセシビリティやユーザビリティについて誤解されがちなのは、アクセシビリティやユーザビリティは「障害者向け」のデザインでもなければ「初心者にとって使い易い」デザインでもないということです。つまり、可能な限り多くのユーザーに使い易くてアクセスし易いデザインが目的になっている筈なのですが、アクセスビリティやユーザビリティの説明が適切でないと、三流のデザイナーどもには「わざわざ障害者向け・初心者向けに、俺たち（あたしたち）の繊細な Photoshop テクで生み出されたデザインをダサくする」のがアクセシビリティやユーザビリティだと、誤解される可能性が大きいでしょう。

しかし、「障害者向けにデザインするのがアクセシビリティである」といった文言が一貫性を欠いていることは、HTML と CSS の初歩を学んだ人にでも分かることです。例えば、

こんなスタイルの使い方をしたり

↑ [<p style="color: #ffffff;">こんなスタイルの使い方をしたり</p>]

こんなスタイルの使い方をすれば

↑ [<p style="visibility: hidden;">こんなスタイルの使い方をすれば</p>]

視覚障害者にはじゅうぶんアクセシブルであるかもしれませんが、それ以外の人にとっては（聴覚障害者にとってすら）、ぜんぜんアクセシブルではなくなります。