【アクセシビリティ配慮】HTMLを用いた電話番号へのリンク設定方法

HTMLで電話番号へのリンクを設定する基本構造

電話番号へのリンクを設定する際の基本構造は以下の通りで、aタグのhref属性にtel:電話番号を入れます。

<a href="tel:01234567890">電話をかける</a>

これによりaタグで囲まれた要素をタップすることでデバイスの電話が起動します。

tel:電話番号部分にはハイフンを入れても入れなくてもどちらでも大丈夫ですが、古いスマホやブラウザを使用している場合、ハイフンを入れることで動作がおかしくなる場合があるので困ったらハイフンを省略してください。

また、上記のコードでは「電話をかける」というテキストをタップして電話を発信できる状態となっていますが、別途imgタグを用いて画像を設定することも可能です。

国際電話番号へリンクさせる場合

国際電話番号へリンクさせる場合は、「+国番号」を電話番号の先頭に付けることでリンクできます。

日本の場合、国番号は81なので電話番号の先頭に付いている0を81に置き換えます。

下記のコードは「012-3456-7890」という電話番号を国際電話対応させたものです。

<a href="tel:+811234567890">+81-12-3456-7890</a>

海外に顧客が存在するサイト以外はほとんど使う機会がないかなと思います。

リンクさせたくない電話番号がある場合

iPhoneやiPadなどiOSデバイスで使用されるブラウザのSafariは、HTML内に電話番号のような文字列がある場合、自動的にリンクを設定する機能があります。

下記のコードをheadタグ内に書くことで自身が設定した電話番号以外にリンクが付くのを防ぐことが出来ます。

<meta name="format-detection" content="telephone=no">

著者

自動リンクはFAXや電話番号らしき数字の文字列にも勝手にリンクを設定するため、筆者は必ず書いています。

HTMLで電話番号リンクを設定する際のアクセシビリティ配慮

ここまでリンクの設定方法を見てきましたが、実際に設定する際には、アクセシビリティの観点からいくつか注意すべき点があります。

スマホでタップした時だけ電話発信可能にする場合の注意点

スマホでタップした時だけ電話発信するために、パソコンではpointer-events: none;を用いてクリックできないようにするという記事が多くありますが、この設定はアクセシビリティ的には不十分です。

なぜならクリックは出来ませんが、キーボード操作は出来てしまうからです。実際に試してみるとわかるかと思いますが、Tabキーでフォーカスし、Enterキーを押して動作させることが出来てしまいます。

この状況を防ぐためにはどうするかというとaタグの中身をspanタグで囲んだものを別途用意しておき、display:noneを用いて切り替えます。

HTMLとCSSコードは下記の通りです。

 <a href="tel:01234567890">012-3456-7890</a>
<span class="pc-tel">012-3456-7890</span>

@media(min-width: 768px){
  a[href^="tel:"]{
    display: none;
  }
}

.pc-tel {
  display: none;
}

@media(min-width: 768px){
  .pc-tel{
    display: block;
  }
}

これは768px以上の画面幅でaタグをdisplay:noneで非表示にし、あらかじめ非表示にしておいたspanタグをdisplay: block;で表示させています。

その他JavaScriptを用いてaタグをspanタグに変更する方法もありますが、ここでは割愛します。

著者

デザインにもよりますが、筆者の経験的にはそもそもパソコンでクリックできる状態であっても問題はないかと思います。

画像だけの電話リンクにする際の注意点

電話番号リンクにはテキストではなく、受話器のアイコンや画像を設定するケースがありますが、適切に設定しない場合、音声読み上げツールを使用している方にとって意味が伝わらない場合があります。

imgタグを使用する場合は下記のようにalt属性に対して適切な文言を設定してください。

<a href="tel:01234567890">
  <img src="phone-icon.png" alt="012-3456-7890に電話をかける">
</a>

ポイントは「電話アイコン」などアイコンの説明ではなく、「012-3456-7890に電話をかける」のように実際に起こる動作を説明するのがポイントです。

万が一画像のパスが切れた際に電話番号が表示されるというメリットもあります。

また、imgタグを使用せずCSSで背景画像に設定した場合はalt属性の代わりにaria-labelを使用することで読み上げが可能になります。

<a href="tel:01234567890" aria-label="012-3456-7890に電話をかける"></a>