WAI-ARIA とは？初心者向けにわかりやすく解説

フロントエンド開発•2025/1/28

はじめに

皆さんはWebサイトを利用するとき、画面のデザインやコンテンツに目が行きがちではないでしょうか。しかし文字を読むことが難しい方や、キーボード操作だけでサイトを利用する方など、多様な環境でWebを活用している人がたくさんいます。こうした方々が不便なく情報にアクセスできるように、WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は重要な役割を担っています。

一見すると、WAI-ARIAは専門的で難しそうだと感じるかもしれません。でも実はHTMLの知識があれば、少しの工夫でアクセシビリティを向上させることができます。

この記事を読むとわかること

WAI-ARIAの基本的な役割
WAI-ARIAが使われる具体的なシーン
主要な属性 (roleやaria) の意味と使い方
実装例を通じて理解するアクセシビリティの向上方法

WAI-ARIAの概要

WAI-ARIAは、視覚や聴覚などに制約がある方を含む、すべての人がWeb上のコンテンツを快適に利用できるようにする取り組みの一環です。画面リーダーなどを使ってWebページを読み上げるとき、HTMLだけでは十分にコンテンツの構造や意味を伝えられないケースがあります。そこでWAI-ARIAを使って補足情報を付与することで、ブラウザや支援技術がページをより正確に解釈できるようになります。

例えばJavaScriptで動的に生成されるメニューやタブなどは、見た目だけでは「何の要素なのか」を画面リーダーが判断しにくいことがあります。その点を補強するために、aria属性やroleなどを利用します。

なぜWAI-ARIAが重要なのか

HTMLには元々、見出しや段落などの意味的な要素があります。しかし、モダンなWebアプリケーションでは、JavaScriptを使った複雑なUIコンポーネントが増えました。こうした複雑なコンポーネントは、通常のHTMLのタグだけでは意味づけが不十分になります。

画面リーダーが正しく読み上げるためには「ここはボタン」「ここはメニュー」といった明示的な指定が必要です。 WAI-ARIAを活用すれば、こうした複雑なUIでもアクセシビリティを高めることができます。

WAI-ARIAが使われる具体的なシーン

WAI-ARIAは、下記のような場面でよく利用されます。サイトを訪れる様々な方に、ストレスなく情報を提供するうえで重要な技術でしょう。

シーン1：動的に更新されるコンテンツ

たとえば、画面の一部だけが非同期的に更新されるような仕組みです。 HTML上では明確に区切られていない場合、スクリーンリーダーはその更新を見逃すことがあります。そこでaria-liveなどを設定して、更新があった際に読み上げを行いやすくします。

シーン2：タブやモーダルなどのUI

タブ切り替えやモーダルウィンドウは、ページ全体が書き換わるわけではありません。しかし、UIとしては画面の表示・非表示などがコロコロ変わるため、視覚だけではなく、構造的にどの部分がアクティブなのかを伝える必要があります。このときrole="tablist"やaria-hiddenなどを適切に使うことで、画面リーダーにも「現在どのタブがアクティブなのか」「モーダルは表示中か」を知らせることができます。

シーン3：ボタンとリンクが混在するUI

一見すると、単純なボタンのように見えるものが実はリンクであったり、逆にリンクのように見えて実装はボタンだったりするケースがあります。通常のHTMLタグだけでは正確な意味が伝わらず、利用者は混乱しがちです。 WAI-ARIAのrole属性を使って、要素の役割を明確にすれば、どのような操作が求められるかを伝えられます。

WAI-ARIAを支える基本要素

WAI-ARIAでは、主にroleとaria属性の2つが大きな柱になります。これらを組み合わせることで、要素の役割や状態を支援技術に通知します。

role

role属性は、要素が「何を表しているのか」を明示します。 HTML5では多くの要素にデフォルトの役割があり、そのままでも伝わる場合はあります。ただ、カスタム要素やdiv要素などに対して「この要素はボタンですよ」と追加で教えてあげるときに使うのが一般的です。

以下はよく使われるroleの例です。

role名	用途
button	ボタンを示す
dialog	ダイアログやモーダルを示す
tab	タブ要素であることを示す
tablist	タブがまとまったリストを示す
tabpanel	タブに紐付くパネルを示す
navigation	ナビゲーションを示す
alert	重要なメッセージを表示する領域

