WAI-ARIAとかa11yとかアクセシビリティとかよく聞くけど、
あまりちゃんと理解していないので、ちょっと調べてみた(*´ω｀*)

軽く概要ていどなので、個別の詳細は別途確認する。

主に以下を読み進めた感じ(*´ω｀*)

割とここが印象的(*´ω｀*)

一点忘れてはいけないのが、WAI-ARIAは必要な場合のみ使用するという点です。
理想的には、スクリーンリーダーのユーザーの理解に必要となる意味論の提供は、
常にネイティブのHTML機能を使用して行うべきです。

基本は適切なHTMLタグをつけ、実現できない部分をWAI-ARIAで補完する形っぽい(*´ω｀*)

HTML5でheaderとか意味を持つタグを用意したけど、
今まで<div class="nav">のように使っていたので、
メインナビゲーションのようなページ内の機能を識別する簡単な方法が無かった。

要素に適用できる追加の意味論を提供する一連のHTML属性を定義しており、
それが欠けているどのような場所でもアクセシビリティを向上できるようになった。

要素が何か、もしくは何をするかを定義
多くの場合はいわゆるランドマークロール（landmark role）で、
主に HTML5 構造要素の意味論を複製
例
- role="navigation" => <nav>
- role="complementary" => <aside>
ロールの定義
- WAI-ARIA ロール - アクセシビリティ | MDN
- 5.4 Definition of Roles | Accessible Rich Internet Applications (WAI-ARIA) 1.1

要素の性質を定義。
追加の意図や意味論を与えるために使用することができる
例
- aria-required="true"
  - => フォーム入力が有効となるために値を入力しなければならないことを定義
- aria-labelledby="label"
  - => 要素にIDを追加することで、複数の場合も含めて
    ページ内の他のどの要素からもラベルとして参照することを可能にする
プロパティの定義
- 6.6 Definitions of States and Properties (all aria-* attributes) | Accessible Rich Internet Applications (WAI-ARIA) 1.1

要素の現在の状態を定義する特別なプロパティ
例
- aria-disabled="true"
  - => フォーム入力が現在disabledであることをスクリーンリーダーに対して伝える
ステートの定義
- 6.6 Definitions of States and Properties (all aria-* attributes) | Accessible Rich Internet Applications (WAI-ARIA) 1.1

道しるべ/ランドマーク（Signpost/Landmark）
ARIAのrole属性の値は、HTML要素の意味論を再現する
HTML5の意味論の範囲外となる道しるべ（signpost）を提供できる
動的なコンテンツの更新
スクリーンリーダーは、絶えず更新されるコンテンツが得意ではない
ARIAのaria-liveを使うことで、コンテンツ更新時に、スクリーンリーダーのユーザーに伝えられる
キーボードのアクセシビリティの向上
WAI-ARIAは他の要素に対してフォーカスを得る手段を提供しています（tabindex）
意味論的ではないコントロールのアクセシビリティ
ネストした一連の<div>が CSS/JavaScriptと共に複雑なUI機能を構成していたり、
ネイティブのコントロールがJavaScript によって大きく強化/変更されている場合、アクセシビリティの提供は困難になる。