アクセシビリティを考えてinputタグのcheckboxをボタン化する

自治体等の公共のサイトはアクセシビリティ対策がされているサイトが基本ですが、一般のサイトでは対策されていない事も。 アクセシビリティ対策がされてないとどうなるか？ 例えば、読み上げソフトや機能を使ってサイトの閲覧している方が、正しく読み上げられずに間違った内容に捉えられるかもしれません。 アクセシビリティ対策方法 画像にはalt属性を使い代替えテキストを使う。キーボードのタブキーで操作できるかどうか。CSSでテキストを表示させない。（content等を使って表示させない）CSSが効いてなくても、内容の順番が狂わず理解できるように作成する。 などなど、いろいろあります。 僕が言える立場ではないのですが、参考サイトを見ていてもアクセシビリティ的にどうなんだろうかと思うサイトもあり、僕なりに対策を考えたチェックボックスの装飾を紹介します。

[jm-tameshi]

目を背けていた部分