ARIA の概要

ARIA と非ネイティブ HTML セマンティクスの概要

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

ここまでは、ネイティブ HTML 要素を使用することをおすすめします。 組み込みセマンティクスをサポートしていますが、場合によっては ネイティブ HTML では機能しませんたとえば、現在のところ、ラベルには ポップアップ メニュー用の標準化された HTML 要素です。北欧 「the」のようなセマンティック特性を提供する HTML 要素があるか 「ユーザーはできるだけ早くこの件について知らせる必要があります」という警告が表示されます。

このレッスンでは、HTML で処理できないセマンティクスを表現する方法について説明します。 考えてみましょう

Web Accessibility Initiative の Accessible Rich Internet Applications 仕様（WAI-ARIA、または ARIA など）は、管理できないユーザー補助の問題がある領域の橋渡しに適しています。 実装する必要がありますその仕組みとして、オブジェクト属性を変更する属性を 変換する方法を定義します。それでは 例です。

次のスニペットでは、カスタム チェックボックスの一種としてリストアイテムを使用しています。「 CSS「チェックボックス」クラスは要素に必要な視覚的特性を提供します。

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

これは視覚に訴えるユーザーにとっては問題ありませんが、スクリーン リーダーは 要素がチェックボックス用の要素であるため、ロービジョンのユーザーは 要素全体が除外されます。

一方、ARIA 属性を使用すると、不足している情報を要素に与えることができます。 スクリーン リーダーが適切に解釈できるようにする必要があります。ここでは、role を追加し、 aria-checked 属性を使用して、要素をチェックボックスとして明示的に識別し、 デフォルトでオンになっていることを指定します。これでリストアイテムが ユーザー補助ツリーとスクリーン リーダーでは、それがチェックボックスとして正しく報告されます。

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA は、標準の DOM アクセシビリティ ツリーを変更、拡張することで機能します。

標準の DOM アクセシビリティ ツリー。
ARIA 拡張ユーザー補助ツリー。

ARIA を使用するとユーザー補助を微妙に（あるいは根本的に）変えることができますが そのページの要素のみが変更されるだけですARIA 要素に本来備わっている動作を拡張しない動作が またはキーボード イベント リスナーを付与します。それは現在も 開発タスクに集中できます。

重要な点として、デフォルト サービス アカウントを再定義する必要は 学びました。使用方法に関係なく、標準の HTML <input type="checkbox"> は 追加するために role="checkbox" ARIA 属性を 必要があります。

また、特定の HTML 要素では、ARIA の処理方法が ロールと属性を使用できます。たとえば、標準の <input type="text"> 要素には、追加のロールや属性を適用できません。

HTML の ARIA 仕様をご覧ください。 をご覧ください。

ARIA のその他の機能も見てみましょう。

ARIA でできること

チェックボックスの例で見たように、ARIA は既存の要素のセマンティクスを変更できます。 または、ネイティブ セマンティクスが存在しない要素にセマンティクスを追加する。また、 メニューやタブなど、HTML にはまったく存在しないセマンティック パターンを表現する できます。多くの場合、ARIA を使用すると、実現できないウィジェット タイプの要素を作成できます。 記述できます

  • たとえば、ARIA によって、追加されたラベルや説明テキストが 支援技術 API を公開しています。
<button aria-label="screen reader only label"></button>
  • ARIA は、 制御するカスタム スクロールバーなど、標準の親/子接続を使用して 特定の地域に限定されます。
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • ARIA はページの一部を「ライブ」にできます。攻撃者はすぐに 支援技術の開発に集中できます。
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

ARIA システムの重要な側面の一つは、ロールのコレクションです。ロール 特定の UI の簡易的なインジケーターに相当し パターンです。ARIA は、role を介して使用できるパターンの語彙を提供します。 属性を含めることができます。

前の例では role="checkbox" を適用したとき、 「チェックボックス」に従うように要素を表示する支援技術パターンです。 確実にチェックされた状態（オンかオフか）を オンにされていることを確認し、マウスまたはスペースバーを使用して状態を切り替えることができます。 標準的な HTML のチェックボックス要素と よく似ています

実際 スクリーン リーダーではキーボード操作機能が特に多く カスタム ウィジェットを作成する際は、 role 属性は、常に tabindex と同じ場所に適用されます。 属性これによりキーボード イベントが正しい場所に送られ、 その役割を正確に伝える要素に焦点を当てます

ARIA 仕様では、 role 属性に使用できる値の分類と関連する ARIA ロールと一緒に使用できる属性を定義します。最高だよ ARIA のロールと属性の仕組みに関する決定的な情報源 ブラウザや Google Chat でサポートされている方法でこれらのツールを 支援技術を開発しています。

使用可能なすべての ARIA ロールのリスト。

しかし、仕様は非常に詳細です。まずは ARIA を オーサリング手法に関するドキュメント をご覧ください。ここでは、使用可能な ARIA ロールの使用に関するベスト プラクティスと プロパティです。

ARIA には、HTML5 で利用できるオプションを拡張するランドマーク ロールも用意されています。詳しくは、 ランドマーク ロール設計 パターン 仕様をご覧ください。