テンプレート:Abbr
ウィキソースでは、ツールチップを生成するために 2 種類のテンプレートを使用しています。{{abbr}} テンプレートは、省略形(頭字語・略語・頭字語)を展開した意味付きで表記するときに使います。これは HTML の <abbr>...</abbr> 要素のラッパーです。一方、{{tooltip}} テンプレートは、<span>...</span> 要素を使用して一般的な注釈用ツールチップを提供します。
略語(頭字語や頭字語を含む)をマークアップするときは、必ず {{abbr}} または <abbr> を使用してください。 それ以外の目的でツールチップ生成にこれらを用いるのは、HTML 本来の役割を誤用していることになり、アクセシビリティの問題を引き起こします。一般用途のツールチップには {{tooltip}} を使用してください。
モバイル端末の読者はホバー操作ができないため、通常ツールチップの内容を見ることができません。2023 年時点では、英語版 Wikipedia のページビューの多くはデスクトップよりモバイル端末利用者が占めています。[1]
使用法
[編集]{{Abbr|記事中に表示する語句|ポップアップで示す説明文}}
パラメータ
[編集]無名(位置)パラメータ 2 個(必須)と、名前付きパラメータ 3 個(任意)
|1 =– 説明対象の語句。本文中に表示されます。ウィキマークアップは使用できますが、リンク例のようにテンプレート全体をリンクで囲む方が一貫して動作します。|2 =– ツールチップ(ポップアップ)。ウィキマークアップや HTML は使用不可。これは HTML のtitle=属性で生成されるため、HTML や HTML に展開されるマークアップは使えません。たとえば''italics''も不可です。|class =– CSS クラスを 1 つ以上指定(複数の場合は空白区切り)|id =– HTML の ID(ページ内で一意である必要があります)|style =– 表示テキストに適用する CSS(ツールチップには影響なし)。値にスペースを含む場合は単一引用符で囲む必要があります(例:|style = font-family: 'Times New Roman', serif;)
使用例
[編集]| Markup | Renders as |
|---|---|
{{abbr|LSD|Louisiana School for the Deaf}} |
LSD |
デスクトップブラウザでは、"LSD" にポインタを重ねると、Louisiana School for the Deaf のようなツールチップが表示されます。モバイル端末では点線などの視覚的表示がされる場合がありますが、ツールチップは表示されません。視覚障害向けスクリーンリーダーの多くは展開形を自動では読みません(オプション設定があるものもあります)。
アクセシビリティと HTML 妥当性
[編集]{{Abbr}} テンプレートは、略語(頭字語やイニシャリズムを含む)を扱う目的にのみ使用することを意図しています。
Web Content Accessibility Guidelines(WCAG)には、このテンプレートが生成する <abbr> 要素の使用方法に関するガイドラインがあります。詳細は 「H28: abbr 要素および acronym 要素を使って略語の定義を提供する」 を参照してください。HTML 仕様(W3C と WHATWG の両方)では、<abbr> 要素は略語をマークアップするための要素として厳密に定義されています。
これをホバー式ツールチップの生成目的で誤用すると、HTML の意味論的構造(Semantic HTML)を損ない、文書は不正な HTMLとなります(基本的な HTML 検証ツールでは正しくタグが入れ子になっているかしか確認できないため、論理的な意味付けが誤っていても誤検知されず「合格」と判定されてしまいます)。
Template data
[編集]マウスオーバー時にツールチップを表示する略語または頭字語を記述します。
| パラメーター | 説明 | 型 | 状態 | |
|---|---|---|---|---|
| 語句 | 1 | 本文に表示される文字列です。 | 短いテキスト | 必須 |
| 意味 | 2 | マウスオーバー時にツールチップとして表示される文字列です。マークアップは使用できません。 | 文字列 | 必須 |
| CSS | style | パラメータ1の内容に指定したCSSプロパティを適用します。 | 文字列 | 省略可能 |
| クラス | class | 1つ以上のCSSクラスを追加します(複数指定する場合は空白区切り)。 | 文字列 | 省略可能 |
| ID | id | HTMLのid属性を追加します(ページ内で一意である必要があります)。 | 文字列 | 省略可能 |