Wk-notes-11-27-a11y
A11y
Test from VO, the objective I want to achieve:
'Adults, Current value is 7, You are currently on an Input field. To increase by one, press the up arrow. To decrease by one, press the down arrow.'
'You are currently on an...', is a VO only behavior, and it is not achievable because it's a VO defined behavior br
aria role
. E.G.spinbutton
asstepper
, withControl-Shift-Option-Down Arrow
to control, which is NOT achievable on web.Other screen reader only reads spin button and nothing alse
1st way to achieve it, is to change the role of spinbutton to
input
orinput[type='number']
so that VO can saynumeric input
, but it's not good for aria standard2nd way is leave stepper as it is, use a long
aria-label
asAdults, Current value is 7, To increase...
, but it's not good for aria standard cos label is supposed to be the name of the control3rd best solution is to have
aria-describedby
label that will normally picked up by screen reader.
Think about prompt the error, with role="alert"
or aria-live="assertive"
role='alert'
means elements with the role alert
have an implicit aria-live
value of assertive
, and an implicit aria-atomic
value of true
.
Last updated
Was this helpful?