Edited at

【css】buttonのスタイルをなくす方法

More than 1 year has passed since last update.


概要

buttonのスタイルをなくす方法について述べよう、と思っていたのだが丸かぶり記事があったのでそのリンクを貼り、私はbuttonのスタイルをなぜ無くしたかったかのモチベーションを述べる。

結果的なコードはこの記事に書かれている。


なぜbuttonのスタイルをなくしたかったか

イマドキっぽくかっこいいアイコンがクリックされたらアクションさせたい、みたいなことをしたかった。

私の経験してきた現場は多くの場合、アイコンがクリックされたらを検出するためにdiv要素を用意してonClick()でキャッチしていた。

しかしながら、本当にそのやり方がベストなのであろうか。

使う人が限られているしちゃんとクリックできればいいんですよ、というのであれば良いと思うが、もう少し利用者のためにクリックするということについて考えてみるのもいいと思う。

私はマウスを使うのが少々面倒だ、と感じる時がある。例えばメニューアイコンをクリックして、びろーんと出てくるメニューリストの中からメニューを選ぶ場面など。初めてアクセスするサイトであれば全然良いのだが、頻繁に使う業務システムのようなアプリケーションの場合はいちいちクリックするのが鬱陶しいのでTabキーとEnterキーでメニューアイコンを押せるようになったら良いのにな、という場面がある。そういうことを考えると、いくらかっこよかったり洒落たボタンでもdiv要素で作られていてTabキーで操作できないものよりは、ダサくてもbutton要素みたいなものでTabキーで操作できる方がよっぽど嬉しい。

そのため、button要素を使いつつかっこいいボタンにしたいため、button要素のスタイルを外して、新たに自分でスタイルやアイコンを入れたい、というのがbuttonのスタイルを外したかった理由である。

また、toCのアプリケーションでは利用者の中には障害を持つ方もいることが考えられる。その際には自助用具を利用した(口で棒を咥えて等)操作が行われ、マウス操作が困難な場合もある。そうした際にTabキーでメニューアイコンが操作できればどうだろうか。

と述べたが、結局誰向けかどうかに限らずメニューアイコンへのアクセスの仕方がマウス操作以外にも、キー操作で行うという選択肢が1つ増えるだけでも便利だと思う。

ここまで論述してきたユーザのアクセスの仕方やし易さに焦点をあてたあたりのことをアクセシビリティと言われており、CodeGridのWAI-ARIAを活用したフロントエンド実装で説明されているので、ぜひそちらを参考にしてほしい。

buttonのスタイルをなくす方法の記事であるが、これを機にユーザのアクセシビリティについて考えるもの良いと思う。


参考

https://qiita.com/nabettu/items/1593af04e48444c45c53

https://app.codegrid.net/entry/wai-aria-1