News for hackers. Stuff that matters.
Re:Sanding UI by lelandfe on Saturday September 21, 2024 @05:40PM (#41612849)
label>input instead of label+input. This is called an implicit label - time was, there were concerns about screen readers that couldn't interpret them.

I don't know how bad that is in practice: https://a11ysupport.io/tests/html_label_element_implicit

...but it does look worse than explicit: https://a11ysupport.io/tests/html_label_element_explicit

Re:Sanding UI by swatche on Saturday September 21, 2024 @05:47PM (#41612880)
The spec says either way (https://www.w3.org/TR/html401/interact/forms.html#h-17.9), but I agree with putting the input inside the label for the acessibility and avoiding the blank space issue.
Re:Sanding UI by lelandfe on Saturday September 21, 2024 @05:54PM (#41612921)
The HTML spec doesn't speak much on a11y guidelines. Here's what the W3's WAI says https://www.w3.org/WAI/tutorials/forms/labels/#associating-l...

> Whenever possible, use the label element to associate text with form elements explicitly

> [..]

> In some situations, form controls cannot be labeled explicitly... Generally, explicit labels are better supported by assistive technology

...but people have been saying that for like 15 years now, I don't know how big of a deal those failures are. That'd be a good blog post

Re:Sanding UI by dumbo-octopus on Saturday September 21, 2024 @06:03PM (#41612967)
Parent link says NVDA, VoiceOver, and JAWS all support the implicit way. That’s the industry standard suite to support, they’re all free and available across all platforms.

If some company makes a shoddy half baked solution for sale (looking at you, Dragon), and they don’t understand basic HTML that has been standardized for years, that’s not my problem. The same way I don’t only use the subset of web technologies that the AOL Premium web browser supports for $10 bucks a month.

Re:Sanding UI by extra88 on Saturday September 21, 2024 @06:18PM (#41613052)
Yes, all the screen readers handle implicit labels just fine. As the a11ysupport.io tests show, it's Voice Control software that fails, not just Dragon NaturallySpeaking but also the built-in Voice Control in macOS.

I think the implication is these voice control programs aren't using the accessibility tree built by the browser but parsing the DOM themselves, poorly. It's not really surprising for Dragon since it does hardly anything in a browser without its browser extension installed and extensions don't have access to the accessibility tree. It's more surprising for macOS Voice Control.

Re:Sanding UI by dumbo-octopus on Saturday September 21, 2024 @07:58PM (#41613544)
Voice Control also works perfectly fine, I just tested it myself on their provided sample. Say "select your name" on this page: https://a11ysupport.io/tests/html/html_label_element_implici...
Re:Sanding UI by extra88 on Saturday September 21, 2024 @10:33PM (#41614229)
They must have fixed it in Safari 18. I'm running macOS 14.6.1 and at the beginning of the month it didn't work but I also just tried it and now it does.
Re:Sanding UI by acka on Saturday September 21, 2024 @09:41PM (#41614006)
JAWS isn't free[1]. Using the trial version for accessibility testing goes against its EULA[2].

[1] https://www.freedomscientific.com/products/software/jaws/

[2] https://webaim.org/blog/jaws-license-not-developer-friendly/

Re:Sanding UI by dumbo-octopus on Sunday September 22, 2024 @11:17AM (#41617639)
Ah, I got it mixed with Orca. NVDA is the thing to target in Windows.
Re:Sanding UI by chenmike on Saturday September 21, 2024 @06:08PM (#41613002)
There’s no reason you can’t do both, and indeed some a11y linters recommend doing that
Re:Sanding UI by oxidant on Saturday September 21, 2024 @06:09PM (#41613004)
Put the input inside the label and still use "for" on the label. No way to test right now but that's what I usually do.