This is why you always leave a note.
J. Walter Weatherman. You’re the man who used to scare us as children, and one time as an adult.
Please hit ♥ below if you found this post useful so others can read it.
I would, but there’s no label…
How is “♥” not a label?
Is it read properly by screen readers? I mean when it is the unicode symbol?
I don’t know, I don’t use one. But I see no reason it wouldn’t be. It’s a perfectly valid text character. In the very worst case a screenreader could look up the name of the character and say “BLACK HEART SUIT”.
The worst case is skipping the symbol completely, which is what MS Narrator does. “Please hit below if you found this post useful…”
Less facetiously, it’s a smaller click target than nearly all of the bad examples shown.
At least it comes with instructions, even if they’re some distance away. There’s also a circle with a tail that doesn’t have any. And a bird.
I agree with his opinions on all but the search example, a big magnifying glass is just as easy, if not easier to see than the smaller “Search” blurb. The icon color in the case he chose could’ve contrasted more with the the background however.
Part of the point was that the icon is completely unparseable to a screen reader. Some users have limited sight, for which better visibility is relevant. Some users have no sight.
That’s why HTML has alt text
I would suggest trying this in a screen reader (ChromeVox and Apple’s VoiceOver are both free), with your monitor turned off. Most web designers have no intention of doing that, so if they think about it at all they’re guessing how users will hear their UI, and then users are having to guess what the designer was thinking.
Using labels is a simple rule that is maximally explicit about what fields do what. Testing designs in screen readers would also work.
Alt text in this situation turns out not to be ideal, since the image is merely “near” the field in the structural layout, and not associated with it in a way that’s programmatically detectable. But the way to know is to try it, not to guess.
Search is kind of a special case, as there is a semantic type=“search” for input tags
Can you create a label that says “Search Query” for the search input, and hide it using “overflow: hidden” or something, and use alt text for the magnifying glass submit button that also says “Search”?
You can use ARIA to add a lot of the hints needed. I’ve not seen a lot of front end developers make use of this.