ARIA と HTML

ほとんどのデベロッパーは、現代の Google の標準的なマークアップ言語を ウェブ、ハイパーテキスト マークアップ言語（HTML）。 クラウド コンピューティング モデルと Accessible Rich Internet Applications（ARIA） （旧称 WAI-ARIA）: その内容、使用方法、いつ、どのような場合を使用するか。

HTML と ARIA は、デジタル プロダクトのアクセシビリティを向上させるうえで重要な役割を果たします。 特にスクリーン リーダーなどの支援技術（AT）では特にそうです。 どちらも点字や点字などの代替形式にコンテンツを変換するために使用されます。 テキスト読み上げ（TTS）。

ARIA の簡単な歴史と、ARIA が重要な理由、ARIA の時期と方法について確認しましょう。 おすすめします。

ARIA の概要

ARIA は 2008 年に Web Accessibility Initiative（WAI） W3C（World Wide Web Consortium）の一部で、 インターネットを規制しています。

ARIA は真のプログラミング言語ではなく、追加できる属性のセットです HTML 要素を使用してアクセシビリティを向上します。これらの属性は ユーザー補助 API を介した支援技術に対する役割、状態、財産 最新のブラウザでは検出できません。このコミュニケーションは、ユーザー補助機能を介して 表示されます。

「WAI-ARIA」 Accessible Rich Internet Applications Suite は、ウェブ アプリケーションを コンテンツやウェブ アプリケーションを開発しています。これは、 特に動的コンテンツや高度なユーザー インターフェース制御で役立ちます HTML、JavaScript、および関連する技術を使用して開発されました。"

<ph type="x-smartling-placeholder"></ph> WAI グループ をご覧ください。

ユーザー補助ツリー

ARIA は、ユーザー エクスペリエンスを向上させるために、正しくないコードや不完全なコードを修正します。 ユーザー補助の一部を変更、公開、拡張することで、 表示されます。

ユーザー補助ツリーはブラウザによって作成され、 ドキュメント オブジェクト モデル（DOM）のツリー。DOM ツリーと同様に、アクセシビリティ ツリーも すべてのマークアップ要素、属性、テキストを表すオブジェクトが含まれる 説明します。ユーザー補助ツリーは、プラットフォーム固有のユーザー補助でも 支援技術が理解できる表現を提供する API です。

ARIA 自体は、要素の機能や外観には影響しません。 つまり、AT のユーザーのみが、 ARIA とそれのない ARIA があります。つまり、デベロッパーが単独で責任を負い、 要素を適切に作成し、スタイル設定の 可能な限りアクセスしやすくすることです

ARIA の主な機能は、ロール、プロパティ、状態/値の 3 つです。

ロールは、ページやアプリ内の要素、つまりどのような要素であるかを定義します。

<div role="button">Self-destruct</div>

プロパティは、オブジェクトの特性や関係を表します。

<div role="button" aria-describedby="more-info">Self-destruct</div>

<div id="more-info">This page will self-destruct in 10 seconds.</div>

状態/値は、要素に関連付けられている現在の条件またはデータ値を定義します。

<div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

<div id="more-info">
  This page will self-destruct in 10 seconds.
</div>

1 行のコードで ARIA の 3 つの要素をすべて使用できますが、 必要ありません。代わりに、次の作業が完了するまで、ARIA のロール、プロパティ、状態/値をレイヤ化します。 ユーザー補助の最終目標を達成しましたARIA を コードベースによって、AT ユーザーが必要な情報をすべて ウェブサイト、アプリ、その他のデジタル商品を適切かつ公平に使用する。

最近、Chrome DevTools で 完全なアクセシビリティツリーを デベロッパーが自身のコードがどのような影響を 学びました。

ARIA を使用する場合

2014 年、W3C は HTML5 の勧告を正式に発表しました。付属の <main> などのランドマーク要素の追加を含む、大きな変更が行われました。 <header>、<footer>、<aside>、<nav>、および hidden などの属性 required。これらの新しい HTML5 要素と属性を、 ブラウザのサポートの増加に伴い、ARIA の特定部分の重要度が下がりました。

ブラウザが ARIA の暗黙的ロールを持つ HTML タグをサポートしている場合 同等のものであるため、通常は要素に ARIA を追加する必要はありません。ARIA は どのロール、状態、プロパティでも使用できないロール、状態、プロパティが 作成します。現時点では、これらの属性は有用です。

ここで、最終的な質問です。ARIA はどのような場合に使用すべきか？幸い WAI グループは ARIA の 5 つのルールを参考にして、 要素にアクセスしやすくします。

ルール 1: ARIA を使用しない

