必要なセマンティクスや動作をすでに備えているネイティブHTML要素[HTML]や属性を利用できる場合は、要素を使い回してARIAのrole、state、propertyを追加するのではなくそのまま使用してください。
使用できない場合はどんな場合か？
- HTML[HTML]で利用できる機能が実装されていない、または実装されているがアクセシビリティ対応がされていない場合。
- 特定のネイティブ要素を使うとデザイン上の制約で要件通りスタイルできない場合。
- 機能が現在HTMLで利用できない場合。
ネイティブのセマンティクスは、やむを得ない場合を除き変更しないでください。
例: 開発者がタブの見出しを作成したい場合
こうしてはいけません:
<h2 role=tab>heading tab</h2>こうしてください:
<div role=tab><h2>heading tab</h2></div>非インタラクティブ要素をインタラクティブ要素のベースとして使う場合、開発者はARIAによるセマンティクスと、適切なインタラクション動作をスクリプトで追加する必要があります。ボタンの場合は、ネイティブHTMLボタンをそのまま使う のがはるかに良くて簡単です。
すべてのインタラクティブなARIAコントロールは、キーボード操作可能でなければなりません。
クリック、タップ、ドラッグ＆ドロップ、スライド、スクロールなどの操作が可能なウィジェットは、キーボードでも同じ操作ができるようにする必要があります。
すべてのインタラクティブウィジェットは、該当する場合は標準的なキー操作やキーコンビネーションによってスクリプトで動作させる必要があります。
例えばrole=buttonの場合、要素にフォーカスでき、両方の
Enterキー（WIN OS）かReturnキー（MAC OS）、さらにSpaceキーでアクションが起こせる必要があります。
APGパターンやキーボードインタフェース開発 をWAI-ARIA Authoring Practices Guide内で参照してください。
role="presentation"やaria-hidden="true"を
フォーカス可能な要素に使ってはいけません。
これらをフォーカス可能な要素に使うと、一部ユーザーが「何もない」要素にフォーカスしてしまいます。
こうしてはいけません:
<button role=presentation>press me</button>こうしてはいけません:
<button aria-hidden="true">press me</button>
可視インタラクティブ要素の親や祖先にaria-hiddenを適用すると、そのインタラクティブ要素も隠されてしまうため、これも行わないでください:
<div aria-hidden="true">
<button>press me</button>
</div>
インタラクティブ要素を見えない・操作できない状態にする場合、フォーカス可能でなければaria-hiddenを適用できます。例えば：
button {opacity:0}
<button tabindex="-1" aria-hidden="true">press me</button>
インタラクティブ要素がdisplay:noneやvisibility:hidden（要素自身または祖先）で非表示の場合は、フォーカスできないだけでなくアクセシビリティツリーからも除外されます。aria-hidden="true"やtabindex="-1"を明示的に追加する必要はありません。