How are number incrementing arrows for accessibility? I would think they would be bad for keyboard users, but is there any study to back that up?
2
-
Whether they are good or bad depends on the actual implementation. It is possible to make the keyboard accessible, but the example in the question is hard to click for people who have problems with fine motor skills.– TsundokuOct 12, 2019 at 18:56
-
Do you mean the arrows themselves or do you mean the underlying reason for the arrows - a numeric input? If it is for the underlying input type then the answer is they are great for accessibility and I will expand on this comment with a full answer. If you mean the arrows themselves they are not relevant to accessibility.– GrahamTheDevOct 27, 2019 at 15:37
Add a comment
|
1 Answer
It depends on how you approach this component. Every component's identity, operation, and state should be available to assistive technology to make it accessible.
When an arrow is on keyboard focus, screen reader should inform the user about the identity of the element (Up arrow) its state (clicked/ unclicked) and operation (press enter to increase the value)
Bit of design suggestions: both up and down arrows should have enough padding around them (minimum of 48px touchpoint) and an 8px gap between these two arrows. so people with motor issues won't accidentally hit the wrong arrow. Also according to the new guideline update of WCAG 2.1, there should be an option to 'pointer cancellation' For example, If the user accidentally clicks the up arrow it shouldn't execute the increment action on mouse / touch down on, rather on mouse up / touch up. so a user can move away from the target If he/she decides to abort the action before executing. (https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html)
And use the ARIA role alert for increment change, so it will immediately inform the user of a state change.
-
1Nice point on the WCAG 2.1 cancellation, I'd seen this but not attributed it Dec 4, 2019 at 20:17