Spinbuttons simulated using ARIA

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interaction.
• Expected behavior.

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.

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

• role="spinbutton" should be applied to the spinbutton.
• The aria-valuemin attribute should be applied to the spinbutton. Its value should be set to the minimum value allowed for the spinbutton.
• The aria-valuemax attribute should be applied to the spinbutton. Its value should be set to the maximum value allowed for the spinbutton.
• The aria-valuenow attribute should be applied to the spinbutton. Its value should be set dynamically to that of the spinbutton.
• The spinbutton should be programmatically associated with its label using aria-labelledby:
  • The spinbutton label should have an id attribute set to a unique value.
  • The spinbutton should have the aria-labelledby attribute set to the value of the id of the label of the spinbutton.
• The aria-hidden="true" attribute should 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.

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

• 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, End, Page up and Page down.
• The increase and decrease buttons are not keyboard focusable, but can be operated with a mouse.
• The value of the aria-valuenow attribute should 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

Back to top