WAI-ARIAをかうと、HTMLだけでは不足している情報を補うことができます。
Web Accessibility Initiative - Accessible Rich Internet Applicationsの略となり、読み方はウェイアリアです。

WAI-ARIAの主な役割

障害を持つ人々へのサポート

視覚や聴覚、認知などを含めた障害を持つ人々がウェブコンテンツを理解し、操作できるように支援できます。スクリーンリーダーを使用したり、キーボードだけでウェブを操作したりする際などの操作性にも関わってきます。

一例として、重要な情報を含むアラートメッセージを画面読み上げソフトウェアが認識し、ユーザーに通知するために、role="alert"属性を使用することができます。

<div role="alert">新しいメッセージが届きました。</div>

役割と状態の定義

要素が何をするか、どのような状態にあるかを定義でき、ユーザーに正確な情報が提供されます。
<button>タグにrole="button"などは必要ありませんが、例えば、なんらかの理由で適切なHTMLを利用してマークアップできないときに、要素の定義を設定することができます。

<div role="button">クリックしてください</div>

インタラクションの改善

ドロップダウンメニューやモーダルダイアログなど、ユーザーが選択肢を表示および選択できるようにするために、role属性を使用できます。

<div role="combobox" aria-expanded="false" aria-haspopup="listbox" onclick="toggleDropdown()">
  <span>選択してください</span>
  <ul role="listbox" aria-hidden="true">
    <li role="option">選択肢1</li>
    <li role="option">選択肢2</li>
    <li role="option">選択肢3</li>
  </ul>
</div>

主要なWAI-ARIA属性

WAI-ARIA属性は数十種類以上あると言われています。
そのなかの一部を以下でまとめました。

<div role="button">クリック</div>

<input type="text" aria-label="ユーザー名">

<input type="password" aria-describedby="password-hint">

<fieldset aria-labelledby="section-label">

<div aria-hidden="true">非表示の要素</div>

<button aria-expanded="false">詳細を表示</button>

<button aria-haspopup="true" aria-controls="menu1">メニューを開く</button>

<button id="toggleButton" aria-controls="hiddenContent">表示切り替え</button>
<div id="hiddenContent" aria-hidden="true">これは非表示のコンテンツです。</div>

<li aria-selected="true">選択肢1</li>

<div aria-live="assertive">新しいメッセージが届きました</div>