支援技術からコンテンツを非表示にする
Aria 非表示
アシストのためにエクスペリエンスを微調整するためのもう一つの重要な手法は、 テクノロジー ユーザーは、ページの関連部分のみが 支援技術を紹介しますセクションが確実に ユーザー補助 API には公開されません。
まず、DOM で明示的に非表示になっているものも、
追加できます。そのため、CSS スタイルが visibility:
hidden
または display: none
であるものや、HTML5 の hidden
属性を使用するものもすべて適用されます。
支援技術ユーザーには見えません。
ただし、視覚的にレンダリングされておらず、明示的に非表示になっていない要素は 引き続きアクセシビリティ ツリーに含まれます。一般的な手法の 1 つは、 「スクリーン リーダーのみのテキスト」絶対位置に配置する必要があります
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
また、すでに見てきたように、Google の API を介してスクリーン リーダー専用テキストを
aria-label
、aria-labelledby
、または aria-describedby
属性が
他の方法では非表示になります。
非表示の手法に関する WebAIM の記事を参照してください。 テキスト 「スクリーン リーダーのみ」の作成についてあります。
最後に、ARIA は、補助機能からコンテンツを除外するためのメカニズムを提供します。
aria-hidden
属性を使用します。
要素にこの属性を適用すると、実質的にその要素とそのすべての
子孫に作成されます。唯一の例外は、
aria-labelledby
属性または aria-describedby
属性で参照されます。
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
たとえば、特定のモーダル UI を作成する場合、aria-hidden
を使用できます。
メインページへのアクセスがブロックされます。この場合 視覚に訴えるユーザーに対して
ページのほとんどを
使用されますが、スクリーン リーダーのユーザーは、
クリックします。この場合は、前述のキーボード トラップと、
以前
ページ内で現在サポート範囲外の部分を
確認する必要があります
aria-hidden
です。
ARIA の基本について理解したところで、ネイティブ HTML で ARIA がどのように動作するかを見てみましょう。 それを使用して大規模な手術を実行する方法について、 単一の要素のセマンティクスの変更だけでなく、 時間的制約のある情報を伝える方法を 見ていきましょう
Aria-Live
aria-live
を使用すると、デベロッパーはページの一部を「ライブ」としてマークできます。という意味で、
更新はページに関係なく
直ちにユーザーに通知する必要があります
ページ内のその部分をたまたま閲覧するだけでなく日時
要素に aria-live
属性(その要素が含まれるページの一部)と、
その子孫はライブ リージョンと呼ばれます。
たとえば、ライブ リージョンは、アラートのたびに表示されるステータス メッセージです。
アクションです。視覚に訴えるユーザーの目を引くような
重要なメッセージであれば
支援技術ユーザーの注意を喚起することが
aria-live
属性を設定して注意を引くことができます。このシンプルな div
と比較
<div class="status">Your message has been sent.</div>
「live」使用します。
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
に指定できる値は polite
、assertive
、off
の 3 つです。
aria-live="polite"
は、これについてユーザーに警告するよう支援技術に指示します 終了時点を変更できます。便利な使い方 緊急ではないが重要なものがある場合にaria-live
回使用aria-live="assertive"
は、支援技術に話しかけて中断を指示します この変更を直ちにユーザーに警告します。これは、 重要かつ緊急の更新情報を受け取ることもできます。たとえば、「 サーバーエラーが発生し、変更は保存されませんでした。ページを更新してください」 次のようなユーザー操作の直接的な結果としての入力フィールドの更新 ステッパーウィジェットにボタンがありますaria-live="off"
は、一時的に停止するよう支援技術に指示しますaria-live
件の割り込み。
公開中の地域が正しく機能するようにするには、いくつかのコツがあります。
まず、最初のページ読み込み時に aria-live
リージョンを設定する必要があります。
これは厳格なルールではありませんが、
aria-live
リージョンの場合は、これが問題である可能性があります。
第二に スクリーン リーダーはコンテンツの種類によって
できます。たとえば、一部のスクリーン リーダーでアラートをトリガーしたり、
子孫要素の hidden
スタイルを true から false に切り替えます。
aria-live
と連携する他の属性を使用すると、データを微調整できます。
ユーザーに通知する必要があります。
aria-atomic
は、リージョン全体を
全体的に注意を払う必要があります。たとえば、日付ウィジェットが
日、月、年に aria-live=true
と aria-atomic=true
があり、ユーザー
ステッパーを使用して月のみの値、
再度読み上げられますaria-atomic
の値は true
である可能性があります
または false
(デフォルト)を指定します。
aria-relevant
は、ユーザーに表示する変更のタイプを示します。
個別に、またはトークンリストとして使用できるオプションがいくつかあります。
- additions: ライブ領域に追加される要素はすべて、
あります。たとえば、既存のステータス ログにスパンを追加すると、
メッセージは、スパンがユーザーにアナウンスされることを意味します(
aria-atomic
がfalse
であった場合など)です。 - text: 子孫ノードに追加されるテキスト コンテンツは、
できます。たとえば、カスタム テキスト フィールドの
textContent
プロパティを変更する場合です。 変更されたテキストをユーザーに読み上げます。 - removals: すべてのテキストまたは子孫ノードを削除する場合は、 ユーザーに伝える必要があります
- all: すべての変更が関連することを意味します。ただし、
aria-relevant
はadditions text
です。つまり、aria-relevant
: 要素に追加するとユーザーを更新します。 おそらく最も必要になるでしょう
最後に、aria-busy
では、通知が必要なことを支援技術に
読み込み中など、要素への変更を一時的に無視できます。1 回
すべてが揃っているので、aria-busy
を false に設定して
読み取り操作を実行します