スピンボタンを使ったインプット要素

ブラウザのデフォルト機能を使ったケース

ブラウザに搭載されているスピンボタンは小さく、操作しにくいことが多い

スピンボタン追加、visually-hidden ＋ alia-live="polite" による通知利用

【◯】VoiceOver Safari(iOS) : このケースでは、aria-label と 数値 を読み上げた。

【△】TalkBack Chrome(Android) : このケースでは、数値 のみ読み上げた。

input への aria-controls 付与

【✕】VoiceOver Safari(iOS) : このケースでは、aria-label と label 要素のみ読み上げ、数値は読み上げなかった。

【✕】TalkBack Chrome(Android) : このケースでは、ボタンを押しても何も読み上げなかった。

input への role="status" ＋ aria-live 付与

【✕】VoiceOver Safari(iOS) : このケースでは、input ボックスの role が変更されたことにより、テキストボックスとして認識されなかった。

【✕】TalkBack Chrome(Android) : このケースでは、ラベルのみ読み上げ、数値は読み上げなかった。