「CSSだけで作るタブメニュー」の重大な問題と改善案 - Qiita

会社の後輩コーダーが、次の案件で「CSSだけで作れるタブメニュー」を使う予定です！と言って、紹介記事を教えてくれました。 そのサンプルコードを見てみましたが、アクセシビリティ面に重大な問題があります。その記事だけではなく、「CSS タブ」などで検索して1ページ目に出てくる記事は、すべて同様の手法を使っていました。 私としては、後輩にも、令和のすべてのコーダーにもこの手法を使ってほしくありません。問題点と、改善したサンプルコードを共有します。 サンプル まずは、問題がある例をCodePenで再現しました。こちらのリンクからご覧ください。 それを改善した例がこちらです。 … … 同じですね。見た目は、全く同じです。 先に挙げた例の問題点を説明します。 問題点 1. クリック、タップ以外での操作ができない 「CSSだけで作るタブメニュー」の仕組みですが、タブメニューのボタンに隠してあるラジオボタ