Sanding UI
blog.jim-nielsen.com
Sanding UI
1–10 of 414 posts
Re: Sanding UI
#2I think the article has good sentiments about it. Actually using your application a lot helps polish it down a ton.
However, wouldn't putting the input inside of the label (before the label text) be a better solution than fiddling too much with CSS and flexbox? It's more foolproof to ensure clicks within the label activate the input, and eliminates the need for the "for" reference.
Re: Sanding UI
#3I think the article has good sentiments about it. Actually using your application a lot helps polish it down a ton. However, wouldn't putting the input inside of the label (before the label text) be a better solution than fiddling too much with CSS and flexbox? It's more foolproof to ensure clicks within the label activate the input, and eliminates the need for the "for" reference.
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
#4This is my strategy in bug bashes, and it generates way more tickets than anyone who has a multidimensional Cartesian matrix of test case combinations.
It’s good to know those tests cases to start, but random testing quickly outpaces planned testing when trying to find small issues. Also planned testing is often happy path or expected errors. Sanding like this finds edge bugs much faster.
Re: Sanding UI
#5I think the article has good sentiments about it. Actually using your application a lot helps polish it down a ton. However, wouldn't putting the input inside of the label (before the label text) be a better solution than fiddling too much with CSS and flexbox? It's more foolproof to ensure clicks within the label activate the input, and eliminates the need for the "for" reference.
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
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
#6Earlier quoted context omitted.
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
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.
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
#7Earlier quoted context omitted.
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.
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…
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
#8this is the way
Re: Sanding UI
#9Something for the sanding list: Navigating between https://blog.jim-nielsen.com/about/ and https://blog.jim-nielsen.com makes the layout shift a bit in Safari on macOS. The reason is that Safari only shows the scrollbar when it's needed but without "reserving" the space.
I once spent hours debugging this before I realized what was happening, my confusion coming from the fact that with the inspector open that wasn't the case (As there the scrollbar was always visible...).
Re: Sanding UI
#10I think the article has good sentiments about it. Actually using your application a lot helps polish it down a ton. However, wouldn't putting the input inside of the label (before the label text) be a better solution than fiddling too much with CSS and flexbox? It's more foolproof to ensure clicks within the label activate the input, and eliminates the need for the "for" reference.
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
There’s no reason you can’t do both, and indeed some a11y linters recommend doing that