その「title属性」、本当に必要？アクセシビリティの観点から考える賢い使い方
Web制作を始めたばかりの頃、誰しも一度は「このボタン、マウスを乗せた時に補足説明が出たら親切かも！」と思って、`title`属性をペタペタと貼り付けた経験があるのではないでしょうか。
マウスカーソルを乗せると、ふわりと現れる小さな黒い四角い枠（ツールチップ）。一見すると気の利いたおもてなしのように思えますよね。でも、実はこの`title`属性、「とりあえず付けておけば安心」というものではないんです。
今日は、フロントエンドの現場で「なぜあえて使わないのか？」という議論がよくなされる、この`title`属性の正体と、本当にアクセシビリティを考えた時の「正解」について、一緒に紐解いていきましょう。
—
title属性って、そもそも何をしているの？
`title`属性は、HTMLタグの中に「おまけの情報」を書き加えるためのものです。
マウスカーソルを乗せると、ブラウザが気を利かせて「お問い合わせページへ移動します」というメッセージを表示してくれます。これは、PCでマウスを使っている人にとっては、ちょっとした道しるべになります。
しかし、ここで一度立ち止まって考えてみましょう。「マウスを持っていない人」や「そもそも画面が見えていない人」には、この情報は届いているのでしょうか？
—
盲点！スクリーンリーダーと「見えない壁」
Webの世界には、視覚的に情報を得ることが難しい方々のために、画面の内容を音声で読み上げる「スクリーンリーダー」というツールがあります。
実は、この`title`属性、スクリーンリーダーが必ずしも読み上げてくれるとは限らないのです。
- 不安定な読み上げ: ブラウザの種類やスクリーンリーダーの設定によって、読み上げたり無視されたりします。
- スマホでは見えない: タッチパネルのスマホには「マウスを乗せる（ホバー）」という概念がありません。そのため、スマホで閲覧しているユーザーには、`title`属性の中身は一生見ることができない「隠しメッセージ」になってしまうのです。
これでは、せっかくの親切心が空回りしてしまいますよね。
—
「推奨されない」使い方を知っておこう
現場のエンジニアが「title属性は極力使わない方がいい」と言うのには、明確な理由があります。
1. リンク先の内容をtitleで補足しようとする
「クリック」というテキストリンクに、わざわざ`title=”詳細はこちら”`と付けても、それは単なる情報の重複です。
本当に大切な補足情報なら、最初からテキストとして書いてしまいましょう。 隠す必要はありません。
2. デザインの代替に使う
「画像があるから名前は省略して、title属性に書いておこう」というのはNGです。
画像には`alt`属性（代替テキスト）という、役割が明確に決まった属性があります。`title`でごまかさず、`alt`を適切に設定するのがアクセシビリティの鉄則です。
—
じゃあ、どうすれば親切なWebサイトになるの？
「情報を伝えたい！」というあなたの優しさは、とても素晴らしいものです。その気持ちを、もっと確実な方法で届けてみましょう。
解決策：最初から見える場所に書く
一番シンプルで、誰にとっても優しい方法は、「見出し」や「説明文」としてコンテンツの中に組み込むことです。
これなら、スマホの人も、キーボード操作の人も、スクリーンリーダーを使っている人も、全員が同じ情報を得ることができますよね。
—
まとめ：あなたの優しさを「確実な手段」で届けるために
`title`属性は、決して「悪者」ではありません。しかし、Webサイトを構成するすべてのユーザーに情報を届けるためには、少しだけ工夫が必要です。
- 情報は「隠す」のではなく「見せる」
- スマホや補助ツールを使う人の視点を想像してみる
もし、「どうしてもデザイン的に文字を置けない……！」という場所があるなら、それは`title`属性で解決するのではなく、UIデザインそのものを見直す良いきっかけになるはずです。
最初から完璧にできなくても大丈夫。こうやって一つずつ「誰かにとっての使いやすさ」を考えていくことこそが、一流のフロントエンドエンジニアへの第一歩ですよ。
これからも、その温かい視点を大切にして、素敵なサイトを作っていってくださいね！応援しています。
コメント