アリア使用規則

前の投稿でthe differences between the ARIA labeling variants 私は最初の規則ARIA — アリアを使用しないで、アリアの5つのルールに深く潜り込むことが多い.
以前アリアのことを聞いたことがないなら、短い紹介をしましょう.フロントエンド開発者がアクセス可能なWebアプリケーションを作成できるようにするための属性セットです.HTMLの上にアドオンやレイヤとして見てください.HTMLがネイティブの解決策を提供しているので、ARIAを使う必要はありません.しかし、時々私たちのUIコンポーネントは、彼らは単にネイティブのHTMLオプションのどこに収まらないように複雑です.その後、アリアを引き出すために、誰のためのアクセス可能な経験を作成するためにそれを使用する時間です.
しかし、我々は両刃の剣の特性のため、アリアに注意する必要があります.それが適切に使用されるとき、それは大いにユーザー経験を改善します.しかし、それが誤って使用されている-または部分的に-それはユーザーエクスペリエンスを破ることができます.それが完全に使用不可能である点まで.
十分なイントロについては、アリアを使用する方法についての5つのルールを介して行きましょう!

1以上の意味のHTMLを好む

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
– W3C, First rule of ARIA

それが我々に利用可能であるならば、我々は意味的なHTMLオプションを使うのを好みます.アリアを使うためにアリアを選ぶべきではない.アリアの意図は、物事をアクセス可能にすることですが、それは私たちに利用可能な唯一のオプションではありません.物事がUIで複雑になるとき、それはまだ唯一のオプションです.しかし、我々はアリアがHTML 5の前に来たのを覚えていなければなりません.そして、HTML 5が来たとき、我々はアリアを通して再現しなければならない多くの意味要素を導入しました.
例を挙げてこれを詳しく説明しましょう.
これをしましょう

<div role="button">This is a button</div>

代わりにこうしましょう

<button>This is a button</button>

間の違いは何ですかrole="button" and <button> この例では?彼らは同じ意味賢い.両方の要素はボタンです.なぜ我々はARIAの上で意味的HTMLを好むべきですか?さて、我々が使用するならばrole="button" アプローチ我々は意味論の半ばでもない<button> 私たちを与える.
しましょう<div role="button"> 例と何が不足している参照してください、一歩一歩.要素はその役割を持っているので、ボタンとして認識されます.しかし、我々はキーボードでこの要素を集中することができませんtabindex 属性が存在する.どの<button> 箱から出してくれただろう.
それは、我々が行方不明である集中管理だけでありません.また、行方不明のボタンと対話するためのキーボード機能です.たとえば、ボタンがフォーカスしている場合は、スペースキーを押してボタンをアクティブにする必要があります.他の相互作用を確認するには、私は私が読むことをお勧めしますthe design patterns for a button W 3 Cから.
一言で言えば、アリアの上でセマンティックHTMLを使いましょう.これは、私があなたに与えたい主な隠れ家です.

2 .意味HTML要素の意味を変更しないでください

Do not change native semantics, unless you really have to.
– W3C, Second rule of ARIA

意味のHTML要素を使用するとき、その意味は要素に暗黙的に与えられました.つまり、A<button> “ボタン”の役割があります.しかし、我々が同じものを使っているならば、何が起こりますか<button> そして、我々はそれにアリアを与えますrole="header" ? さて、我々は明らかに別の意味を与えた.そして、これは望ましくない副作用につながるかもしれません.
順序なしリストを取りましょう.<ul> , 例として.我々が予想するすべて<ul> 右です.例えば、<li> . そして、我々がそれを残すならば、スクリーン読者はそれを理解することができます.我々は、画面リーダーがどのように多くのリスト項目が存在する発表することができます.そして、それぞれのリストアイテムを1つずつ発表する.
しかし、我々はrole="navigation" で<ul> , となるnavigation landmark . 意味論は上書きされる.そして、スクリーン読者は、彼らが前にすることができたことをする能力を失いました.スクリーンリーダーのユーザーを残して何を意味する推測.

3 .すべての対話的な要素は、キーボードによって使用可能でなければなりません

All interactive ARIA controls must be usable with the keyboard.
– W3C, Third rule of ARIA

