ARIAのWeb標準とHTMLアプリへのアクセス性
真にオープンで包括的なWebには、障害のあるユーザーが支援技術に依存して動的なWebコンテンツと最新のWebアプリケーションを楽しむことを可能にする技術が必要です。 W3CのアクセシビリティWeb標準は、障害のあるユーザーが効率的に使用できるAccessible Rich Internet Application（ARIA）をWebに追加することを目的としています。.
ARIAは、Web Accessibility Intitiative（WAI）によって公開されている多数のアクセシビリティ標準およびガイドラインの1つです。 HTMLドキュメントに簡単に挿入できる追加のマークアップを提供します。 WAI-ARIAはOpen Web Platformをターゲットとしたクロスプラットフォームでクロスデバイスのソリューションなので、Webサイトだけでなくゲーム、デジタルエンターテインメント、ヘルスケア、モバイル、その他の種類のアプリについても考えてください.
この記事では、WAI-ARIA規格の助けを借りて、HTML文書にアクセシビリティを追加する方法について説明します。.
ARIAフレームワーク
HTMLの構文は、開発者が要素を正しく記述し、その役割を識別し、それらの間の関係を指定することを常に可能にするわけではありません。それが彼らの感覚を完全に所有している訪問者にとってめったに問題ではない間、それは援助技術ユーザーがスクリーンで何が起こっているかについて理解して、彼らのオプションを模索するのを妨げることができます.
これはARIAが私たちの助けになるポイントです。というのも、それによってさまざまな要素の目的を定義することが可能になるからです。 ランドマークの役割, そしてその性質を説明する アリアプレフィックス属性. アリアプレフィックス属性には2つのタイプがあります。 プロパティ ページのライフサイクルを通して変化する可能性が低い機能について説明します。 州 ユーザーとのやり取りによって頻繁に変化する可能性があるものに関する情報を提供します。.
ランドマークの役割
ランドマークの役割 ARIAのRoles Modelの最もよく知られた形式があります（他のものはAbstract Roles、Widget Roles、およびDocument Structure Rolesです）。画期的な役割により、開発者は大規模な識別が可能になります。 知覚できる地域 支援技術のユーザーがすぐにアクセスしたいと思うかもしれないWebページで.
ARIAのランドマークの役割は8種類あり、それらは関連するHTMLタグの属性として追加する必要があります。.
ロール=”バナー”
バナーの役割は、個々のページだけでなく、サイト全体に関連するコンテンツに主に使用されることを目的としています。通常、ロゴやその他の重要なサイト全体の情報のために、サイトのメインヘッダーの属性として追加されます。 HTML文書またはアプリ内でバナーロールを一度だけ使用できることが重要です。.
ロール=”メイン”
主なランドマークの役割は、文書の主な内容に関連しています。どのHTMLページでも複数回使用することはできません。それは通常 ナビゲーションロールは、サイト上のリンクやリストなどのナビゲーション要素を含む領域を示すために使用されることを意図しています. 補足的なランドマークの役割は、サイトのメインコンテンツに関連する追加のコンテンツを表します。それはDOM階層の中で同じようなレベルに置かれる必要があります。 contentinfoロールは、著作権情報、法律およびプライバシーに関する声明など、さまざまな種類のメタデータが見つかる可能性がある地域の存在についてユーザーエージェントに通知します。通常、サイトのフッターに使用されます. フォームランドマークロールは、ユーザー入力を待っているフォームを示します。検索フォームにはあなたが使うべきです 検索の役割は一目瞭然で、支援技術がWebサイトの検索機能を識別するのに役立ちます。. WebドキュメントではなくWebアプリケーションとして宣言する地域に、アプリケーションランドマークの役割を使用できます。従来のWebサイトに含めることはお勧めできません。通常のブラウズモードからアプリケーションブラウズモードに切り替えることを支援技術に示唆しているためです。あなたは細心の注意を払ってこの画期的な役割を使うべきです. ロールを使用するとHTMLタグの意味を定義できますが、状態とプロパティを使用すると、タグとの対話方法に関する追加情報をユーザーに提供できます。状態とプロパティの両方には アリアプレフィックス属性 構文で アリア-*. 最もよく知られているARIA属性は、おそらくaria-requiredプロパティとaria-checked stateです。アリア必須は 財産 これはinput要素の恒久的な機能なので（つまりユーザーが入力する必要があります）、aria-checkedは 状態 チェックボックスは、ユーザーの操作により頻繁に値が変わる可能性があるためです。. 状態とプロパティはトークン値（事前定義された値の限られたセット）を取ることがあります。例えば、aria-liveプロパティは3つの異なる値を持つことができます。 オフ, 丁寧, 主張する. この例の構文は次のようになります。 それ以外の場合、アリアプレフィックス属性の値は次のように表されます。 ひも, 数字, 整数, IDの参照 または 真偽 値. サイト上のさまざまな要素間の関係を示すには、関係属性を使用します。これは、ドキュメント構造からは決定できません。例えば HTMLページの認識可能な領域にARIAの目印の役割を設定した後は、画面で発生したイベントに従ってARIAの接頭辞付きの状態と子要素のプロパティを変更すると、支援技術に非常に役立ちます。これは、フォームへの入力や検索クエリの実行など、ユーザーがサイトとやり取りする必要がある場合に非常に重要になります。. アクセシビリティ設計の一般的な経験則では、ユーザーインターフェイスの現在の状態は、支援技術によって常に認識可能である必要があります。たとえば、ユーザーがフォーム内のオプションを選択した場合、それは支援技術についても選択されているように見える必要があります。これは、次の構文でaria-selected状態を利用することで簡単に実現できます。 W3CのWAI-ARIAオーサリングプラクティスガイドラインは、あなたのサイトの視覚とアクセス可能なインターフェースを適切に調和させる方法について他にもたくさんの素晴らしいアイデアをあなたに与えることができます。. ARIAの役割と属性を使用することは時々冗長になることがあります。以下のようなHTML5のセマンティックタグを使うと 例えば、それを使用する必要はありません 形 画期的な役割を定義する あなたが既に追加したのであれば 隠された フォーム入力にHTML属性を追加する必要はありません。 アリア隠し ブラウザにデフォルトで含まれている状態.. 後者をマッピングする目的でW3C仕様に追加されました。 メイン セマンティックHTML要素へのARIAランドマークの役割. ロール=”ナビゲーション”
ロール=”補完的な”
role = "main". 関連記事、人気記事、最新のコメントは、自律補完コンテンツの典型的な例です.ロール=”contentinfo”
ロール=”形”
role = "検索" 代わりに.ロール=”サーチ”
ロール=”応用”
状態とプロパティ
アリアプレフィックス属性の構文
ARIAの状態とプロパティを利用する方法
1.リレーションシップ属性を持つ要素間のリレーションシップを構築する
aria-labelledby propertyは現在の要素をラベル付けする要素を識別する.aria-labelledby - 他の多くのことの中でも - 次のようにして見出しをARIAのランドマーク地域に結び付けることができます。これは見出しです
メインコンテンツ… 2.状態とプロパティを要素のライフサイクルと同期させる
3.視覚的インタフェースとアクセシブルインタフェースのマッチング
.ARIAを使いすぎないで
または , 最近のWebブラウザはデフォルトで適切なARIAセマンティクスを追加します。この場合、ARIAのランドマークの役割を別に設定することは意味がありません。. 素子。の代わりに 構文それはちょうど使用するのに十分に十分です . 適切なARIA属性と一緒にHTMLのネイティブ属性を使うことも不必要です.
