0Pricing
HTML Academy · レッスン

ARIAとネイティブHTMLの使い分け

ARIAの第一原則に従い、ネイティブのセマンティクスを優先します

「ARIAとネイティブHTMLの使い分け」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

ARIAとは

ARIA（Accessible Rich Internet Applications）は、支援技術のアクセシビリティを向上させるためにHTMLへ追加できる属性のセットです。ネイティブHTMLのセマンティクスだけでは不十分な場合を補います。

ARIAの第一原則

ARIAに関する最も重要なガイドラインは、ネイティブHTMLで実現できる場合はARIAを使わないことです。

<!-- BAD: ARIA on a div -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>

<!-- GOOD: use a real button -->
<button type="submit">Submit</button>

<!-- Native HTML elements:
  - Are keyboard accessible by default
  - Have correct semantics built in
  - Work in more contexts
  - Require less code
-->

ネイティブHTMLだけでは不十分な場合

次のような場合にARIAが必要です。

  • カスタムUIコンポーネントにHTMLで相当する要素がない（タブ、コンボボックスなど）
  • ネイティブ要素のロールを上書きする必要がある
  • 動的なコンテンツの更新をアナウンスする必要がある
  • 要素間の複雑な関係を明示する必要がある

ARIAは動作を追加しない

重要な誤解があります。ARIAが追加するのはアクセシビリティのメタデータであり、機能ではありません。

<!-- Adding role="button" to a div does NOT:
  - Make it keyboard-focusable (add tabindex="0")
  - Make Enter/Space activate it (add event listeners)
  - Make it styled like a button (add CSS)
-->

<!-- You must implement ALL behavior yourself -->
<!-- Native <button> handles all this for free -->

ARIAの分類

ARIAの属性には、次の3つのカテゴリーがあります。

  • ロール — 要素が何であるかを定義します：role="button"、role="dialog"
  • プロパティ — 静的な特性を説明します：aria-label、aria-required
  • ステート — 動的な状態を説明します：aria-expanded、aria-checked

セマンティックHTMLとARIAの対応関係

ほとんどのHTML要素には、すでに暗黙的なARIAロールがあります。

<nav>   ≡  role="navigation"
<main>  ≡  role="main"
<aside> ≡  role="complementary"
<header> ≡ role="banner" (page-level)
<footer> ≡ role="contentinfo" (page-level)
<button> ≡ role="button"
<a href> ≡ role="link"
<h1-h6> ≡ role="heading"
<ul>    ≡  role="list"

ARIAの一般的な正しい使用例

ARIAの正当な使用例：

<!-- 1. Custom dropdown (no native equivalent): -->
<div role="combobox" aria-expanded="false">...</div>

<!-- 2. Loading state announcement: -->
<div role="status" aria-live="polite">Loading results...</div>

<!-- 3. Override landmark label: -->
<nav aria-label="Primary navigation">...</nav>

<!-- 4. Associate error with input: -->
<input aria-describedby="error-msg">
<span id="error-msg" role="alert">Invalid email</span>

ARIAの誤った使用

ARIAでよくある間違い：

<!-- BAD: ARIA role contradicts the element -->
<h2 role="button">Heading</h2>  <!-- don't turn a heading into a button -->

<!-- BAD: ARIA on an unsupported element -->
<div role="listitem">Item</div>  <!-- listitem must be inside list role -->

<!-- BAD: ARIA where HTML works fine -->
<p role="paragraph">Text</p>  <!-- p already has paragraph semantics -->

<!-- BAD: aria-label on hidden element -->
<span aria-hidden="true" aria-label="something">  <!-- contradictory -->

ランドマークロール

ARIAのランドマークロールを使うと、スクリーンリーダーのユーザーはページの領域間を移動できます。

<div role="banner">     <!-- header for the whole page -->
<div role="navigation">  <!-- major navigation -->
<div role="main">        <!-- main content -->
<div role="complementary"> <!-- aside content -->
<div role="contentinfo"> <!-- page footer -->
<div role="search">      <!-- search form -->
<div role="form">        <!-- form with label -->

<!-- These are ONLY needed if using divs instead of semantic elements -->
<!-- Prefer the native HTML elements instead -->

ARIA実装のテスト

ARIAが正しく設定されていることを確認する方法：

  • ChromeまたはFirefoxのDevToolsにあるAccessibilityパネルを使用する
  • VoiceOver（Mac）またはNVDA（Windows）で読み上げを聞く
  • axe DevTools拡張機能を実行する
  • アクセシビリティツリーを確認する — 期待どおりの内容になっていますか

ARIA Hiddenの落とし穴

aria-hiddenでよくある間違い：

<!-- BAD: aria-hidden on element that still receives focus -->
<button aria-hidden="true">Close</button>
<!-- The button is still focusable but invisible to screen readers
     Screen reader users reach it via Tab but hear nothing -->

<!-- GOOD: for focus + hide, use hidden attribute or display:none: -->
<button hidden>Close</button>  <!-- removes from both tab order and AT -->

<!-- Or: if you must keep visible: -->
<button style="display:none" aria-hidden="true">Close</button>

確認

divにrole="button"を追加すると、自動的に何が得られますか。

まとめ：ARIAとネイティブHTML

ARIAで重要な点：

  • 第一原則：可能な場合はネイティブHTMLを使う
  • ARIAが追加するのはセマンティクスだけ — 動作は自分で実装する必要があります
  • 3つのカテゴリー：ロール、プロパティ、ステート
  • ランドマークロールはスクリーンリーダーによるナビゲーションに役立つ
  • DevToolsのAccessibilityパネルとスクリーンリーダーでテストする

よくある質問

「ARIAとネイティブHTMLの使い分け」レッスンは無料ですか？

はい。「ARIAとネイティブHTMLの使い分け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「ARIAとネイティブHTMLの使い分け」で何を学びますか？

ARIAの第一原則に従い、ネイティブのセマンティクスを優先します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「ARIAとネイティブHTMLの使い分け」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ARIAとネイティブHTMLの使い分け
  2. role button alert dialog landmark
  3. aria-label aria-labelledby aria-describedby
  4. aria-hiddenとaria-live
← HTML Academyに戻る