undefined | Better HN

0 pointslelandfe1y ago0 comments

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

0 comments

swatche1y ago

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.

lelandfeOP1y ago

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

dumbo-octopus1y ago

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.

2 more replies

chenmike1y ago

There’s no reason you can’t do both, and indeed some a11y linters recommend doing that

oxidant1y ago

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.

j / k navigate · click thread line to collapse