セルフディスエーブルボタン、アクセシビリティ

Question

自己ディスエーブルボタンで「使用不可」または「淡色」を読まない方法はありますか？

Example

var saveBtn = document.getElementById("saveBtn"); 
var helper = document.getElementById("helper"); 
var content = document.getElementById("content"); 
saveBtn.onclick = function(e) { 
    saveBtn.setAttribute("disabled", "disabled"); 
    saveBtn.setAttribute("aria-disabled", true); 
    content.innerHTML = 'Lorem input a lot of stuffs'; 
    helper.innerHTML = "Content added, please read it"; 
    setTimeout(function(){ 
    helper.innerHTML = ""; 
    saveBtn.removeAttribute("disabled"); 
    saveBtn.setAttribute("aria-disabled", false); 
    }, 5000); 
}; 

• 声だけ言うの例を参照してください：
• を 'コンテンツを追加し、それを読んでください' NVDAは言う：「コンテンツがそれを読んでください、追加しました。 利用不可 '

ボタンがまだフォーカスを持っていることがわかっています。しかし、私は私のページの現在の動作を変更することができないので、私はそれのための解決策を見つける必要があります。

https://stackoverflow.com/a/38137593/3438124のように、移行を通知するためにhtmlヘルパーを使用しています。

醜いコードで申し訳ありませんが、これは私の実際の動作をシミュレートするためだけです。

ありがとう！

Answer 1

新しい要素にフォーカスを移動する必要があります。 tabindex=0とし、focus()を使用してください。

aria-liveは、aria-live属性を使用してスクリーンリーダーでコンテンツ領域の変更を発言させたい場合に使用します。あなたは兄弟部門でそれを使用しているので、あなたはそれが何をするのかという機会を逃しています。代わりに、tabindex/focus()というアプローチをスキップして、新しいコンテンツのコンテナにaria-liveを入れるだけで済みます。

また、aria-disabledを削除して、ボタンとしてdisabledを傾けることができます。 aria-disabledは、他の点ではdisabledをサポートしていない要素を対象としています。

Answer 2

"ボタンにまだフォーカスがあるために起こっていることを知っています"と言い、あなたが「新しい要素にフォーカスを移す必要がある」と言われたとき、アードリアンが明示的に指摘しました。

ただし、フォーカスが無効なオブジェクトに残っているかどうかは、完全にユーザーエージェント（ブラウザ）の責任であることに注意してください。一部のブラウザでは、無効なオブジェクトにフォーカスが移り、他のブラウザはそのオブジェクトを親に移動します。

aardrianの使用についてのコメントtabindexは、フォーカスを通常はフォーカスできないオブジェクトに移動したい場合（つまり、通常はタップできない要素の場合）でした。だから、フォーカスをいくつかのシンプルなテキストに移動したいのであれば（ボタンから外す）、アードリアンの提案を微調整し、tabindex='0'の代わりにtabindex='-1'を使用します。そうすれば、その要素に対してfocus（）を呼び出すことができますが、ユーザがその要素にTabキーを押してもらうことはできません。

ページ上の別のボタン、またはフォーカスを自然に受け取ることができる他の要素（チェックボックス、入力フィールドなど）にフォーカスを移動する場合は、tabindexは必要ありません。

ちょうど追加されたテキストにフォーカスを移動させると、スクリーンリーダーが今フォーカスしたテキストを読むため、実際にはaria-liveは必要ありません。しかし、それはあなたが投稿した例との相対的なものに過ぎません。私が理解しているのは、問題を示すサンプルです。あなたの実際のアプリはテキストを追加していないかもしれません。

そして、私はあなたがすでにdisabledプロパティを使用しているときaria-disabledを設定ないの第二aardrianの勧告にしたいです。それは余分です。 aria-disabledプロパティは、無効なオブジェクトをシミュレートするときに使用します。

Answer 3

テキストの読み方は、読者によって異なります。どちらも正しいか間違っている。あなたが読んでいるテキストが同じで、読者間で一貫しているようにしたいのであれば、ちょっとした回避策をとってください。 aria-label = "desired text"をボタンに追加してください。これは、ボタンタグ内にあるものを上書きします。

例えば

<button aria-label="desired text button">This text will be ignored</button> 

NVDAが "所望のテキストボタン" などのボタンを読み込みます。ボタン内のテキストは無視されます。これで、JSを使用して、disabledおよびaria-label属性を処理（追加/削除）できます。あなたの質問の文脈では

あなたが試すことができます：

の代わりに：

helper.innerHTML = "Content added, please read it"; 

を使用してみてください：

saveBtn.setAttribute("aria-label", "Content added, please read it."); 
setTimeout(function(){ 
saveBtn.removeAttribute("aria-label");}, 5000); 

次に、テキストは読者の間で同じになります。