aria-usage

WAI-ARIAの使用指針

無意味で冗長なARIA属性の追加を避けてください。

この文書は以下の著作物の内容を要約・改変して作成しています。

• role属性とは、aria-*属性とは、WAI-ARIAとは、いったい何なのか、いつ使うべきなのか
  • 著作者: ymrl
  • ライセンス: CC BY 4.0
  • 本文書は原著作物を要約・再構成したものであり、原著作物そのものではありません
• ARIA in HTML (Copyright © W3C)
• HTML Accessibility API Mappings 1.0 (Copyright © W3C)
• WAI-ARIA Authoring Practices Guide (Copyright © W3C, W3C Software and Document License)

暗黙のWAI-ARIAセマンティクス

HTMLの要素は暗黙のWAI-ARIAセマンティクスを持っています。 role属性やaria-*属性を書かなくても、 明示的に書いたのと同じ状態になっています。

たとえば<button>要素は、 WAI-ARIAの属性がなくても「ボタン」というロールと、 テキストコンテンツによる名前を持ちます。

<!-- この2つは同じセマンティクスです。下のように書く必要はありません -->
<button>送信</button>
<button role="button" aria-label="送信">送信</button>

HTMLの要素や属性をそれらの目的通りに使っていれば、 適切な暗黙のWAI-ARIAセマンティクスが自動的に付与されます。 暗黙のセマンティクスの詳細は、 HTML Accessibility API Mappings 1.0 に定義されています。

WAI-ARIAセマンティクスとHTMLのコンフリクト

WAI-ARIAの属性はHTMLの暗黙のセマンティクスを上書きします。 誤った属性値を使ってしまうとアクセシビリティを下げてしまいます。 しかも通常の動作確認ではその誤りに気付けません。

<!-- h1要素は暗黙のうちにaria-level="1"を持つが、
     aria-level属性が明示的に指定されたことで見出しレベル2に変更されている -->
<h1 aria-level="2">これは見出しレベル2です</h1>

一方でchecked属性のような「強いネイティブセマンティクス」はWAI-ARIAの属性値を無視します。

<!-- aria-checkedは無視され、HTMLネイティブのchecked属性値のみが支援技術に提示される -->
<label>
  <input type="checkbox" checked="checked" aria-checked="false" />
  このチェックボックスは、チェックされているでしょうか?
</label>

No ARIA is better than Bad ARIA

APGのRead Me Firstにある通り、 悪いARIAよりもARIA無しのほうが良いです。 この原則を理解するために、 2つの重要な考え方があります。

ロールは約束である

<div role="button">Place Order</div>

role="button"を指定した以上、 この要素はボタンとして完璧に振る舞わなければなりません。 クリックだけでなく、 キーボードでフォーカスできてSpaceキーやEnterキーでも操作できる必要があります。 ロールを指定するということは 「このロールに期待されることは、この要素がすべて満たしています」 というユーザーに対する約束です。