画面リーダーは、このrole属性を読み取って「この要素はボタンなんだな」「ここはナビゲーションなんだな」と判断します。

aria属性

aria属性は、要素の状態やプロパティを表すために使われます。ボタンが押されているか、メニューが表示されているかなどを支援技術が理解するために欠かせません。

たとえば、aria-expandedという属性は「要素が展開されているかどうか」を示すものです。詳細ボタンを押すと情報が展開されるUIなどで使われます。「true」なら展開されている、「false」なら閉じているといった具合に状態を明示できます。

他にもaria-hiddenで「この要素は支援技術には読み上げさせない」と指定したり、aria-labelで「わかりやすいラベル名」を付けたりします。

WAI-ARIAで実装してみよう

ここからは、具体的なコードの例を交えて解説します。初心者の方にも取り入れやすい部分を中心に紹介するので、ぜひ参考にしてみてください。

ボタンと折りたたみ要素（Accordion）の例


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WAI-ARIA Accordion Example</title>
</head>
<body>

  <div>
    <button
      role="button"
      aria-expanded="false"
      aria-controls="accordion-content"
      id="accordion-toggle"
    >
      詳細を表示
    </button>

    <div
      id="accordion-content"
      role="region"
      aria-hidden="true"
    >
      <p>ここに折りたたみコンテンツが表示されます。</p>
    </div>
  </div>

  <script>
    const toggleButton = document.getElementById("accordion-toggle");
    const content = document.getElementById("accordion-content");

    toggleButton.addEventListener("click", () => {
      const isExpanded = toggleButton.getAttribute("aria-expanded") === "true";

      toggleButton.setAttribute("aria-expanded", isExpanded ? "false" : "true");
      content.setAttribute("aria-hidden", isExpanded ? "true" : "false");
    });
  </script>

</body>
</html>

上の例では、role="button"とすることで、画面リーダーに「これはボタン」という情報を伝えています。さらに、aria-expandedとaria-hiddenを切り替えることで、折りたたみ要素が現在どうなっているのかを把握しやすくしています。

モーダルダイアログの例


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WAI-ARIA Modal Example</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -30%);
      border: 1px solid #ccc;
      background: #fff;
      padding: 1em;
      width: 300px;
    }
    .modal.show {
      display: block;
    }
  </style>
</head>
<body>

  <button id="open-modal">モーダルを開く</button>

  <div
    id="my-modal"
    class="modal"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    aria-hidden="true"
  >
    <h2 id="modal-title">モーダルウィンドウ</h2>
    <p>これはサンプルのモーダルです。</p>
    <button id="close-modal">閉じる</button>
  </div>

  <script>
    const openBtn = document.getElementById("open-modal");
    const closeBtn = document.getElementById("close-modal");
    const modal = document.getElementById("my-modal");

    openBtn.addEventListener("click", () => {
      modal.classList.add("show");
      modal.setAttribute("aria-hidden", "false");
      // フォーカスをモーダル内の閉じるボタンに移動
      closeBtn.focus();
    });

    closeBtn.addEventListener("click", () => {
      modal.classList.remove("show");
      modal.setAttribute("aria-hidden", "true");
      // 元のボタンにフォーカスを戻す
      openBtn.focus();
    });
  </script>
</body>
</html>

こちらの例では、role="dialog"でモーダルダイアログであることを定義しています。 aria-modal="true"を指定することで、背景コンテンツよりもモーダルを前面に示す重要性を支援技術に伝えやすくなります。また、aria-hidden="true"の切り替えでモーダルの開閉状態を示しているのもポイントです。

ランドマークロールの活用

WAI-ARIAには、ページ内の大きな領域を示すためのランドマークロールもあります。たとえばrole="navigation"でナビゲーション部分を示したり、role="main"で主コンテンツ部分を示したりします。

これらを使うと、支援技術を利用している方がページの特定領域へ素早く移動しやすくなります。 HTML5の<nav>や<main>タグがあれば、必ずしもroleをつけなくても伝わるケースがあります。しかし状況によっては、ランドマークロールの明示が役立つ場合があります。


<nav role="navigation" aria-label="メインメニュー">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<main role="main">
  <h2>ここがメインコンテンツです</h2>
  <p>記事やコンテンツ本文を配置します。</p>
