ここで明示的に無効化されたインタラクティブ要素とは、見た目から無効化されているとユーザーが判断できるテキストフィールドやボタンのことである。

ツールチップが利用される理由

無効化されたインタラクティブ要素にツールチップを表示することで、ユーザーの理解を促進することや、なぜ無効化されているのか分からないという状態をケアできる。

またツールチップを多用しているサイトでは、ホバーすればヒントを見れるという一貫したユーザー体験を与えられるかもしれない。

加えて、ツールチップを加える場合、文章がホバーされるまで表示されないため、画面が混雑することを避けることも出来る。

ツールチップを利用する問題点

これらの問題のいくつかは今回のケースに限らず発生する。そのためTooltipを使わずに済むのであれば、基本的に使わないことを推奨する。表示する情報の価値が、ユーザーが認識しなくても別に構わない程度であれば利用しても良い。

ユーザー体験の一貫性の欠如

ユーザーは、無効化された要素がクリックやフォーカスを受け付けないことを期待するが、ツールチップが表示されると、その期待が裏切られることがなる。

アクセシビリティの問題

スクリーンリーダーを使用するユーザーやキーボードのみで操作するユーザーにとって、無効化された要素は通常、操作の対象外と認識されるべきである。ツールチップを表示することで、誤解や混乱を招く可能性がある。

デザインの一貫性の欠如

ツールチップは、通常、有効な要素に対して情報を提供するためのものである。無効化された要素に表示されることで、デザイン全体の一貫性や視覚的な整合性が損なわれる可能性がある

実装上の問題

インタラクティブ要素であるinputやbuttonなどはdisabled属性を付けた場合、フォーカスやホバーなどのイベントが無効化されるため、アクセシビリティなどを考えると様々な対応が必要になる。余分な要素でインタラクティブ要素をラップする、disabled属性を疑似的に表現する、disabledでもフォーカスが当たるようにするなど。

ツールチップの代替手段

無効化された要素にツールチップを表示する代わりに、要素の近くにテキストで説明を追加することで代替できる。

例えば、次のような対応が考えられる。

• テキストフィールドのラベルやヘルパーテキストに理由を表示する。
• ボタンの付近に理由を表示する。
• ボタンを押してから、理由を付近に表示する。

このようにすると、代替できるだけでなく、ツールチップで表示する場合と異なり、無効化されている理由や対応手段を明確にすぐに伝えることが出来る。