12周年記念パーティ開催! 2024/5/10(金) 19:00

トグルスイッチの実装

全2回

2値の切り替えUI、いわゆるトグルスイッチのHTML/CSSについて考えます。問題がある回答例も紹介するので、「なにがよくないのか?」と考えながら読んでみてください。

後編 switchロールを使った実装例

トグルスイッチのHTML/CSSについて考えるシリーズの後編では、筆者がよりよいと考える回答を紹介します。WAI-ARIAのswitchロールを使った回答です。

前編 div要素やinput要素を使った実装例

2値の切り替えUI、いわゆるトグルスイッチのHTML/CSSについて考えます。今回はdiv要素やinput要素を使った例を見てみましょう。