コンテンツの非表示と更新

支援技術からコンテンツを非表示にする

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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 はライブ リージョンを確立します。

たとえば、ライブ リージョンは、アラートのたびに表示されるステータス メッセージです。 アクションです。視覚に訴えるユーザーの目を引くような 重要なメッセージであれば 支援技術ユーザーの注意を喚起することが 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 に設定して値を正規化する必要があります。 読み取り操作を実行します