ボイスオーバーで「role =“ spinbutton”」をインクリメントする

<input type="text" role="spinbutton" />HTML / JavaScriptの要素を使用して、インクリメント/デクリメントの動作でアクセス可能な入力を実装するのに苦労しています。しかし、VoiceOverでは、予期しない方法で入力の値を変更するインクリメント/デクリメントのためのカスタム（偽？）入力イベントがあるようです。

ユーザーが支援技術を使用してページをナビゲートしているときに、ウィジェットを操作しようとしているときにVoiceOverから不適切なガイダンスを受け取らないようにするにはどうすればよいですか？

たとえば、次のような大幅に削減されたコードを使用します。

function logIt(...args) {
  document.getElementById('output').appendChild(
    document.createTextNode(`${args.join(', ')}\n`)
  );
}

document.getElementById("myInput").addEventListener('input', (e) => {
  debugger;
  logIt(e.type, e.data, String(e));
  e.target.setAttribute('aria-valuenow', e.target.value);
}, false);

document.getElementById("myInput").addEventListener('keydown', (e) => {
  logIt(e.type, e.data, String(e));
}, false);

      <input
        id="myInput"
        type="text"
        role="spinbutton"
        autocomplete="off"
        defaultValue="1"
        aria-valuenow="1"
        aria-valuemin="0"
        aria-valuemax="100"
      />
    </div>
    <pre id="output"></pre>

... VoiceOverは、入力を「ステッパー」として説明し、キーボードを使用してインクリメント/デクリメントする方法について説明します。しかし、これらのキーボードコマンドを使用すると、次のスクリーンキャップに示されているように、奇妙な計算が行われます。

（スクリーンキャップの「ロギング」から）ユーザーが入力を入力するInputEventとがトリガーさevent.typeれることも確認できますがinput、VoiceOverキーボードコマンドを使用してインクリメント/デクリメントを行うと、ベースタイプEventがトリガーされ、event.type再度設定されます。にinput。

そして、これはの私の実装に固有のものではないようですrole="spinbutton"。jQuery UIスピナーは、VoiceOverキーボードコマンドを使用してインクリメント/デクリメントするとうまく動作しません。

私はw3cの例をいくつか試してみましたrole="spinbutton"：

• https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.htmlのフォントサイズウィジェット
• https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.htmlの日付ピッカー

...そして、VoiceOverはこれらの各UIコントロールを「ステッパー」として説明し、キーボードを使用してそれらをインクリメント/デクリメントする方法を指示しましたが、それらの指示は機能していないようです。その他のキーボードの動作は機能しましたが、VoiceOverが提案する動作は機能しません。

role="spinbutton"VoiceOverのインクリメント/デクリメントキーボードコマンドでマークアップが正しく機能することを確認するにはどうすればよいですか？

role="spinbutton"VoiceOverカーソルを使用すると、VoiceOverがキーダウンイベントをハイジャックするように見えるため、VoiceOverとの互換性はありません。したがって、role="spinbutton"VoiceOverで要素にフォーカスすると、「Control-Option DownArrow」または「Control-Option UpArrow」を使用して値を減少または増加するようにユーザーに指示します。これらのキーが押されると、イベントはJavaScriptのkeyDownイベントハンドラーに到達しないため、これらのキーが押されたことを検出できず、値の実際の増分または減分を実装できません。したがってrole="spinbutton"、VoiceOverで使用して機能させる方法があるかどうかはわかりません。ユーザーには機能しない指示が与えられ、混乱を招きます。

私が取り組んでいるアプリケーションの回避策として、スピンボタンのWAI ARIAオーサリングプラクティスで説明されているキー処理動作を実装しましたがrole="spinbutton"、他の属性やaria属性を追加していません。代わりに、aria-live="assertive"キーボードまたは値の増減ボタンをクリックして値が変更されたときに、ユーザーが新しい値を聞くことができるように追加しました。さらに、キーボードで値を増減する方法をユーザーに指示し、それをを使用して入力に関連付ける視覚的に隠されたテキストを追加しましたaria-describedby。

私はちょうど訪れたW3のスピンボタンの例を、そしてVoiceOverのマック（サファリとOSのバージョン10.15.1）で、キーボード操作可能であるように思われます。彼らが使用したコードを調べて、そこからインスピレーションを得ることができます。

ただし、w3スピンボタンの例では、ステッパーがフォーカスを受け取ったときに現在の値、またはステップアップとステップダウンの変化を通知しません。中レベルと高レベルの冗長設定を試してみました。

この値（どちらかaria-valuetext、aria-valuenowまたは両方）を発表できなかったのは、Apple側のバグのようです。そのため、報告しました。良いキャッチ。

これはおそらくaria-live領域にハッキングされる可能性がありますが、他のブラウザー/スクリーンリーダーの組み合わせでアナウンスが重複する可能性があります。