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.'

  1. '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 as stepper, with Control-Shift-Option-Down Arrow to control, which is NOT achievable on web.

  2. Other screen reader only reads spin button and nothing alse

  3. 1st way to achieve it, is to change the role of spinbutton to input or input[type='number'] so that VO can say numeric input, but it's not good for aria standard

  4. 2nd way is leave stepper as it is, use a long aria-label as Adults, Current value is 7, To increase..., but it's not good for aria standard cos label is supposed to be the name of the control

  5. 3rd 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