Re: CSSでボタンのアクセシビリティを向上させる方法

2017年3月15日 著

CSSでボタンのアクセシビリティを向上させる方法という記事が一部で話題になっているのを見かけて、読んだ感想をTwitterに小分けにして連投していたのですけど、こちらにまとめて覚え書きしておきます。

要点は、記事で紹介されている user-select: none; や -webkit-touch-callout: none; を指定することで向上するのはアクセシビリティではなくユーザビティではないか？ということ、そしてそれは果たしてコンテンツの実装側が対処すべき事案なのか？ということの2点。

（画像ではなく）プレーンテキストをCSSで装飾して作られたボタンをタッチスクリーンでタップしたとき、ボタン内のテキストが選択されたりポップアップメニューが開いてしまうのは、ユーザーがスクリーンを目視でき、かつ指で操作できるという、特定の状況でのこと。

アクセシビリティとは、より多様なユーザーやデバイス、総じて様々な利用状況をひっくるめた前提における使いやすさ（そもそも使えるかどうかを含む）であるからして、ここで論じているのはアクセシビリティではなくユーザビリティと自分には映ります。

もし仮に、これがアクセシビリティを向上させるものなら、同様の実装をもつボタン全てに user-select: none; や -webkit-touch-callout: none; の指定が必須ということになりますが、そうは思えません。多くの場合、それらが新たな問題の種とはなりにくそうな印象ではあるけれど、積極的に指定したいと思えないのは、指定することで別のユーザビリティ上の問題を引き起こす懸念があるからです。

可能性や頻度は低いでしょうけど、何らかの理由でボタン内の文字列をコピーしたり、あるいはボタンを押した結果を新規タブで開きたいニーズもあると思います。そのようなニーズに対し、件のCSSはかえってユーザーに不便を強いることになり、無闇に指定して良いものとは思えません。

自分自身、ボタン内のテキストを選択したりポップアップメニューを開いてしまった経験が（記憶の限りでは）無いのと、そういう事象にユーザーが遭遇している頻度について統計的な情報を持っていないので益々、件のCSSが真にユーザビリティ向上に資するものか、微妙に思えてきます。

件の記事で取り上げている事象は、「どちらかといえば」OS側が対処すべき事案に思えます。どのようなタップがユーザーの意図に即したものか、あるいはそうでないか、OS側が学習し対処して欲しいと思うのです。言うほど簡単では無いかもしれませんけど、指とスクリーンが接触する際に得られる様々なデータと、例えばポップアップメニューが開いた後でそれがキャンセルされる頻度を紐づけるなどして、ユーザーにとっての誤操作を未然に防ぐように進化しないかなぁ、と。

......アクセシビリティおじさんからは、以上です。

[ 2017-03-16 追記 ] 件の記事を書かれたoreoさんが、その後この記事を読んでTwitterで反応してくださいました。さらには、この記事へのリンクを含める形で当該記事に追記・補足をしてくださいました。恐縮です、ありがとうございます。