WAI-ARIAとは、Web Accessibility – Accessible Rich Internet Applicationsの頭文字。HTMLやSVGで利用できるアクセシビリティ確保のための属性。
これにより、コンテンツを読み取る機会は、webサイト、アプリケーションの文脈を理解できる。
role属性
role属性とは、コンテンツの役割を示す。HTMLよりもさらに多くの役割が用意されている。SVGを含むあらゆる要素に付与可能。
| role=”navigation” | ナビゲーションであることを明示 |
| role=”alert” | 今のタイミングで重要な情報であることを明示 |
| role=”menubar” | メニューバーで有ることを明示 |
| role=”menu” | メニューバー内の詳細メニューであることを明示 |
| role=”menuitem” | メニューバーの項目であることを明示 |
| role=”listitem” | menubarであるul要素内にli要素が存在している場合、li要素には、暗黙でrole=”listitem”が適用されます。 |
| role=”presentation” | 暗黙で適用されるrole属性を打ち消す |
aria属性
aria属性は、コンテンツの状態や性質を示す。
状態明示と性質明示の2種類がある。
状態明示は、多くの場合ture/falesを指定。
性質明示は、属性値に参照先のIDや数値、真偽値を指定。
状態明示
| aria-busy | 更新中である状態 |
| aria-expanded | コンテンツの展開/格納状態を示す |
| aria-selected | 選択状態を示す |
| aria-multiselectable | 複数選択可能かを示す |
| aria-diabled | disabled属性が指定されたのと同じ状態であること伝えるためのWAI-ARIAの属性 |
| aria-hidden | 該当の要素（とその子孫要素）が、非表示または認識不可能である状態を示す。加えて、読み上げなどの支援技術を利用しやすくするために、重複する内容に対しても利用してよい |
性質明示
| aria-label | コンテンツのラベルテキストを明示（HTMLのtitle属性と似た意味、ただし、ツールチップはない。title属性では、スクリーンリーダーでの読み上げはあまり期待できない。） |
| aria-current(WAI-ARIA1.1) | パンくずなどで現在位置を表示するためのWAI-ARIA属性 |
| aria-controles | 指定した要素が値に指定した要素を制御することを示すWAI-ARIAの属性 |