ネイティブとカスタム：実際の要素を使うタイミング

どのコントロールでも、選択肢は1つです。ネイティブなHTML要素を使うか、カスタム要素を自分で構築するかです。ほとんどの場合、ネイティブが適しています。

ネイティブのbuttonは、フォーカス可能で、マウス、キーボード、タッチでクリックでき、正しく読み上げられます。タグを1つ書くだけで、残りはプラットフォームが処理します。

spanをボタンのようにスタイルしても、役割もフォーカスもキーボード対応もありません。目をごまかせるだけです。

カスタムコントロールを機能させるには、role、tabindex、さらに Enter と Space 用のキー操作ハンドラーを追加する必要があります。1つのタグに合わせるだけなのに、多くのコードが必要です。

注意深く作ったカスタムコントロールでも、フォーカスリング、無効状態、タッチ操作などの境界ケースを見落とします。ネイティブの要素なら、これらをすべて最初から処理してくれます。

これはプラットフォーム全体に当てはまります。本物のselect、チェックボックス、details 要素なら、div の模倣では完全には再現できない動作とアクセシビリティが得られます。

ネイティブのフォームコントロールはformと一緒に送信され、自身で検証を行い、label と自動的に連携します。これを手作業で再構築する価値は、ほとんどありません。

そのパターンに対応するネイティブ要素がない場合に限ってカスタムにします。たとえばタブインターフェースやツリーなどです。その場合は、実績のある作成パターンに慎重に従ってください。

本物のボタンは質素に見えるのではないかと心配ですか。ネイティブ要素は CSS で大幅にスタイル設定できます。セマンティクスを保ったまま、見た目は好きなものに変えられます。

本物の要素を使えば、JavaScript が減り、バグも少なくなります。さらに、ブラウザーや支援技術の更新にも、追加の作業なしで対応できるコントロールになります。

これを基本方針にしてください。まずはネイティブ、カスタムは最後の手段です。Web プラットフォームは大きなアクセシビリティの恩恵を提供してくれるので、任せられる部分は任せましょう。

ネイティブにするかカスタムにするかを判断しましょう。

まずネイティブを選びましょう。本物のボタンや input なら、フォーカス、キー操作、セマンティクスが最初から備わっています。要素がない場合だけカスタムにし、ネイティブ要素は自由にスタイル設定してください。🎉