CSSでボタンのアクセシビリティを向上させる方法(追記有り) #HTML

レイアウトを整える事が本来の目的であるCSSですが、このCSSでボタンにおけるイケてない点を解決して、ユーザーのアクセシビリティの向上を図ります。

イケてないポイント1 (テキスト選択編)

iOSやAndroid等のスマートフォンでボタンを押下しようとした時に、ボタン内のテキストが選択できてしまう問題。
次ページへのリンクであるならまだしも、登録や予約に関するボタンであった場合、コンバージョンやユーザー体験において悪影響を及ぼす影響がある。イケてない。

解決策

対象のボタンに対してuser-select: noneを指定する事でユーザーがテキストの選択をできないようにする事ができる。

css

.btn {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

user-select: noneはテキストのみならず画像に対しても有効である為、不用意に画像の保存をさせたくない場合に設定して対処する事ができる。

イケてないポイント2 (ポップアップメニュー編)

スマートフォンでボタンを押下しようとした際に誤って長押しをしてしまい、ポップアップメニューが表示されてしまう問題。
課題1と同様に、コンバージョンやユーザー体験において悪影響を及ぼす影響がある。できることなら誤って長押ししても何も起こらないように変更したい。イケてない。

解決策

対象のボタンに対して-webkit-touch-callout: noneを指定する事でポップアップメニューを出さないように設定する事ができる。-webkit-touch-calloutはChrome及びSafariの独自仕様である為、使用の際にはベンダープレフィックスが必要となる。

css

.btn {
  -webkit-touch-callout: none;
}

上記2つの問題に汎用的に立ち向かう

私はユニバーサルセレクタやa, button等の要素セレクタで選択やメニューの表示を一括拒否指定するのは、必要な部分までコピーをできなくさせてしまう為にあまり良くない解決方法だと考えています。
そこで自身は解決策1, 2をまとめてmixin化して対処しています。mixin化をして、必要な部分のみでmixinをincludeする事で汎用性やメンテナブルに富んだ解決ができると考えて実践しています。

scss

@mixin selectNone {
  //選択制御
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  //ポップアップメニュー表示制御
   -webkit-touch-callout: none;
}

上記のボタンの挙動やmixinは下記のリンクから確認する事ができます。
CodePen - サンプル

終わりに

記事を書いている中での気づきとして、Qiita内の「いいねボタン」等のボタンではちゃんとuser-select: noneが指定されていました。流石ですね。
これまで自分自身がSPレイアウトのアクセシビリティをいかに疎かにしているかを執筆を通して思い知りました。webサービスやwebアプリケーションではユーザーの体験をより良い物にする為に特に重点的に気を配って上記の問題に対処したいと思います。

追記(2017年3月16日)

当記事を投稿してから2週間が経過しました。この期間で多くの方に当記事を拝読して頂くと共に100件以上の「いいね」をいただきました。本当にありがとうございます。

当記事を執筆した経緯と致しましては、私が作成したプロダクトをユーザーに使用していただいた際にユーザーがボタンをタップしようとしたとき、ボタン内の文字列をコピーできてしまう等の問題が何度も起こり、それを自身が悪い体験と認知し、当記事の方法で無理やり解決をしたという出来事がありました。
少数のユーザー間でのみ起こりうるかもしれない問題を解決する為に、全ユーザーに対して実装サイドがブラウザの「機能を制約」する事は間違っていると心の片隅で思っていたものの、その点を考慮せずに記事を執筆し公開してしまった事、そしてアクセシビリティに対して知識が浅いのにも関わらず記事のタイトルに「アクセシビリティ」という単語を使用をして皆様に混乱を生じさせてしまった事は大変申し訳無いと思っております。

SNS上でも「これはアクセシビリティではなくユーザビリティじゃないの？」「問題を解消する為に機能を制約するのは間違ってるよね？」「制約を設ける事で逆にユーザーの体験を阻害してるよね？」等々の意見を初め、多数の厳しい意見を頂戴致しました。どのご意見も至極真っ当な物ばかりでとても勉強になりました。貴重なご意見をpostして下さった方々にも御礼を申し上げます。

多くの意見の中でも特に、@kazuhito_kidachiさんがブログにて当記事のアンサーのような記事を執筆してくださったのでリンクと共に紹介をさせて頂きます。(本人許可済)
当記事の問題点やアクセシビリティの在り方について丁寧に記述されていてとても参考になりました。この記事と合わせて多くの方に読んでいただければと思いますのでどうぞよろしくお願い致します。
Re: CSSでボタンのアクセシビリティを向上させる方法 | 覚え書き | @kazuhito

他にもアクセシビリティ、ユーザビリティについてご意見をお持ちの方は大歓迎ですので下記のコメント欄にてご教授を頂けるととても嬉しいです。また、件のユーザーが引き起こした問題に対しての解決策や良いアプローチがありましたら同じくコメント欄にて記述をよろしくお願い致します。自身の力で解決策を見つけることができた際には改めて記事を投稿したいと考えております。

最後になりますが、この記事を投稿した事によって頂いたフィードバックや得た知見を元にアクセシビリティやユーザビリティ、CSS、ブラウザ等について更なる理解を深めるべく、学習に精進して参りますので今後共どうぞよろしくお願い致します。