---
title: "WAI-ARIAとは？支援技術にUIを伝える仕組みの基礎"
description: "見た目では分かるUIも支援技術には正しく伝わらないことがあります。WAI-ARIAはHTMLだけでは表現できない役割・状態・関係性を補う仕様です。使う前に知るべき「まずHTMLを正しく」という原則と、基本的な属性の使い方を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-aria"
markdown: "https://giga-site.com/articles/what-is-aria/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# WAI-ARIAとは？支援技術にUIを伝える仕組みの基礎

見た目では分かるボタンやタブも、支援技術には正しく伝わらないことがあります。WAI-ARIAは、HTMLだけでは表現しきれないUIの役割や状態を補い、スクリーンリーダーなどに意味を伝えるための仕様です。役割や使う上での原則など、基礎となる考え方を整理します。

> Source HTML: https://giga-site.com/articles/what-is-aria
> Article index: https://giga-site.com/articles/index.md

## WAI-ARIAとは

WAI-ARIA（Accessible Rich Internet Applications）は、W3Cが定めるアクセシビリティのための仕様です。HTMLの要素に属性を追加することで、その要素が「何であるか」「いまどんな状態か」を支援技術に伝えます。

たとえばdivやspanで作ったカスタムUIは、見た目はボタンやタブでも、支援技術にはただの箱としか認識されません。ARIAはこうした要素に役割や状態の情報を補い、スクリーンリーダー利用者にも操作できるようにします。

ARIAは見た目や動作そのものを変えるものではなく、あくまで「意味の情報」を追加する仕組みである点が重要です。

## role・property・stateの3要素

ARIAの属性は大きく3種類に分かれます。roleは要素の役割を示し、buttonやtab、dialogなどを指定して「これはボタンだ」と伝えます。

property（プロパティ）はあまり変化しない特性を表し、たとえばaria-labelで名前を与えるなどに使います。state（状態）は操作で変わる状態を表し、aria-expandedで開閉、aria-checkedで選択状態などを示します。

この3つを組み合わせることで、動的に変わるUIの状態まで支援技術へ正確に伝えられます。

## 実務ではどこで関係する？

WAI-ARIAは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

WAI-ARIAについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## ARIA利用の第一原則

ARIAの世界には「使わないで済むなら使わない方がよい」という第一原則があります。意外に聞こえますが、これはとても重要な指針です。

buttonやnav、入力フォームなど、ネイティブのHTML要素は最初から適切な役割と状態を持っています。これらを使えば、ARIAを書かなくても支援技術に正しく伝わります。標準要素で表現できることは、まず標準要素で実装するのが基本です。

ARIAが必要になるのは、標準HTMLでは表現しきれないリッチなUIを自作する場合などに限られます。

## ARIAを使うときの手順

カスタムUIにARIAを適用する際の基本的な流れは次のとおりです。誤用を避けるため、順を追って確認します。

ARIAは属性を足すだけでなく、操作や状態の更新まで実装して初めて意味を持ちます。役割の付与と挙動の実装をセットで考えることが大切です。

1. まず標準HTML要素で実装できないか検討する
2. 自作が必要なら、その部品の役割に合うroleを調べて指定する
3. 状態が変わる部品にはstate属性（aria-expandedなど）を付け、操作に合わせて値を更新する
4. キーボードだけで操作できるよう、フォーカスとキー操作も実装する
5. スクリーンリーダーで読み上げと操作を実際に確認する

## よくある誤用

ARIAは正しく使えば助けになりますが、誤用すると逆に利用者を混乱させます。たとえばroleを付けただけでキーボード操作を実装しないと、見えないボタンが操作できない状態になります。

また、状態を表すstate属性を動的に更新し忘れると、開いているのにaria-expandedがfalseのまま、といった食い違いが生まれます。間違ったARIAは、ARIAがないより悪い結果を招くこともあるため、設定したら必ず実機で検証することが欠かせません。

## 確認結果を関係者と共有する

アクセシビリティの検証は、開発者だけでなくデザイナーや担当者とも認識を合わせたい工程です。スクリーンリーダーでの読み上げ結果や挙動を、その場で再現できる形で見てもらえると確認が進みます。

検証用のHTMLを一時的なURLで共有したいときは、ギガサイト便にHTMLやZIPをドロップすれば共有URLが発行できます。認証や公開期限も選べるので、関係者だけにレビューを依頼する一時共有として扱いやすい仕組みです。

## よくある質問

### WAI-ARIAとアクセシビリティは同じ意味ですか？

同じではありません。アクセシビリティは誰もが使える状態を目指す広い考え方で、WAI-ARIAはその一部を実現する技術仕様です。ARIAは標準HTMLで足りない部分を補うものであり、ARIAを使うことだけがアクセシビリティ対応ではありません。

### ARIAを付ければ見た目も変わりますか？

変わりません。ARIAは支援技術に伝える意味情報を追加するだけで、画面上の見た目や標準の動作には影響しません。キーボード操作などの挙動は別途JavaScriptなどで実装する必要があります。

### roleはどんな要素にも付けてよいですか？

技術的には付けられますが、推奨されません。標準要素が持つ役割を上書きすると混乱を招きます。第一原則のとおり、まず標準HTML要素で表現できないかを検討し、自作UIなど必要な場面に限って適切なroleを指定します。

### ARIAの効果はどう確認すればよいですか？

もっとも確実なのは、実際にスクリーンリーダーで読み上げと操作を試すことです。自動チェックツールも誤りの発見に役立ちますが、文脈の妥当性までは判断しきれないため、最終的には実機での確認が望ましいです。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [aria-labelとは？ボタンやアイコンに名前をつける属性](https://giga-site.com/articles/what-is-aria-label/index.md)
- [WAI-ARIAとは？支援技術に役割を伝えるアクセシビリティの基礎](https://giga-site.com/articles/aria-term/index.md)
- [alt属性とは？画像の代替テキストの役割](https://giga-site.com/articles/what-is-alt-text/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "WAI-ARIAとは？支援技術にUIを伝える仕組みの基礎",
  "description": "見た目では分かるUIも支援技術には正しく伝わらないことがあります。WAI-ARIAはHTMLだけでは表現できない役割・状態・関係性を補う仕様です。使う前に知るべき「まずHTMLを正しく」という原則と、基本的な属性の使い方を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-aria",
  "url": "https://giga-site.com/articles/what-is-aria",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WAI-ARIAとアクセシビリティは同じ意味ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "同じではありません。アクセシビリティは誰もが使える状態を目指す広い考え方で、WAI-ARIAはその一部を実現する技術仕様です。ARIAは標準HTMLで足りない部分を補うものであり、ARIAを使うことだけがアクセシビリティ対応ではありません。"
      }
    },
    {
      "@type": "Question",
      "name": "ARIAを付ければ見た目も変わりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "変わりません。ARIAは支援技術に伝える意味情報を追加するだけで、画面上の見た目や標準の動作には影響しません。キーボード操作などの挙動は別途JavaScriptなどで実装する必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "roleはどんな要素にも付けてよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "技術的には付けられますが、推奨されません。標準要素が持つ役割を上書きすると混乱を招きます。第一原則のとおり、まず標準HTML要素で表現できないかを検討し、自作UIなど必要な場面に限って適切なroleを指定します。"
      }
    },
    {
      "@type": "Question",
      "name": "ARIAの効果はどう確認すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "もっとも確実なのは、実際にスクリーンリーダーで読み上げと操作を試すことです。自動チェックツールも誤りの発見に役立ちますが、文脈の妥当性までは判断しきれないため、最終的には実機での確認が望ましいです。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```