2017-11-13 4 views
2

DOMに/から別のセクションを追加/削除するのではなく、aria-hidden="true"でそれらのセクションを隠していて、特定の<a>のトグルがクリックされた場合は非表示にします。screenreaderにトグルされた要素を読み込ませる方法

理由はパフォーマンスであり、noscriptのフォールバックが簡単です。 DOM内の順序は、質問が表示される順序ではありません。

結果は、ユーザが1つの質問から次の質問にクリックするバイナリ質問ツリー(yes/no questions)です。

スクリーンリーダーにセクションを読み込ませたり、少なくとも非表示にしてから次のセクションを読み続けるのは良い解決策でしょうか?

道はありますかlive-region?スクリーンリーダーはその中に隠されていない要素を読みますか? aria-currentは適切かもしれないと思いましたか?それとも、aria-expandedアプリケーションですか?

ありがとうございました!

+0

は、なぜあなたは最初の場所でそれらを削除していますか?画面の不動産を保存するだけの場合は、おそらくスクリーンリーダーから隠すべきではありません。 – isherwood

+0

@isherwoodそれはYes/Noの質問ツリーです.1つの答えが次の質問につながります。したがって、DOMの質問のほとんどは、ツリー内のあなたのパスとは無関係です。 – Andy

+0

これは、インタラクティブな性質のため、最初の答えが示唆しているように、ライブリージョンの適用にはまったく似ていません。ツリーの未使用部分を視覚的に隠していますか(たとえば、 'visibility:off'または' display:none')?これがどのように視覚的に表示され、どのように1つの質問から次の質問にナビゲートするかを記述してください。たとえば、移動した後で答えられた質問は消えますか?もしそうでなければ、私は戻ってツリーの早い段階で私の答えを戻すことができますか?これを知らなくても良い答えを出すことはできません。 –

答えて

1

ARIA live regions問題のこの種の問題を処理する正しい方法です。

HTML要素にaria-live属性を使用すると、これらの領域のいずれかでコンテンツが変更されたときに補助技術が警告されます。あなたの属性値の選択は、変更が発表される速さを(即時に、または次の優雅な機会に)指定します。最も一般的な実装は、通常aria-live="polite"です。

このページには、ライブリージョンを実装するためのいくつかの非常に便利な(そして革新的な)技術の概要を示します。https://terrillthompson.com/tests/aria/live-scores.html

+0

しかし、私は 'aria-live =" assertive "'を持っています。新しい要素が表示されなくなったら、NVDAは何も読みませんか? – Andy

+0

テストできるコードサンプルを提供していただけますか? – Josh

+0

それはちょうど私に起こった! DOMツリーに何も追加/削除されていないため、更新は通知されません。ライブリージョンを使うのではなく、 'aria-hidden'をfalseに変更すると、' role = "alert"を要素に追加する方が良いかもしれません。 – Josh

関連する問題