inputタグのcheckboxを使いやすくする為にCSSで装飾する事、あると思います。
押しやすくしたり、視認性を高めたり、操作性を向上させる事は良い事ですが、引き換えにアクセシビリティが損なわれる事もあります。
この記事ではそのアクセシビリティの事を考えて、checkboxを装飾する方法について紹介します。
アクセシビリティを考えるって何？
アクセシビリティとは
アクセシビリティとは、簡単に言えばWEBのバリアフリー化。
どんな人でも分け隔てなくWEBサイトを閲覧できるように配慮できているかどうか。
自治体等の公共のサイトはアクセシビリティ対策がされているサイトが基本ですが、一般のサイトでは対策されていない事も。
アクセシビリティ対策がされてないとどうなるか？
例えば、読み上げソフトや機能を使ってサイトの閲覧している方が、正しく読み上げられずに間違った内容に捉えられるかもしれません。
アクセシビリティ対策方法
- 画像にはalt属性を使い代替えテキストを使う。
- キーボードのタブキーで操作できるかどうか。
- CSSでテキストを表示させない。（content等を使って表示させない）
- CSSが効いてなくても、内容の順番が狂わず理解できるように作成する。
などなど、いろいろあります。
僕が言える立場ではないのですが、参考サイトを見ていてもアクセシビリティ的にどうなんだろうかと思うサイトもあり、僕なりに対策を考えたチェックボックスの装飾を紹介します。
ボタンその１
デモボタン
ソース
See the Pen input-button by 東田ヒロき (@higashidadan) on CodePen.
iPhoneぽいボタンです。
クリックやタップでも押せるように操作性の向上と、フォーカスされたときにわかるように色を付けるなど配慮してみました。
ボタンその２（シンプル）
デモボタン
ソース
See the Pen input-button-simple by 東田ヒロき (@higashidadan) on CodePen.
ボタンその１と同じでフォーカスされた時の対処し、インプットタグはposition: absolute;で重ねて対処。
まとめ
近年はアクセシビリティという言葉を聞かなくなってきましたが、chromeの検証ツール「Lighthouse」でもアクセシビリティ項目はあります。
重要なサイトの評価項目だと思います。
チェックボックスの装飾はまずdisplay:none;でチェックボックスを表示から消す事が多いです。
表示から消すと、キーボードのタブキーで操作できず、閲覧者が見失ってしまう場合があります。
その点を気にして作成すれば、問題ないはずです。
やっぱ作ったサイト、ページはいろんな人に観てもらいたいです。
読み上げソフトなどの向上等、ある程度は問題ないかもしれませんが、どんな方でも閲覧できるように作成するのが、やっぱりWEBサイトコーダーの目指すべきところですよね。
コメント