2017-09-08 1 views
3

ほとんどの場合、キーボードに頼っているユーザーにとっては難しい視覚的な表示はないようです。モーダルダイアログボックスのように、エスケープキーを使用してWebブラウザで何かを終了すると、どこにフォーカスが移動しますか?

これは本当に簡単な質問ですが、私はインターネットを精査して答えを見つけることができません。私の最初のアイデアは、Firefoxの開発ツールを使用して、*some element*:focus {outline: 2px solid red;}を使って視覚的な表示を作成することでしたが、もちろん、どの要素が作業に集中しているかを既に知っている必要があるので、ユニバーサルセレクタ*:focus {outline:2px solid red;}を試しましたが、

だから、誰がどのような要素の一見単純な疑問がフォーカスを得ている答えることができます...ボーナス名声のために誰も私が実際に何が起こっているかを見ることができるようになるコードスニペットを提供することができますか?

+0

私はまた答えを知りたい興味深い質問。 'focus'が他のセレクタによってオーバーライドされていないことを確認してください。 '*:focus {outline:2px solid red!important;}'を試してください。これはランダムなウェブサイトでのテストに役立ちました。 – jfeferman

+0

ありがとう@jfeferman、それは問題ではありませんでしたが、私は診断中に '!important'を使うのが良い方法であることを忘れてしまいました。あなたが忘れてしまったら、ひどい時間を無駄にすることができます。さらなる調査から、フォーカスがビューポートの外に移動しているように見えます...私はちょうどどこにいないのか分かりません。 – DragonFist

+0

VoiceOverのようなアクセシビリティ技術を使用すると、視覚的にフォーカスを追跡できます。また、[activeElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement)を見てみましょう。これは、フォーカスされた要素にjsハンドルを与えることができます。 – jfeferman

答えて

0

モーダルダイアログボックスの場合、フォーカスはボックスが表示される前の位置に戻ってください。

たとえば、ボタンをクリックしたときにダイアログボックスが表示された場合、閉じた状態(マウスをクリックするか閉じるボタンまたはエスケープキーを入力するかどうか)にかかわらず、 。

ほとんどのキーボードにアクセスできるアプリとウェブサイトは、どこにフォーカスがあるかを常に知っているアプリです。ぼかし機能は禁止する必要があります。それは決して存在してはいけません。

関連する問題