web-dev-qa-db-ja.com

モーダルオーバーレイが背景アイテムを覆っている間、背景アイテムがフォーカスを受け取ることを防ぎますか？

私はオーバーレイモーダルをよりアクセシブルにすることに取り組んでいます。基本的に this JSFiddle のように動作します。モーダルを開くと、フォーカスがモーダルに正しく移動せず、ページ内の他の（非表示の、背景の）アイテムに引き続きフォーカスされます。

私のJSFiddleデモで、私がすでにaria-controls、aria-owns、aria-haspopup、さらにはaria-flowtoを使用したことがわかります。

<button 
  aria-controls="two" 
  aria-owns="true" 
  aria-haspopup="true"
  aria-flowto="two"
  onclick="toggleTwo();"
  >
  TOGGLE DIV #2
</button>

ただし、MacOS VoiceOverを使用している場合、これらはどれも私が意図したことを行いません（VoiceOverは、div twoに設定したaria-hiddenを尊重します）。

私はtabindexを操作できることを知っていますが、0より大きい値はアクセシビリティに悪いため、他の唯一のオプションは手動でallフォーカス可能な要素を見つけることですこのページをtabindex=-1に設定します。これは、この大規模で複雑なサイトでは実現できません。

さらに、Javascriptを使用して手動でタブの動作をインターセプトおよび制御することを検討しました。これにより、フォーカスがポップアップに移動し、下部を終了すると上部に戻りますが、これもアクセシビリティに干渉しました。

accessibilitywai-ariavoiceoverscreen-readersjaws-screen-reader
8
Brenton Strine

フォーカスはfocus（）メソッドで移動できます。 jsFiddle を意図した動作で更新しました。 WindowsとChromeのJAWSでこれをテストしました。

Focusメソッドでフォーカスできるように、「2」divにtabindex="-1"を追加しました。

トグル関数を2つの関数に分割します。これはおそらくニーズに合わせてリファクタリングできますが、1つの関数はaria-hidden属性をtrueに設定し、新しく開いたモーダルにフォーカスを移動し、他の関数はその逆を行います。

過剰なaria属性を削除しました。ariaの最初のルールは、必要な場合にのみ使用することです。 ariaでマッシュしている場合、これは予期しない動作を引き起こす可能性があります。

モーダル内でフォーカスを維持するには、残念ながら、他のすべてのアクティブな要素をtabindex="-1"またはaria-hidden="true"に設定することをお勧めします。イベントリスナーがタブでモーダルの最後の要素に追加される代替案を適用しました。準拠するには、Shift + Tabイベントでフォーカスを最後の要素に移動するために、最初の要素に別のリスナーを追加する必要があります。

残念ながら、私の知る限り、モーダル内にフォーカスを維持するための上記の解決策よりも明確な答えはありません。

4
Taylor N

モーダルの最初と最後のフォーカス可能な要素がイベントに反応するようにします。タブとシフト+タブを押したとき。私がテストした限りでは、それはどこでも動作します。

例：

function createFocusCycle (first, last) {
first.addEventListener('keydown', function(e){
if (e.keyCode===9 && e.shiftKey) {
last.focus();
e.preventDefault();
}});
last.addEventListener('keydown', function(e){
if (e.keyCode===9) {
first.focus();
e.preventDefault();
}});
}

当然、モーダルの最初と最後のフォーカス可能な要素は何かを知る必要があります。通常、複雑すぎないようにしてください。そうでなければ、モーダルの最初と最後のフォーカス可能な要素が何であるかわからない場合は、多すぎるUIを作成していることを示している可能性があります。

2
QuentinC

モーダルポップアップでrole = "dialog" aria-modal = "true"を使用します

1
Shrishail Uttagi
  1. aria-disabled対aria-hidden

まず、 aria-hidden は、要素が画面に表示されているときに使用することを目的としていないことに注意してください。

要素とそのすべての子孫がどのユーザーにも表示されないか、認識されないことを示します

使用するオプションは aria-disabled です。

要素は認識可能であるが無効になっているため、編集や操作ができないことを示します。

  1. tabindexの使用について

このリンクがスクリーンリーダーから認識可能であるか、クリック可能である場合、tabindexからリンクを削除するとWCAGエラーが発生します。 aria-disabled以上のdisabled属性と組み合わせて使用​​する必要があります。

  1. pointer-events cssプロパティを使用してマウスイベントを無効にする

マウスイベントを無効にする最も簡単な方法は、pointer-events cssプロパティを使用することです。

 pointer-events: none;
  1. キーボードフォーカスを無効にする

JQuery :focusableセレクターは、最も簡単に使用できるものです

$("#div1 :focusable").attr("tabindex", -1);

サンプルコード

$("#div1 :focusable")
.addClass("unfocus")
.attr("tabindex", -1)
.attr("disabled", true);

$("button").on("click", function(){
    $(".unfocus").attr("tabindex", 0)
    .removeClass("unfocus")
    .removeAttr("disabled");
});
.unfocus {
  pointer-events: none;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="div1">
    <a href="">non clickable link</a>
    <div tabindex="0">
      non focusable div
    </div>
</div>

<div id="div2">
    <button>click here to restore other links</button>
</div>
1
Adam

将来、これはinert属性で解決できるようになります： https://github.com/WICG/inert/blob/7141197b35792d670524146dca7740ae8a83b4e8/explainer.md

0
Oliver Joseph Ash