第三の規則は、第一の規則にいくぶんつながります.第一のルールから例を使いましょう<div role="button"> — どのようにお互いの関係を説明する.私たちは、第一のルールにおいて、role 我々がしていない属性.我々は、キーボード機能を持っていないこと.再び、この規則のために、意味的なHTML要素のために行くのが最善です.そうすることによって、我々は箱からキーボード機能を得ます.
しかし、複雑なUIコンポーネントを持っている場合、しばしばカスタムウィジェットとして参照されます.まず、複雑なUIコンポーネントがどのように動作するかを決定する必要があります.それをするために我々はdesign patterns そして、それが合う方法を見てください.そこから我々はどのキーボードの相互作用が期待されるか確認できます.言い換えると、スペースキーを押すとどうなるのでしょうか.

4 .利用可能な要素を隠してはならない

Do not use role="presentation" or aria-hidden="true" on a focusable element.
– W3C, Fourth rule of ARIA

第4のルールはフォーカスします-いいえしゃれを意図した、私は誓う-フォーカス可能な要素が存在することを保証する上でAccessibility Tree . さもなければ、彼らは支援技術(例えばスクリーン・リーダー)から隠されています.
角aria-hidden="true" ,畝role="presentation" また、role="none" 属性は類似しているかもしれません.しかし、彼らの意図は全く異なります!

aria-hidden="true" は、要素とすべての子要素をアクセシビリティAPIから削除します.これはアクセシビリティツリーでは表示されません.そして、それがそこに存在しないならば、それは支援技術に見えません.

role="presentation" ○○role="none" チェンは、まだそれを補助技術にさらしている間、要素の意味的な意味を取り除きます.

The role="presentation" and role="none" attributes are the same. The role="none" attribute is actually an alias for role="presentation".

ボタンがaria-hidden="true" 属性、それはまだHTML DOMに存在します.だからまだキーボードでボタンを集中することが可能です.しかし、我々は画面リーダーと移動すると、ボタンの存在を知ることはありません.
我々は、使用しないでくださいaria-hidden="true" 任意のフォーカス可能またはインタラクティブな要素の属性.それゆえ、多くの人々のためにそのような要素に集中したり、相互作用することは不可能です.

5 .すべての対話的な要素にアクセス可能な名前が必要です

All interactive elements must have an accessible name.
– W3C, Fifth rule of ARIA

すべてinteractive elements (例:<input> ) アクセス可能な名前が必要です.さもなければ、補助技術はインタラクティブな要素が何を意味するかについて、何の手がかりも持っていません.
プレーンにしましょう<input> と<span> 次に、ビジュアルラベルとして機能します.草無し<label> , aria-label or aria-labelledby . ユーザーが入力にフォーカスを持っているとき、スクリーンリーダーは発表するでしょうか?

<span>Username</span>
<input type="text">

Voice Over on MacOS would say something like: Edit text

画面リーダーのユーザーは混乱しているので、彼らは“編集テキスト”を聞くことができるので、入力の意味を推測する必要があります.
これは、音声認識ユーザー(例えばMacOSの上のVoiceControl)にも影響を及ぼします.アクセス可能な名前が存在するならば、それは<input> 直接要素.たとえば、VoiceOverコマンドをクリックします.アクセス可能な名前が利用できないならば、彼らは要素と対話するために他の手段に頼る必要があります.どのユーザーの経験に深刻な影響を与える可能性があります.

どのように我々はアクセス可能な名前を提供できますか?
アクセス可能な名前を提供するには、3つの別々のテクニックがあります.

For <a> and <button> 私たちは私たちが与えたリンクのテキスト/ボタンの値を介してアクセス可能な名前を提供します

For <input> 要素のいずれかを明示的にアクセス可能な名前を提供します<label> , aria-label またはaria-labelledby

他の何か(例えばカスタム要素、ランドマークなど)のいずれかを介してアクセス可能な名前を提供しますaria-label またはaria-labelledby 属性

あなたが内容のこの部分が好きであるならば、あなたが私が私についてあとについて書く他のものに関する定期的な最新版を得たいです.

結論
あなたは、最後までそれを作りました!それは私たちがアリアをどのように使うべきかについて非常に多くの情報でした.それで、我々が学んだすべてのものを要約しましょう:

彼らは私たちのためのハードワークを行うので、アリアの上で意味のHTMLを好む!

代わりにARIAを使用するときはdesign patterns 予想するものをチェックする.

我々は意味のHTMLの意味を変更する必要はありません

キーボードフォーカス/ナビゲーション画面リーダーフォーカス/ナビゲーションと同じではありません

フォーカス可能な要素を隠すべきではありません.さもなければ、それらは補助技術には使えません

すべての対話型要素はアクセス可能な名前を持つ必要があります.さもなければ、(再び)それは補助技術のために利用できないでしょう