ARIA属性は要素の役割に応じて指定されているとおりに使用する必要があります。

チェックボックスには2つのオプションがあります。いずれか aria-checked が削除され、代わりにブラウザのネイティブのチェックボックスの状態を使用して、要素がチェックされているか、チェックされていないか、または混合されているかを示します。HTMLチェックボックスは、 indeterminate プロパティを設定することで、混合位置に配置できます。

チェックボックスのもう1つのオプションは、ネイティブHTMLチェックボックスを別の要素に置き換えることです。これを行うときは、それに roleを提供し、キーボードでアクセスできることを確認する必要があります。

良い例

<label>
  <input type="checkbox" checked>
  I agree to make my website accessible
</label>

悪い例

<label>
  <input type="checkbox" aria-checked="true">
  I agree to make my website accessible
</label>

tr 要素および role="row"を含む要素の場合、属性が必須であれば、親の table または grid の役割を treegrid に変更する必要があることがあります。

良い例

<table role="treegrid">
  <tr aria-level="1" aria-expanded="false">
    <td role="gridcell">My Downloads</td>
  </tr>
</table>

悪い例

<table>
  <tr aria-level="1" aria-expanded="false">
    <td>My Downloads</td>
  </tr>
</table>