Template:Accessible URL

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

これはURLについてのアクセシビリティの改善を図るものです。

多くの場合 URL文字列はそれ自体では可読性に劣るため、自然言語表記のラベルで代替されます。スクリーン表示型のユーザーエージェントの場合、クリック（またはタップ）できればよいので、URL文字列が表示されていなくても問題ありません。

しかし、ウィキペディア記事の閲覧する方法として、記事を印刷したものを読んだり、画面キャプチャや（ハイパーリンクが無効の）PDF形式に変換したものを読むことがあります。このような閲覧者にとっては代替ラベルだけではURLが分からないことになります。そのため、これらの閲覧者のためにはURL文字列はそのまま表示させなければなりません。

その一方で、音声読み上げ式ユーザーエージェントにとっては、URL文字列の読み上げは閲覧の障害でしかありません。

このテンプレートはこれらの事情を考慮して、URL文字列を表示しつつ、音声読み上げ式ユーザーエージェントが読み上げないようなHTMLマークアップを生成します。

使い方

{{Accessible URL|URL|ラベル}}

使用例と技術的解説

{{Accessible URL|http://www.fujio-pro.co.jp/|フジオ・プロ}}

この記述で、下記のHTMLコードが生成されます。

<span style="speak:none" aria-hidden="true"><a rel="nofollow" class="external free" href="http://www.fujio-pro.co.jp/">http://www.fujio-pro.co.jp/</a></span> — <a rel="nofollow" class="external text" href="http://www.fujio-pro.co.jp/">フジオ・プロ</a>

一つ目の a 要素を包む span 要素の属性 style="speak:none" aria-hidden="true" がURL文字列（http://www.fujio-pro.co.jp/）の音声読み上げを抑止するマークアップになっています。二つ目の a 要素内のラベル（フジオ・プロ）にはこの属性指定がされておらず、ここは音声読み上げの対象になります。

これはこのようにレンダリングされます。

http://www.fujio-pro.co.jp/ — フジオ・プロ

関連項目

• {{URL}}
• {{Official URL}}
• {{Official Website}}

この解説は、Template:Accessible URL/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。