---
title: "WAI-ARIAとは？支援技術に役割を伝えるアクセシビリティの基礎"
description: "HTML標準だけでは支援技術に伝わらないUIの役割や状態を補うのがWAI-ARIAです。まずHTMLを正しく使うという大前提を踏まえたうえで、role・aria-label・aria-expandedなど基本の属性の使い方を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/aria-term"
markdown: "https://giga-site.com/articles/aria-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# WAI-ARIAとは？支援技術に役割を伝えるアクセシビリティの基礎

ボタンのように見えるけれど実はdivで作られた要素は、スクリーンリーダーにはボタンだと伝わりません。WAI-ARIAは、こうした要素に役割や状態を補足し、支援技術に正しく伝えるための仕組みです。基本の考え方と、まずHTMLを正しく使うという原則、そして使うときの注意点をやさしく解説します。

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

## WAI-ARIAとは

WAI-ARIA（ワイ・エーリア）は、Accessible Rich Internet Applicationsの略で、Webアクセシビリティを高めるための仕様です。HTMLだけでは表現しきれない要素の役割・状態・属性を、支援技術に伝える追加情報を提供します。

具体的には、role属性で要素の役割（ボタン、タブ、ダイアログなど）を示し、aria-で始まる属性（aria-labelやaria-expandedなど）で名前や状態を補足します。

スクリーンリーダーはこれらの情報を読み上げに反映するため、目で見て分かることを耳でも分かるように橋渡しできます。動的な操作が多い現代のWebアプリで特に役立ちます。

## どんなときに使うのか

ARIAが活躍するのは、標準のHTMLタグだけでは役割や状態を伝えきれない場面です。たとえば、JavaScriptで独自に作ったタブUI、開閉するメニュー、モーダルダイアログなどが代表例です。

開いているか閉じているかといった状態は、見た目では分かってもHTMLの構造だけでは機械に伝わりません。aria-expandedのような属性で状態を示すことで、スクリーンリーダー利用者にも今の状態が伝わります。

画像でないのにアイコンだけで意味を表しているボタンなどには、aria-labelで読み上げ用の名前を補うと、操作の意味が伝わるようになります。

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

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

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

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

## まずHTMLを正しく使うのが原則

ARIAには重要な原則があります。それは「ネイティブのHTML要素で表現できるなら、ARIAより先にそれを使う」という考え方です。標準のbutton要素やa要素には、はじめから適切な役割やキーボード操作が備わっています。

divにrole=buttonを付けてボタンらしく見せることもできますが、その場合はキーボードで操作できるようにする処理などを自分で補わなければなりません。最初から本来のbuttonを使うほうが安全で確実です。

つまりARIAは「HTMLで足りない部分を補う」ためのものであり、HTMLの代わりに乱用するものではありません。

## 使うときの基本手順

ARIAを取り入れるときは、いきなり属性を足すのではなく、まず本来のHTMLで表現できないかを確認するところから始めます。

次の順序で進めると、ARIAの乱用を避けつつ、必要な部分だけを的確に補えます。各段階で本当にその追加が必要かを見直すことが大切です。

1. まず標準のHTMLタグ（button、a、labelなど）で表現できないか検討する
2. 標準で足りない場合のみrole属性で役割を補う
3. 名前が伝わらない要素にはaria-labelやaria-labelledbyで名前を付ける
4. 開閉や選択などの状態はaria-expandedやaria-selectedなどで示す
5. スクリーンリーダーで実際に読み上げを確認し、意図どおり伝わるか検証する

## まとめと確認の場面

WAI-ARIAは支援技術に役割や状態を伝える強力な仕組みですが、まずHTMLを正しく使い、足りない部分だけを補うのが鉄則です。誤った使い方はかえって混乱を招くため、実際に読み上げて検証することが欠かせません。

作成したUIを関係者やテスト担当に見てもらいたいときは、ギガサイト便でHTMLやZIPをドロップして共有URLを発行すれば手早く渡せます。同じURLのままファイルを差し替えられるため、ARIAの修正版を送り直さずに中身だけ更新して再確認してもらうこともできます。

## よくある質問

### ARIAは必ず使わなければならないものですか？

いいえ。標準のHTMLで役割や状態を表現できる場合は、ARIAより先にそちらを使うのが原則です。ARIAはHTMLで補いきれない部分を埋めるための仕組みと考えてください。

### role属性とaria-属性の違いは何ですか？

role属性は要素の役割（ボタンやタブなど）を示し、aria-で始まる属性は名前や状態（aria-labelやaria-expandedなど）といった追加情報を伝えます。役割と補足情報という役割分担です。

### divにrole=buttonを付ければボタンとして十分ですか？

見た目と役割は伝わりますが、キーボード操作などを自分で実装する必要があります。本来のbutton要素にはそれらが備わっているため、可能なら標準のbuttonを使うほうが安全です。

### ARIAが正しく機能しているか確認する方法は？

スクリーンリーダーなどの支援技術で実際に読み上げを聞き、役割や状態が意図どおり伝わるかを確かめるのが確実です。見た目だけでは伝わり方を判断できません。

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

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

## 関連記事

- [WAI-ARIAとは？支援技術にUIを伝える仕組みの基礎](https://giga-site.com/articles/what-is-aria/index.md)
- [aria-labelとは？ボタンやアイコンに名前をつける属性](https://giga-site.com/articles/what-is-aria-label/index.md)
- [セマンティックHTMLとは？意味のあるタグで構造を表す基礎](https://giga-site.com/articles/semantic-html-term/index.md)
- [コントラスト比とは？文字が読みやすい配色の基礎](https://giga-site.com/articles/color-contrast-term/index.md)
- [alt属性とは？画像の代替テキストの役割](https://giga-site.com/articles/what-is-alt-text/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "WAI-ARIAとは？支援技術に役割を伝えるアクセシビリティの基礎",
  "description": "HTML標準だけでは支援技術に伝わらないUIの役割や状態を補うのがWAI-ARIAです。まずHTMLを正しく使うという大前提を踏まえたうえで、role・aria-label・aria-expandedなど基本の属性の使い方を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/aria-term",
  "url": "https://giga-site.com/articles/aria-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ARIAは必ず使わなければならないものですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。標準のHTMLで役割や状態を表現できる場合は、ARIAより先にそちらを使うのが原則です。ARIAはHTMLで補いきれない部分を埋めるための仕組みと考えてください。"
      }
    },
    {
      "@type": "Question",
      "name": "role属性とaria-属性の違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "role属性は要素の役割（ボタンやタブなど）を示し、aria-で始まる属性は名前や状態（aria-labelやaria-expandedなど）といった追加情報を伝えます。役割と補足情報という役割分担です。"
      }
    },
    {
      "@type": "Question",
      "name": "divにrole=buttonを付ければボタンとして十分ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "見た目と役割は伝わりますが、キーボード操作などを自分で実装する必要があります。本来のbutton要素にはそれらが備わっているため、可能なら標準のbuttonを使うほうが安全です。"
      }
    },
    {
      "@type": "Question",
      "name": "ARIAが正しく機能しているか確認する方法は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "スクリーンリーダーなどの支援技術で実際に読み上げを聞き、役割や状態が意図どおり伝わるかを確かめるのが確実です。見た目だけでは伝わり方を判断できません。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```