Spinbuttons simulated using ARIA

Summary

Principle

Spinbuttons are form elements that allow the user to choose a numeric value. They are presented as a text field associated with two buttons which allow the user to increase or decrease the value of the field by one step.

Spinbuttons which are “simulated using ARIA” are not built using the standard HTML code as found in the specification <input type="number" />, but by a text field which is associated with the two images, icon fonts or specific styles, to show the increase and decrease “buttons”. .

The following code shows how to reproduce the behavior of HTML spinbuttons, when the native spinbuttons cannot be used.

This code is based on the “Spinbutton” design pattern found in the WAI-ARIA 1.0 Authoring Practices of the W3C.

Core HTML base

<p id="label">Spinbutton label</p>
<div>
  <input type="text" role="spinbutton" aria-valumin="0" aria-valuemax="10" aria-valuenow="8" aria-labelledby="label" />
  <img aria-hidden="true" src="plus.png" alt="+" />
  <img aria-hidden="true" src="minus.png" alt="-" />
</div>

ARIA roles, states and properties

Keyboard interaction

Keyboard interaction is the same as for classic HTML spinbuttons.

Tab

When the user tabs to the spinbutton, the focus is placed in the text field. When the focus is in the text field pressing the Tab key allows the user to leave the spinbutton.

Shift + Tab

This key combination has the same behavior as the Tab key but in the reverse order.

Up arrow

When the focus is on the text field, this key increases the value of the text field one step.

Down arrow

When the focus is on the text field, this key decreases the value of the text field one step.

Home

When the focus is on the text field, this key increases the value of the text field to its maximum.

End

When the focus is on the text field, this key decreases the value of the text field to its minimum.

Page up

When the focus is on the text field, this key increases the value of the text field by a predetermined step value.

Page down

When the focus is on the text field, this key decreases the value of the text field by a predetermined step value.

Expected behavior

2 comments

  • Par Brian, le 12 February 2019 at 6h59.

    By removing type=number, touch browsers won’t open/switch keyboards to number pad. Is there a technique both this method and correct type=number can both be used?

    Cheers!

    Répondre

    • Par David Monnehay, le 13 February 2019 at 10h30.

      Hello Brian,

      Using a type="number" would result in an actual spin button (and therefore work perfectly with assistive technologies without any aria attributes). The goal of this article is to explain how to simulate a spinbutton using a input type="text" and ARIA attributes, if for some reason an input type="number" could not be used. But using a native HTML tag or attribute, like type="number" in this case, would always be a better option if possible.

      Répondre

Add a comment

Required fields are marked *.

Back to top