原則

ガイドで複数の修正方法のうち一つをすすめるとき、その理由はたいていここにある原則のどれかです。各原則に、それを使うガイドを載せています。

まずHTMLの要素を使う

目的に合うHTML要素があればそれを使い、ARIAは合う要素がないときにだけ使います。

理由

振る舞いが要素に備わっています。 buttonはEnterとSpaceで動き、labelはクリックすると欄にフォーカスを移し、showModal()で開いたdialogはフォーカスを内側に保ちます。divとARIAでは、そのすべてを自分で書く必要があり、抜けやすくなります。
ARIAが変えるのは読み上げで、動作ではありません。 role="button"でスクリーンリーダーは「ボタン」と読みますが、コードを足すまでキーボードには反応しません。利用者は、聞いた内容と違う動作に出会います。
HTMLの要素は、より多くの環境で動きます。 ブラウザーの自動入力、音声操作、強制カラー、リーダー表示、古い支援技術も、label、button、selectを理解します。ARIAのロールや属性の対応は、環境によってばらつきがあります。
保守するものが減ります。 HTMLの要素の動作はブラウザーが保ち、修正してくれます。手書きのARIAとそのスクリプトは、マークアップの名前の変更、コンポーネントの更新、スクリプトの読み込み失敗で、気づかないうちに壊れます。

推奨

<label for="phone">Phone</label>
<input id="phone" type="tel">

非推奨

<div id="phone-label">Phone</div>
<input type="tel" aria-labelledby="phone-label">

この原則を使うガイド

出典