はい、そのとおりです。要素に ARIA を追加しても、本質的に アクセスしやすくなります。WebAIMillion の年次アクセシビリティ レポート ARIA を搭載したホームページが ARIA を導入しない場合と比べ、検出されたエラーが平均で 70% 多くなっています。 これは ARIA 属性が正しく実装されていないためです。

このルールには例外があります。HTML 要素の場合は ARIA が必要です ユーザー補助はサポートされていませんその理由としては、設計が 特定の HTML 要素を許可しているか、または必要な機能/動作が許可されていない 使用できます。しかし、そのような状況は希少であるべきです。

<a role="button">Submit</a>

<button>Submit</button>

判断に迷う場合は、セマンティック HTML 要素を使用します。

ルール 2: HTML に（不要な）ARIA を追加しない

ほとんどの場合、HTML 要素はすぐに使用でき、ARIA を追加する必要はありません。実際、ARIA を使用するデベロッパーは多くの場合、インタラクティブな要素の場合に要素を機能させるために、コードを追加しなければなりません。

<h2 role="tab">Heading tab</h2>

<div role="tab"><h2>Heading tab</h2></div>

HTML 要素を なります。

ルール 3: キーボード ナビゲーションを常にサポートする

インタラクティブ（無効ではない）ARIA コントロールはすべて、キーボードでアクセス可能でなければなりません。マイページ tabindex = "0"を追加できる通常はフォーカスが不要な要素に キーボードのフォーカスを受け取ります。正の値のタブ インデックスを 整数 キーボードのフォーカス順序の問題を回避できます。

<span role="button" tabindex="1">Submit</span>

<span role="button" tabindex="0">Submit</span>

ルール 4: フォーカス可能な要素を非表示にしない

必要な要素に role= "presentation" または aria-hidden= "true" を追加しない （tabindex= "0" が指定された要素を含む）をフォーカスします。スペースを ロール / 状態を要素に割り当てると、それらのロール / 状態が AT に スキップする必要もありません。これは混乱や悪化の原因となり 要素を操作しようとするユーザーの妨げとなります。

<div aria-hidden="true"><button>Submit</button></div>

<div><button>Submit</button></div>

ルール 5: インタラクティブな要素にアクセス可能な名前を使用する

インタラクティブ要素の目的を最初にユーザーに伝えておく必要があります。 操作方法を知ってもらうことができます。すべての要素に AT を使用するユーザー向けのアクセス可能な名前 できます。

ユーザー補助機能用の名前には、要素で囲まれたコンテンツ（ <a>）、代替テキスト、ラベルです。

次のコードサンプルでは、ユーザー補助機能用の名前は「赤い革」です。 表示されます。

<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>

<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>

<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>

要素のユーザー補助機能用の名前を確認するには、Chrome DevTools を使用したユーザー補助ツリーの調査や、スクリーン リーダーでのテストなど、さまざまな方法があります。

HTML の ARIA

HTML 要素を単独で使用することをおすすめしますが、ARIA 要素は 特定の状況で追加されますたとえば、HTML を ARIA とペアにして、 環境が原因で高レベルの AT サポートが必要なパターンが または、適切に実装されていない HTML 要素の代替手段として、 すべてのブラウザでサポートされています。

もちろん、ARIA を実装するための推奨事項は HTML。最も重要なこと: オーバーライドしない デフォルトの HTML ロールを無効にしたり、冗長性を減らしたり、意図しない副作用を把握したりできます。

例をいくつか見てみましょう。

<a role="heading">Read more</a>

<a aria-label="Read more about some awesome article title">Read More</a>

<ul role="list">...</ul>

<ul>...</ul>

<details>
  <summary role="button">more information</summary>
  ...
</details>

<details>
  <summary>more information</summary>
  ...
</details>

ARIA の複雑さ

ARIA は複雑なため、使用する際は常に注意が必要です。一方、 このレッスンのコードサンプルは非常に簡単で、 カスタムパターンはすぐに複雑になります

注意すべき点は数多くありますが、これらに限定されません。 キーボード操作、タッチ インターフェース、AT/ブラウザのサポート、翻訳のニーズ、 環境の制約、レガシーコード、ユーザー設定などです少しだけ コーディングの知識が一切不要な場合、 誤りです。コードをシンプルにすることを忘れないでください。

上述の警告はさておき、デジタル アクセシビリティはオールオアナッシングではなく のような灰色の領域が許容される範囲です。 複数のコーディングソリューションは 「正解」と言えます状況に応じて使い分けることができます。 重要なのは、学習とテストを続け、 すべての人に開かれたデジタル世界。

理解度をチェックする

ARIA と HTML に関する知識をテストする