2

自己無効化ボタンで「使用不可」または「淡色表示」を読み取らない方法はありますか?

例を参照してください。

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ヘルパーを使用しています。

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

君たちありがとう！

4

3 に答える 3

2

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

aria-live属性を持つコンテンツ領域の変更をスクリーン リーダーに読み上げさせたい場合に使用しaria-liveます。兄弟の div で使用するため、その機能を実行する機会を逃しています。tabindex別の方法として、 /focus()アプローチをスキップしてaria-live、新しいコンテンツ用のコンテナーを配置することもできます。

また、ボタンを捨てて、ボタンaria-disabledに頼ることもできdisabledます。aria-disabledは、それ以外の場合は をサポートしない要素用ですdisabled。

于 2016-09-01T01:37:43.710 に答える
0

「ボタンがまだフォーカスを持っているので、それが起こっていることはわかっています」と言ったときに自分の質問に答えた後、aardrianは「フォーカスを新しい要素に移動する必要がある」と言ったときにそれを明示的に指摘しました。

ただし、無効なオブジェクトにフォーカスを維持するかどうかは、完全にユーザー エージェント (ブラウザー) 次第であることに注意してください。一部のブラウザーは、無効なオブジェクトにフォーカスを置いたままにし、他のブラウザーはそれを親に移動します。

使用に関する aardrian のコメントtabindexは、通常はフォーカスできないオブジェクトにフォーカスを移動する場合 (つまり、通常は TAB できない要素の場合) でした。したがって、フォーカスを単純なテキストに移動したい場合 (ボタンから外すためだけに)、aardrian の提案を微調整して、tabindex='-1'代わりに を使用しtabindex='0'ます。これにより、その要素で focus() を呼び出すことができますが、ユーザーがタブで移動することはできません。

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

aria-live追加したばかりのテキストにフォーカスを移動することになった場合、スクリーン リーダーはフォーカスしたばかりのテキストを読み上げるため、実際には必要ありません。しかし、それはあなたが投稿した例に関連しているだけであり、問​​題を示すための単なるサンプルであると私は理解しています。実際のアプリはテキストを追加していない可能性があります。

そして、すでにプロパティを使用している場合は設定しないというアードリアンの推奨事項を2番目にしたいと思います。余計です。このプロパティは、無効なオブジェクトをシミュレートするときのものです。aria-disableddisabledaria-disabled

于 2016-09-06T12:39:37.303 に答える
0

テキストの読み方は読者によって異なります。どれも正しくも間違っていません。読み上げられるテキストが同じで一貫性があるようにしたい場合は、少し回避策を講じてください。ボタンに aria-label="desired text" を追加します。これにより、ボタン タグ内にあるものはすべてオーバーライドされます。

例えば

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

Nvda はボタンを「目的のテキスト ボタン」として読み取ります。ボタン内のテキストは無視されます。これで、無効化された aria-label 属性を JS で処理 (追加/削除) できるようになりました。

あなたの質問のコンテキストでは、試すことができます：

それ以外の：

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

使用してみてください：

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

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

于 2016-09-07T06:54:44.043 に答える