セマンティックHTMLをアクセシビリティの後付けではなく、インターフェースの基盤として捉え直す論考。
見た目を正として先に決め、挙動を後から継ぎ足す作り方は、マウス操作の外側でテストした途端に実装の粗が漏れる。Karl Kochはこれを、ビジュアルデザインと機能デザインを取り違えた結果だと指摘する。
<button> や <input>、<details> といったネイティブ要素は、ユーザーがすでに知っている挙動を内蔵している。本物の <button> は、タブフォーカス、Enter / Space での起動、disabled 状態、フォーム送信、スクリーンリーダーへの role 通知を、追加コードなしで引き受ける。
一方、<div> からボタンを作り直すと、role="button"、tabIndex、onKeyDown ハンドラ、aria-disabled、クリック判定を自分で足すことになる。ブラウザがタダで持っている機能を、より劣った形で再実装して家賃を払い続けるようなものだ。
セマンティックな意味はスタイルのトレンドより長く残る。ナビゲーションはナビゲーションのまま、フォームコントロールはフォームコントロールのまま、再デザインを越えて生き延びる。
コマンドメニュー、非同期コンボボックス、並べ替え可能なリスト、リッチテキストエディタのように、カスタムコンポーネントが正当な場面もある。ただしその前に、ネイティブ要素の契約を使い尽くすこと。