</main>

WAI-ARIA導入時の注意点

WAI-ARIAはとても便利な反面、誤った使い方をするとかえって混乱を招く可能性があります。何でもかんでもroleやaria属性を追加すれば良いわけではありません。

HTMLのセマンティクスを優先する

まずはHTMLそのものが持つ要素、例えば<button>タグや<nav>タグなどを正しく使うことが大切です。もともと持っている意味が適切な要素であれば、それだけで支援技術がうまく解釈してくれることが多いです。その上で、どうしても表現しきれない役割がある場合に、WAI-ARIAを追加するのが自然な流れだと言えます。

aria-属性は適切に更新する

折りたたみやモーダルの開閉など、状態が変化するUIを実装するときは、JavaScriptで状態が変わるタイミングに応じてaria属性を更新してください。 aria-expanded="true"と書いてあるのに、実際には閉じたままのUIになっているなど、不整合が起きると混乱の原因になります。

誤った属性設定のまま公開すると、視覚的には正常に見えても、支援技術利用者には不便な体験となる可能性が高いです。

スクリーンリーダーで検証してみる

実際にスクリーンリーダーを使ってみると「これはわかりやすい」「ここは区別がつかない」といった気づきを得られます。最低限の動作テストを行い、ユーザーにとって使いやすいかどうかを確認しましょう。

フォーム要素でも活用できるWAI-ARIA

フォーム入力も、支援技術を使う方にとっては大きなハードルになることがあります。ここでは、aria-requiredの例を示します。


<form>
  <label for="username">ユーザー名</label>
  <input
    type="text"
    id="username"
    name="username"
    aria-required="true"
  />

  <label for="email">メールアドレス</label>
  <input
    type="email"
    id="email"
    name="email"
  />

  <button type="submit">
    登録
  </button>
</form>

この例では、ユーザー名が必須であることをaria-required="true"で示しています。ブラウザのバリデーション機能だけでなく、画面リーダーにも「ここは必須入力だよ」と伝えやすい仕組みになります。

チーム開発でのWAI-ARIA活用

WAI-ARIAはチーム開発でも注目されるテーマのひとつです。デザイナーやフロントエンドエンジニアが協力して、UIとアクセシビリティを一貫した方針で作り上げることが求められます。

デザイナーとの連携

UIのデザイン段階で「この要素はボタンなのかリンクなのか」「どんな振る舞いをするのか」を明確にしておくと、実装時にroleやaria属性を付与しやすくなります。また、色やコントラストの面でもアクセシビリティを考慮すると、より多くの利用者に使いやすいUIになるでしょう。

コードレビュー時のチェック項目

フロントエンドのコードレビューでは、下記のようなポイントをチェックすると良いでしょう。

HTMLタグは正しい用途で使われているか
aria属性とUIの状態に不整合はないか
role属性が過度に使われていないか
フォーカス移動が自然に行えているか

チーム内で「アクセシビリティのガイドライン」をまとめておくと、誰が実装しても一定の水準が保たれます。

WAI-ARIA実装で大切な考え方

WAI-ARIAはあくまでも、アクセシビリティを補強する仕組みです。 HTMLを正しくマークアップすることが前提で、その上で必要な箇所に補足情報を加えるという考え方が重要です。

また、すべての利用者が使いやすいWebサイトとは何かを、常に意識することも大切ですね。見た目がきれいに整っていても、キーボード操作だけでは使いにくい、スクリーンリーダーでは内容が伝わらない、という状態だと一部の人にとっては利用しづらいサイトになってしまいます。

まとめ

WAI-ARIAは、Webコンテンツのアクセシビリティを向上させるための役立つ仕組みです。しかし、HTMLのセマンティクスを優先しつつ、必要な箇所だけに適切なaria属性やroleを付与するのがベストプラクティスです。

複雑なUIであっても、ちょっとした設定によって「この要素はどのような役割を持っているのか」「いまの状態はどうなっているのか」を正しく伝えられるようになります。初心者の皆さんも、まずは基本的なHTMLタグを正しく使い、そのうえでWAI-ARIAを使うと良いでしょう。

WAI-ARIAをうまく取り入れながら、幅広いユーザーが快適に利用できるWebサイトを目指してみてください。