質問やフィードバックがありましたら、フォームからお願いします
本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください
2017年に読んだ記事 – Effective前端1:能使用html/css解决的问题就不要使用JSは、初めて読んだときに非常に共感を覚え、当時まだ熟知していなかった多くの技術を学びました。皆さんにもぜひ読んでみてほしいです。JavaScriptはほとんどの問題を解決できますが、アクセシビリティの観点やパフォーマンス、バンドルサイズの観点から見ると、CSSで解決できることは確実に優れています。しかし、できるだけJSを使わないということは、まったく使わないということではなく、この2つには違いがあります。この記事では、上記で言及した記事を再度読み返し、改善できる点を指摘していきます。
:hover
を通じてヒントスタイルを作成する
確かに、:hover
を使ってユーザーにこのUI要素がインタラクティブであることを知らせることは、フロントエンドエンジニアにとって基本的な常識です。記事の中でも、:hover
を使ってドロップダウンメニューの効果を得ることができると述べられています。
- Item1
- Item2
ホバー時にdisplay: block
に変更し、通常はdisplay: none
にします。これ自体には大きな問題はないように思えますが、ユーザーがマウスを使用してナビゲートしていない場合はどうでしょうか?ユーザーがキーボードでナビゲートしている場合、:hover
は効果がありません。また、DOMの構造に制限があり、トリガーするUI要素はドロップダウンリストと隣接する必要があります。
したがって、私の提案は、:hover
を使用してユーザーに要素がインタラクティブであることを示す際に、ユーザーがマウス以外でナビゲートする場合にどのようにインタラクトできるかを考慮すべきです。具体的には:
- 追加で
:focus
を加えたり、クリックイベントをリッスンしてユーザーがドロップダウンメニューをトリガーできるようにする aria-expanded
を追加してスクリーンリーダーに現在のメニューの開閉状態を通知し、キーボードナビゲーションを追加してユーザーが上下キーでオプションを制御できるようにする
- Item1
- Item2
この例では、ホバーによってドロップダウンをトリガーするだけでなく、JavaScriptを使用してフォーカスおよびマウスオーバーイベントをリッスンしてaria-expanded
を調整しています。キーボードナビゲーションは本記事のテーマとは異なるため、実装していません。もしaria-expanded
を使用する場合、CSSを次のように調整することもできます:
.dropdown-item:hover + .item,
.item[aria-expanded="true"]
{
/* style */
}
:checked
と隣接セレクタを使用したカスタマイズスタイル
カスタマイズされたチェックボックスやラジオボタンを実装する場合、記事で言及されているテクニックを使用する必要があります。擬似クラスと隣接セレクタを組み合わせてカスタマイズされたチェックボックスを簡単に実現できます。
:checked
を使用する利点は、クラスをトグルするために追加のイベントリスナーを登録する必要がないことです。カスタマイズされたチェックボックスやラジオボタンを作成する場合は、できるだけこの方法を優先してください。ゼロから<div>
を作成することを避け、考慮すべき点が多く、使用性も見た目が悪いかもしれませんが、最低でも機能するチェックボックスに勝るものはありません。
ただし、この方法を使用する際に注意すべき点がいくつかあります:
aria-label
を使用して、スクリーンリーダーにこのチェックボックスやラジオボタンの目的を知らせる(またはaria-labelledby
を使用)- 値の変化を通知するために
<div role="status"></div>
や他の方法を使用する(必要な場合) - フォーカスのスタイルを実装する
スクリーンリーダーがチェックボックスを読み上げる際、ラベル名と選択状態のみが読み上げられます。チェックボックスの目的が選択と未選択以外である場合(例えば、ダークテーマの切り替えなど)、追加のヒントを提供することでスクリーンリーダーが理解しやすくなります。
input
を隠しつつフォーカス効果を持たせるために、直接display: none
を使用せず、他のCSSプロパティを使用して隠します。また、キーボードナビゲーション時にフォーカススタイルが表示されるように、:focus-visible
を追加しました。これにより、キーボードナビゲーション(例:タブ)時のみルールが適用され、クリック時にはフォーカスの枠が表示されません。
複数列の等高
この記事は2016年に書かれたもので、そこに記載されている方法は実行可能ですが、少し古いスタイルです。2022年にはflexのサポートが非常に高いため、flexboxを直接使用して解決できます。さらに細かい制御が必要な場合はgridを使用できます。
原理は、flexレイアウトの特性を利用して、align-items
はデフォルトでstretch
になっており、コンテナの高さは同じ行内で最も高い要素に基づきます。複数の行が必要な場合は、flex-wrap: wrap
を追加することを忘れないでください。さもなければ、デフォルトではflexboxは同じ行にすべて詰め込もうとします。
情報
この写真はUnsplashのClay Banksによって撮影されました
東京
この写真はUnsplashのJezael Melgozaによって撮影されました。
東京が好きな理由は、人々の溶け込みを見ることができる素晴らしい場所だからです。
フォームの送信
私は、著者が指摘したように、多くの人が実際にネイティブのフォーム<form>
が数十年も存在していることを見落としていることに同意します。<form>
を使用してフォーム内容を定義することで、大量のJavaScriptコードを節約できます。
記事の中で、ブラウザのネイティブなフォーム検証メカニズムと:invalid
擬似クラスを組み合わせてスタイル処理を行うことができると述べられています。例では、無効状態のときに提出ボタンのopacity: 0.5
に設定しています。しかし、作者は例の関係で<span>
を使用しており、実装上は<button>
を使用し、JavaScriptで入力値が不正な場合にdisabled
を追加するのが一般的です。
フォームにまだ不慣れな方は、以下の2つの記事を参照してください:
擬似クラスを活用する
著者は、:checked
、:focus
、:invalid
などを利用することを提案しており、これらの擬似クラスを活用することで、不要なJavaScriptを節約でき、読みやすくなります。
擬似クラスに関しては、私も比較的新しい擬似クラスを紹介する記事を書いていますので、興味があればご覧ください。レイアウトに役立つ擬似クラス
結論
2017年はちょうど私がフロントエンドを始めた時期で、細部の処理にあまり自信がありませんでした。今振り返ってみると、良好なユーザー体験を実現するためには、多くの細部を考慮する必要があり、単にCSSを適用するだけでは終わりません。アクセシビリティを考慮するためには、JavaScriptがしばしば不可欠な役割を果たすことが多いのです。
この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨
☕Buy me a coffee