これは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要素内のラベル(フジオ・プロ)にはこの属性指定がされておらず、ここは音声読み上げの対象になります。

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

フジオ・プロ

関連項目

編集