ボタン hover 時のマウスポインター形状

たまたま「Buttons shouldn’t have a hand cursor - Simple = Human」という記事が目に留まり、興味深く読みました。「インクルーシブ HTML + CSS & JavaScript」日本語版の翻訳レビューをしたとき、同書の P.181 で以下の通り紹介されていたのがきっかけです。

<button> がリンクと異なっているもうひとつの点は、pointer カーソルスタイルを持たないことです。アダム・シルバー（Adam Silver）は「Buttons shouldn’t have a hand cursor」の中で、<button> 要素に手動で cursor: pointer を追加することが、ユーザビリティ上の誤りである理由を説明しています。<button> にこのカーソルスタイルを適用するのは標準の動作ではなく、長年続いてきた慣習を破ることにはリスクがあります。

ウェブページに表示されるボタンにおいては、マウスオーバー (hover) 時のマウスポインター形状を「人差し指」型にする (CSS で、button {cursor: pointer;} のように指定する) のは避けるべき、という議論です。「人差し指」型のポインターは、そこが「クリック可能」であることを示すのではなく、あくまでも「リンクである」ことを示すものだから、というのがその理由です。

…といったことを根拠にロジカルに説いていますが、コメント欄を見ると議論が白熱していて興味深いです。個人的には、この記事の主旨は理解できますし、標準仕様をいたずらにハックしないという点で賛成なのですが、以下のように若干気になることもあります。

また昨今では、セマンティクス的にはリンク (<a> 要素) でも、CTA (Call To Action : 行動喚起) として外観をボタンのようにあしらうデザインも多く見られます。hover 時にはマウスポインターが「人差し指」型になるわけですが、こうなると、ボタン然とした UI に対してポインターが「矢印」型のままであることもあれば「人差し指」型に変わるときもある、という具合に「一貫性の無いフィードバックが混在する」ように見えてしまいそうです。大半のユーザーは、HTML 要素の種別にかかわらず、ボタンのようなオブジェクトは一緒くたに「ボタン」と認知するでしょうから、こうしたちょっとしたインタラクションの不一致は、ふとした拍子に「予想外の挙動」として目についてしまい、クリックできるのかできないのか、無駄にユーザーに考えさせてしまう恐れがあります。

きちんとボタンが使えている限りは、マウスポインターの形は「どちらでもよい」のかもしれませんが (コンテンツそのものにエンゲージしてしまうと、マウスポインター形状は案外気にならなくなってしまうからです)、ユーザーの認知/学習負荷をいたずらに高めないようにするためにも、少なくともひとつのウェブサイト (アプリケーション) の中ではデザイン判断として、マウスポインターのスタイリングに一貫性のある定義を設けておきたいところです。議論が分かれそうなトピックではありますが、それだけに、プロジェクト内でどう意識合わせをするか、細かいながらも大きな課題と言えるかもしれません