WAI-ARIAとは？

webページ上のコンテンツに対して、アクセシビリティを補完する為の属性を定義した仕様です。

なぜ必要？

アクセシビリティの為。
今のウェブサービスの場合、汎用要素でコンテンツを動的に作る事が多い為、HTMLだけではマシンリーダブルにする事がむずかしくなっています。
この為、HTML＋WAI-ARIAでアクセシビリティの向上させる事が必要になってきています。

情報へのアクセスのしやすさ、利用のしやすさの事です。
ウェブの場合だと、ウェブサイトの情報や機能の利用しやすさの事をさします。

WAI-ARIA単独でアクセシビリティの向上を図るのではないです。
HTMLを補完する目的でWAI-ARIAが存在します。

下記3つから成り立ちます。

要素が何か、もしくは何をするかを定義
role属性として定義します。

<div role="navigation">
ナビゲーション群
</div>

要素の性質/特性を定義
aria-***で定義します。

<input type="number" aria-readonly="true"></input>

要素の現在の状態を定義
aria-***で定義します。

<div class="LazyPlaceholder" aria-busy="true">読込中</div>

WAI-ARIA の基礎知識
https://website-usability.info/2014/04/entry_140415.html

WAI-ARIAを活用したフロントエンド実装
https://app.codegrid.net/entry/wai-aria-1