jQueryを使って、外部サイトへのリンクにtarget=_blankを追加する仕様にしました。

外部へのリンクにtarget=_blank属性を付けることはアクセシビリティの観点から望ましくない。つまり、別ウインドウで開くかどうかはユーザーが判断すべきとされてきましたが、これだけタブブラウザが普及するとかえってアクセシビリティ上よろしくないという気がします。

といって膨大な記事の中から外部へのリンクを探し出して、手書きでtarget=_blank属性を追加するのも大変な作業量です。

そこで、jQueryを使って処理することにしました。

関連リンク

• Wordpress: 外部リンクをtarget=_blankに - blog.eラーニング.co.jp

jQuery (document).ready( function () {
    jQuery ('a[href^=http]')
        .not('[href*="'+location.hostname+'"]')
        .attr({ 
            title: "外部サイトに移動します",
            target: "_blank"
        })
        .addClass("extlink");
})

なお、このサイトでは、別スクリプトにして読みこんでいます。

また、a要素のクラス属性にextlinkというクラスを追加して、外部リンクにだけ外部へのリンクを示す画像を表示させることもできます。

.asset-body a.extlink {      
  display: inline-block;     
  background: #fff url(../images/external.gif) right center no-repeat;
  padding-right: 16px;      
  margin-right: 2px;
}