こんにちは！Office163のあべちゃんです！

ウェブ制作ではよくテキストリンク（文字にハイパーリンクを設置）を使用しますよね。
リンクなので、もちろんクリック先には別ページなり別記事が存在します。
そのため、テキストリンクはリンク先がわかるような言葉を使用することが望ましいです。

ですが、場合によってはテキストリンクの表記を「こちら」のように予測できない文字で設置しなければならない時もあるかもしれません。
そんな時、title属性を使いリンク先の補足をつけてあげることができます！
今回はその方法と注意点をお伝えします。

リンク文字に「こちら」を使ってはいけない理由

テキストリンクは、本来そのリンク先についての情報が記載されるべきであると考えます。
以下文章を見比べてください。

• 昨日はフェニックス自然動物園に行きました
• 昨日はこちらの動物園に行きました

「昨日はフェニックス自然動物園に行きました」という文章では「リンクをクリックするとフェニックス自然動物園のサイトに移動するのだろう」と想像ができますね。
ですが「昨日はこちらの動物園に行きました」という文章の場合、リンク先がどこなのか想像できませんね。
その為、テキストリンクではリンク先を明記するとユーザーに親切です。

ですが、デザインデータ上必ずしもテキストリンクがリンク先を現しているとは限りません。
そのような場合、テキストリンクにツールチップを表示して補足情報をユーザーに伝える方法があります。

ツールチップとは

ツールチップとは要素をマウスオーバー（ホバー）した時に要素の近くに表示される補足情報のことです。
以下画像の赤枠で囲った箇所がツールチップです。

ツールチップはtitle属性を利用することで表示させることができます。
今回はテキストリンクに補足情報をつけるため、a要素（アンカー要素）にtitle属性を指定します。

title属性とは

title属性はヒントや補足情報をつけ加えたい時に使用する属性です。

title属性はグローバル属性で、全てのタグに使用することができます。
グローバル属性とは、全てのHTML要素で使用できる属性を指します。
例えばclassやidもグローバル属性です。

title属性は補足情報に使用すると書きましたが、一部のタグでは特別な意味を持つようになる為注意してください。

参考サイト：title | MDN

title属性の書き方

a要素でtitle属性を利用する場合、コードの記述は以下になります。
今回はテキストリンクに対する補足説明の為a要素にはhref属性も追加しています。

<a href="リンク先アドレス" title="補足内容">リンクで使用する言葉</a>

実際に記載したコードも準備しました。
title属性を使用したa要素と使用していないa要素を用意したので、マウスオーバー時の状態の違いを確認をしてみてください。

See the Pen a_title01 by TECK-TOPPA (@teck-toppa) on CodePen.

下のリンクをホバーをして数秒待つと、カーソルの下にツールチップが出てtitleに記載した情報が表示されたと思います。
これで「こちら」とは「美ら海水族館」であると補足することができました。

リンク以外でtitle属性を使う例

title属性はグローバル属性とお伝えしたとおり、他にもこのような使用例があります。

例１：略語の正式名称

USAに対して「United States of America」と正式名称を表示する。

See the Pen a_title02 by TECK-TOPPA (@teck-toppa) on CodePen.

例２：画像情報

画像に「制作者」「撮影者」などの情報を追加する

See the Pen a_title03 by TECK-TOPPA (@teck-toppa) on CodePen.

使用上の注意点

title属性には注意点がありキーボードのみで閲覧しているユーザーやスマートフォンなどのタッチデバイスではツールチップが表示されません。
たとえばマウスが壊れた場合、ウェブサイトをキーボードの「tabキー」や「矢印キー」で操作することができます。
しかし、キーボードでは「マウスオーバー」の状態の再現することができないので、ツールチップは表示されません。
同じくタッチデバイスも、マウスオーバーの状態を再現できない為、ツールチップが表示されません。

このようにユーザーの操作状況や使用デバイスによってウェブサイトから得られる情報が変わることは好ましくありません。
ユーザビリティやモバイルファーストを考慮し、テキストリンクを利用する場合は極力テキストだけで完結できるデザインを意識することも大事はないでしょうか。

まとめ

ユーザーに親切なウェブサイト制作には、小さな積み重ねが必要だと実感しますね！
知識を積み重ねて頑張りましょう！

ライター

あべちゃん

コーディングを中心にウェブ制作を行なっています。初心者さんに寄り添った記事作成を心がけています。タコスが好きで、トウモロコシ粉を常にストックしています。