原則として、アクセシビリティのための追加のマークアップは別個のWAI-ARIAテクノロジーを介して実装されますが、現代のブラウザーおよび現代のスクリーンアクセスプログラムによる標準HTML5セマンティック構造は、支援技術の対応するARIA属性として認識されます。 簡単に言えば、これは、理論的には、次の2種類のレイアウトがスクリーンリーダーの観点から似ていることを意味します。
リスト1：
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title> 1</title> <!--[if lt IE 9]> <script type="text/javascript"> var e = ("aside,footer,header,main,nav").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> </head> <body> <header> </header> <aside> <nav> </nav> </aside> <main> </main> <footer> </footer> </body> </html>
記事全体を通じてbodyコンテナで何が起こるかだけに関心があるため、以降のリストではbodyのレイアウトのみが表示され、リスト1のように他のすべてが暗示されることにさらに同意します。
リスト2：
<div role="banner"> </div> <div role="complementary"> <div role="navigation"> </div> </div> <div role="main"> </div> <div role="contentinfo"> </div>
したがって、リスト1はHTML5の標準的なセマンティック機能を使用して構成され、リスト2はdivを介した古き良きブロックレイアウトを使用しますが、WAI-ARIAマークアップを追加しています。 アクセシビリティ標準、ブラウザ、および支援技術の開発者が考えたように、これらの2つのページは同じスクリーンアクセスプログラムで処理する必要があると想定されていますが、ここでは生活の散文に直面しています。
最も人気のある2つのスクリーンアクセスプログラム：JAWS（バージョン15.0）とNVDA（バージョン2014.3）、およびユーザーの間で最も人気のある2つのブラウザー：Internet Explorer（バージョン11）とFirefox（バージョン32）を使用します。 その後、リスト1のセマンティックエリアを処理するためのすべての可能な構成をテストします。その結果、次の結果が得られます。
| タグ | あご
インターネットエクスプローラー | あご
Firefox | NVDA
インターネットエクスプローラー | NVDA
Firefox |
|---|---|---|---|---|
| 脇に | はい | はい | いや | はい |
| フッター | いや | はい | いや | はい |
| ヘッダー | いや | はい | いや | はい |
| メイン | はい | はい | いや | はい |
| ナビゲーション | はい | はい | いや | はい |
理論的にはすべてが期待どおりに機能しないことがわかりました。 さらに、ソフトウェアバージョンの減少により、一部の構造のサポートが不均等に低下し始める場合があります。 しかし、公式マニュアルと技術標準の主なものはそれについて読むことができそうにありません、そして、例えば、アクセシビリティがそこにあり、作業明細書に書かれていても、経験豊富で細心のアクセシビリティQAエンジニアだけがそのような問題を特定できます。社会志向のウェブサイトや州のウェブサイトの開発の場合、およびインターネットバンキングなどのアクセシビリティが競争上の優位性として暗示されているプロジェクトの場合。 アクセシビリティに焦点を当てていないプロジェクトは問題外です。
もちろん、WAI-ARIAの最終バージョンが最近採用されたため、そのサポートのユーザーエージェントサポートガイドは最終的な形ではまだ存在していませんが、将来、すべてが落ち着いたときに、そのようなものも統一されることを期待できます。 しかし、プロジェクトは開発中であり、すでに進行中であり、誰も優雅な劣化をキャンセルしていません。 したがって、一方でHTML5のセマンティックノベルティを使用し、他方で、どのようなシナリオでも支援技術を傷つけないように構成することは理にかなっています。
これは、HTML5のセマンティクスとWAI-ARIAマークアップの両方を同時に使用することで実現できます。 つまり、アクセス可能なリッチインターネットアプリケーションを介してHTML5のセマンティックエリアを保護するかのように、これらのタグに対応するWAI-ARIAロールを追加する必要があります。
ここで、WAI-ARIAマークアップ属性は標準のHTML5セマンティック構造よりも優先度が高いことをすぐに警告する必要があります。たとえば、メインタグに対して値contentinfoを持つロール属性が記述されている場合、スクリーンアクセスプログラムはフッターであるかのように呼び出します。 したがって、WAI-ARIAの不在は、その誤った使用の存在よりも優れています。 言い換えると、「あなたはどうやってそれを理解しないのかわからない」が、この記事はレイアウトの面付けのこの簡単な方法を教えることを目的としている。
概して、すべてはWAI-ARIAロールと標準HTML5セマンティック構造の正しい対応を学ぶ必要に帰着します。 基本的に、リスト1および2から、主な対応はすでに明確になっています。
| HTML5タグ | WAI-ARIAの役割 |
|---|---|
| フッター | contentinfo |
| ヘッダー | バナー |
| メイン | メイン |
| ナビゲーション | ナビゲーション |
ところで、バナーの役割に関しては、広告バナーではなく、ページのヘッダー全体をラップすることを意図していることを具体的に説明します。 つまり、実際には、ヘッダータグの直接的な類似物です。 実践が示すように、「バナー」という言葉の一部は誤解を招くものであり、広告バナーにこの値を割り当て始めますが、これは間違っています。
上記の対応により、WAI-ARIAのHTML5の基本的なセマンティック領域を正しくレイアウトできます。 ただし、それらのすべてがそこに記載されているわけではありません。 実際には、HTML5のいくつかのセマンティック構造には、WAI-ARIAの直接の類似物がありません。たとえば、これは記事タグに関係し、次に、それらのいくつかではそれほど単純ではありません。脇に。
デフォルトでは、脇タグは補完的な役割の類似物としてスクリーンリーダーによって表示されます。 原則として、ほとんどの場合、これは事実であるはずですが、脇の可能な使用の範囲は非常に広いので、補完の役割があまり適切ではない状況があるかもしれません。
率直に言って、ここで私たちはすでにかなり薄い味覚と非視覚的インターフェースのデザインの主観的理解に着手しています。ここでの議論は、視覚的インターフェースの世界におけるフォントや配色についての議論にほぼ対応します。 それにもかかわらず、この側面のアイデアを与えるために1つの例を挙げます。
リスト3：
<header role="banner"> </header> <aside role="complementary"> <nav role="navigation"> </nav> </aside> <main role="main"> <aside role="note"> </aside> </main> <footer role="contentinfo"> </footer>
補完的な役割は、画面アクセスプログラムに対して、メインコンテンツに直接関係しない追加情報を含むサイトとしてのインターフェイスユニットを表します。 ただし、この例では、ナビゲーションバーをラップするページ全体のレベルと、タグをラップするメインコンテンツ内の2つのブロックを区別します。 明らかに、本質的にこれらは追加情報を持つ非常に異なるブロックであるため、2番目に特定のメモのあるセクションとしてブロックをマークするメモの役割を割り当てました。
このようなレイアウトテクニックを使用するには、非ビジュアルインターフェースのロジックをもう少し理解する必要があるため、肩からハッキングする価値はありません。 補完的な役割を使用することをお勧めします。これが適切であると確信している場合にのみ、より複雑なインターフェイスの移動を使用します。 リスト3で注記の代わりに補完を使用した場合、他の方法よりも優れているでしょう。
ちなみに、noteロールにはセマンティックHTML5タグの直接的な類似性がないため、一方の方向と他方の方向の両方で完全な互換性はありません。 このような役割とスクリーンアクセスプログラムは少し異なる方法で処理されるため、プロジェクトにすべての落とし穴を理解する真面目なアクセシビリティスペシャリストがいなければ、それらをまったく混乱させないほうがよいでしょう。
さらに、HTML5の複数の同一のセマンティックエリアを使用する問題は、別の方法で、つまり説明ラベルを追加することで解決できます。 たとえば、インターフェイスに複数のナビゲーションパネルがある場合、画面アクセスプログラムのユーザーがその違いをすぐに理解できるように、その目的を示すことは理にかなっています。
リスト4：
<header role="banner"> </header> <aside role="complementary" aria-label=" "> <nav role="navigation" aria-label=" "> </nav> <nav role="navigation" aria-label=""> </nav> </aside> <aside role="complementary" aria-label=""> </aside> <main role="main"> <aside role="complementary" aria-label=""> </aside> </main> <footer role="contentinfo"> </footer>
つまり、aria-label属性を使用すると、このブロックの目的を説明する追加のテキストラベルを指定できます。 さらに、aria-labelは役割を正確に補完することを理解することが重要です。したがって、テキストのブロックのセマンティック目的に関する情報を複製する必要はありません。たとえば、「セクションナビゲーションエリア」であるとnavに記述する必要はなく、「セクション」と記述するだけです。 さて、メインタグについては、原則として1つのコピーでのみページ上に存在する必要があり、その目的は非常に明確であるため、aria-labelを登録する必要はありません。 ただし、フッター、ヘッダー、またはナビゲーションは別として、状況に応じて説明ラベルを追加する必要があります。 原則として、同じタイプのページにそのような要素がいくつかある場合、これは理にかなっています。これは、同じフッターまたはヘッダーではそれほど一般的ではありません。
この記事で説明されている単純なレイアウト手法を順守すれば、すべての主要な構成インターフェースでアクセス可能なだけでなく、等しくアクセスできるようになります。 そして最も重要なことは、ロールとaria-label属性は、音声または触覚情報出力を介したスクリーンアクセスプログラムによるページの表示方法にのみ影響するため、これらすべてが視覚的なレイアウトを壊さないことです。
最後に、HTML5とWAI-ARIAのセマンティック機能に関する詳細情報を提供する2つのリンクがあります。