外部リンクを分かりやすく

利用者の意思に反して、又は利用者が認識若しくは予期することが困難な形で、ページ全部若しくは一部を自動的に更新したり、別のページに移動したり、又は新しいページを開いたりしてはならない。
-webコンテンツJIS 5.3.e

参考サイト:情報バリアフリー分野の日本工業規格の制定 – 経済産業省報道発表資料

XHTMLではa要素のtarget属性値「_blank」が非推奨、xhtml1.1では廃止されていますが、上に挙げた規格のように利用者のアクセシビリティを疎外する可能性があるからだと思われます。

ユーザーへの配慮の気持ちも込めて、外部リンクに「_blank」を指定して外部リンクであることを示す例は多いと思いますが、言われてみれば突然別ウィンドウが立ち上がるのはストレスが溜まる要因になり得ます。タブブラウザを使って同一ウィンドウで開いてゆくのが習慣化するとそこら辺の考えはどうでもよくなってくるわけですが、誰もが同じ環境で閲覧しているということは絶対にない。リンク先が同じウィンドウで表示される可能性は予測できても、「もしリンク先が別ウィンドウで開く場合、どのリンク先が別ウィンドウで開くか」を予測することは困難。「閲覧の主導権はユーザーあるべきだ」というのがこれらアクセシビリティの基本です。・・たぶん。

「_blank」自体が推奨されないわけで、代替するXHTMLのマークアップやCSSの要素はありません。とはいえ、内と外の区別はしてみたいな、ということで外部リンクの下線をドットにして、アイコンを付けてみました。aにクラスの付け加え。CSSの:after+contentでスマートかつ楽に実現できるようですが、IEが対応していません。

XHTMLでなくとも、いきなり別ウィンドウ(あるいは別タブ)で開くよりは、こうやって事前に外部リンクを目視できるようにするのもよいのではないでしょうかね。

アイコンはAKIさんの.pngな素材屋さんから頂戴しました。暫定的に使おうと思っていましたが、かなりマッチしている(自分で言うな)のでこのままでいきます。

in Note