aria-usagelisted

# WAI-ARIAの使用指針 無意味で冗長なARIA属性の追加を避けてください。 この文書は以下の著作物の内容を要約・改変して作成しています。 - [role属性とは、aria-\*属性とは、WAI-ARIAとは、いったい何なのか、いつ使うべきなのか](https://qiita.com/ymrl/items/6c9c059208ea11e6d7bc) - 著作者: [ymrl](http://www.ymrl.net/) - ライセンス: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) - 本文書は原著作物を要約・再構成したものであり、原著作物そのものではありません - [ARIA in HTML](https://www.w3.org/TR/html-aria/) (Copyright © W3C) - [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0/) (Copyright © W3C) - [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) (Copyright © W3C, W3C Software and Document License) ## 暗黙のWAI-ARIAセマンティクス HTMLの要素は暗黙のWAI-ARIAセマンティクスを持っています。 `role`属性や`aria-*`属性を書かなくても、 明示的に書いたのと同じ状態になっています。 たとえば`<button>`要素は、 WAI-ARIAの属性がなくても「ボタン」というロールと、 テキストコンテンツによる名前を持ちます。 ```html <!-- この2つは同じセマンティクスです。下のように書く必要はありません --> <button>送信</button> <button role="button" aria-label="送信">送信</button> ``` HTMLの要素や属性をそれらの目的通りに使っていれば、 適切な暗黙のWAI-ARIAセマンティクスが自動的に付与されます。 暗黙のセマンティクスの詳細は、 [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0/) に定義されています。 ## WAI-ARIAセマンティクスとHTMLのコンフリクト WAI-ARIAの属性はHTMLの暗黙のセマンティクスを上書きします。 誤った属性値を使ってしまうとアクセシビリティを下げてしまいます。 しかも通常の動作確認ではその誤りに気付けません。 ```html <!-- h1要素は暗黙のうちにaria-level="1"を持つが、 aria-level属性が明示的に指定されたことで見出しレベル2に変更されている --> <h1 aria-level="2">これは見出しレベル2です</h1> ``` 一方で`checked`属性のような「強いネイティブセマンティクス」はWAI-ARIAの属性値を無視します。 ```html <!-- aria-checkedは無視され、HTMLネイティブのchecked属性値のみが支援技術に提示される --> <label> <input ty