ステッパー (stepper) による数の入力

フォームにおいて、数 (人数、個数、年齢などのように数えたり測ったりできるもの) を入力させる場合、HTML の <input type="number"> を用いるのが基本です。ボックスに直接タイプ入力することができると同時に、ブラウザによってはスピナー (spinner) が提示されるので、それを「回す」ことで入力値を増減することもできます。

<input type="number"> の例 (Google Chrome)。ボックスの右側にスピナーが提示されている。
<input type="number"> の例 (Google Chrome)

しかし、ブラウザ標準のスピナーは小さくて、ユーザーによっては見づらかったり使いにくかったりします。またユーザーの環境でスピナーが表示されない (ただのテキストボックスのように見える) こともあります。

比較的小さな値 (数個や十数個程度) の入力であれば、「ステッパー (stepper)」という UI コンポーネントを用いるのも一考です。押しやすいサイズで増減ボタン (+/ー) が提示され、クリックまたはタップするだけで数の入力ができる、というものです。

ステッパーの例。増減ボタン (+/ー) をクリックまたはタップして数を入力することができる。
ステッパーの例

ステッパーの利点

ステッパーの利点は、ユーザーにとって、数の入力がとても手軽にできることです。入力に先立って、まずドロップダウンリストを展開したり、あるいは (モバイルデバイスで) キーパッドを立ち上げたり、といった手間がかからずに、単に増減ボタンを押すだけで値を入れることができるからです。

また、数値の入ったボックスと併せて明示的に提示される増減ボタンが、シグニファイアとしても有効にはたらき、ユーザーは瞬時に「数を入力するフィールドである」ことを認知することができます。

ステッパーの実装

ここでは、数値入力のボックス (<input type="number">) と増減ボタンの組み合わせによる、ステッパーコンポーネントの実装を検討したいと思います。アクセシビリティを担保するために、以下の要件を満たすものとします。

これらの要件を満たす形で、デモを作ってみました。

See the Pen ステッパー by Kazuhiko Tsuchiya (@caztcha) on CodePen.

Bootstrap を使っているので所々に余分な <div> 要素が入っていますが、肝となる HTML のコードを拾うと、以下のような具合です。


<label for="number-of-unit" id="label-number-of-unit">個数</label>

<button type="button" aria-label="減らす" aria-describedby="label-number-of-unit">-</button>
<input type="number" id="number-of-unit" name="unit" value="1" min="0" max="10">
<button type="button" aria-label="増やす" aria-describedby="label-number-of-unit">+</button>

<div class="visually-hidden" role="status" aria-live="polite">{input 要素内の値がここに代入される。}</div>


上掲のデモは、実際にキーボード操作やスクリーンリーダーでの挙動も含めて体感できるようになっているので、Full Page View でご覧いただき、アクセシビリティに優れた UI コンポーネントの例として参考になれば幸いです。