> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/2019-1/wk-notes-11-27-a11y.md).

# 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`.