WAI-ARIAとは？
webページ上のコンテンツに対して、アクセシビリティを補完する為の属性を定義した仕様です。
なぜ必要？
アクセシビリティの為。
今のウェブサービスの場合、汎用要素でコンテンツを動的に作る事が多い為、HTMLだけではマシンリーダブルにする事がむずかしくなっています。
この為、HTML＋WAI-ARIAでアクセシビリティの向上させる事が必要になってきています。
ところでアクセシビリティとは？
情報へのアクセスのしやすさ、利用のしやすさの事です。
ウェブの場合だと、ウェブサイトの情報や機能の利用しやすさの事をさします。
HTMLとの関係
WAI-ARIA単独でアクセシビリティの向上を図るのではないです。
HTMLを補完する目的でWAI-ARIAが存在します。
HTML（基本） ＋ WAI-ARIA（補助）
https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics#When_should_you_use_WAI-ARIA
WAI-ARIAの構造
下記3つから成り立ちます。
role
要素が何か、もしくは何をするかを定義
role属性として定義します。
例：ナビゲーション
<div role="navigation">
ナビゲーション群
</div>
property
要素の性質/特性を定義
aria-***で定義します。
例：必須の入力項目
<input type="number" aria-readonly="true"></input>
state
要素の現在の状態を定義
aria-***で定義します。
例：読み込み中を表したい
<div class="LazyPlaceholder" aria-busy="true">読込中</div>
参考
WAI-ARIA1.2 日本語訳
https://momdo.github.io/wai-aria-1.2/
WAI-ARIA の基礎知識
https://website-usability.info/2014/04/entry_140415.html
WAI-ARIAを活用したフロントエンド実装
https://app.codegrid.net/entry/wai-aria-1