Pugですぐできるアクセシビリティに考慮した「target='_blank'」の書き方

外部リンクを新しいタブで開く際、target="_blank"だけではスクリーンリーダーのユーザーに情報が伝わりません。

<a href='https://example.com' target='_blank'>リンクテキスト</a>

title属性で新しいタブでの動作を伝え、rel="noopener noreferrer"を追加してセキュリティも確保するのがベストだと考えます。

Pugを使用している場合、次のような関数を作成し必要な属性を一度に追加することができます。

-
  function blank(){
    return {'target':'_blank', 'title': '外部リンクを新規タブで開きます', 'rel': "noopener noreferrer"}
  }

a(href='https://example.com')&attributes(blank())

これにより、以下のようなHTMLが生成されます。

<a href='https://example.com' target='_blank'　title='外部リンクを新規タブで開きます' rel='noopener noreferrer'>リンク</a>

スクリーンリーダーを使用するユーザーは、「リンクテキスト 外部リンクを新規タブで開きます」という情報を受け取ることができます。