[0.6] Tester: Hi, I'm the tester. I'll use VoiceOver, the screen reader built into the Mac, and tell you what I hear.
[7.5] Reviewer: And I'm the reviewer. When something sounds wrong, I'll name the WCAG criterion it falls under, say why it matters, and explain what changed in the code to fix it.
[18.0] Reviewer: This video is about WCAG 4.1.2, Name, Role, Value. Every control on a page has to tell a screen reader three things: what it's called, what kind of control it is, and its current state.
[31.1] Tester: Here's a notification settings page, in Safari, with VoiceOver on. On screen there are two switches. Replies to my comments is on, and Weekly digest is off. I'll read the page one item at a time, from the link at the top.
[49.2] VoiceOver: heading level 1 Notifications
[51.7] VoiceOver: Choose what we email you about.
[54.2] VoiceOver: Replies to my comments
[56.4] VoiceOver: Weekly digest
[58.4] VoiceOver: end of main
[60.4] VoiceOver: main
[65.1] Tester: I heard the heading, the sentence under it, and both labels. Then the end of the main content. VoiceOver never reached either switch.
[73.8] Reviewer: That's a problem under WCAG 4.1.2. The switches work with a mouse, but the code gives them no name, no role and no state, so VoiceOver isn't told they're there. If you're listening, it sounds like this page has nothing to set.
[90.5] Reviewer: In the code, each switch is now a button, with the role switch, an on or off state, and the label beside it as its name. It looks exactly the same.
[100.3] Tester: The same reading pass, on the fixed page.
[106.8] VoiceOver: heading level 1 Notifications
[109.5] VoiceOver: Choose what we email you about.
[111.8] VoiceOver: Replies to my comments
[114.1] VoiceOver: Replies to my comments on switch
[116.9] VoiceOver: Weekly digest
[118.9] VoiceOver: Weekly digest off switch
[121.2] Tester: Now each switch says its name, that it's a switch, and whether it's on or off. I'll turn on Weekly digest.
[128.5] VoiceOver: on Weekly digest switch
[130.7] Tester: VoiceOver tells me it's on.
[133.4] Reviewer: Name, role and value are all announced. 4.1.2 holds here.