Customized spinbuttons
Summary
- Principle.
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interaction.
- Expected behavior.
Principle
Spinbuttons are form elements that allow the user to set a numeric value. They are presented as a text field associated with two buttons used to increase or decrease the value of the field by one increment.
Spinbuttons which are “customized” 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
ARIA roles, states and properties
role="spinbutton"
must be applied to the spinbutton.- The
aria-valuemin
attribute must be applied to the spinbutton. Its value must be set to the minimum value allowed for the spinbutton. - The
aria-valuemax
attribute must be applied to the spinbutton. Its value must be set to the maximum value allowed for the spinbutton. - The
aria-valuenow
attribute must be applied to the spinbutton. Its value must be set dynamically to that of the spinbutton. - The spinbutton must be programmatically associated with its label using
aria-labelledby
:- The spinbutton label must have an
id
attribute set to a unique value. - The spinbutton must have the
aria-labelledby
attribute set to the value of theid
of the label of the spinbutton.
- The spinbutton label must have an
- The
aria-hidden="true"
attribute must be added to each image that simulates an increase or decrease button.
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.
Expected behavior
- The keyboard focus remains on the text field during the use of the spinbutton, and remains there until the Tab key is pressed.
- When the focus is on the text field, the value of the spinbutton can be modified by typing values on the keyboard or by using the Up arrow, Down arrow, Home and End.
- The increase and decrease buttons are not keyboard focusable, but can be operated with a mouse.
- The value of the
aria-valuenow
attribute must be updated dynamically so that it is always identical to the value of the spinbutton. - The value of the spinbutton cannot be greater than the
aria-valuemax
attribute. - The value of the spinbutton cannot be less than the
aria-valuemin
attribute.
2 comments
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
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!
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
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 inputtype="text"
and ARIA attributes, if for some reason an inputtype="number"
could not be used. But using a native HTML tag or attribute, liketype="number"
in this case, would always be a better option if possible.
-