Great point Adrian. With autocomplete off, it seems like less of an issue, but I definitely see how it can cause problems with it there. It almost seems like the experience with AT might be better in those instances :-)
I am curious (since you didn’t include a link): Could you provide an example of when you may not want the associated helper text to be read after the field?
Aaron, thanks for the comment. While disabling auto-complete does indeed address this in many cases, my experience with user testing is that users on the whole do not disable it. I wish I had solid numbers on this, but at the very least I am advocating for users who surf with browser defaults.
When you ask for an example of helper text read after a field, I assume you are asking about it in the context of a screen reader. So I will run with that.
A fake example would be a generic error message that, even if appropriately associated with a field, can still be encountered on its own out of context. So if I have an error message that says “field cannot be blank” after the affected field, and then I start moving along the page and encounter it before the next field I can wrongly assume it relates to the next field.
Sadly, the example I have seen in the wild that is in my head is from a specific client project so I cannot share it. I can probably make a mock-up and record a video if you like, but it won’t be today.
Thanks for the clarification Adrian! That makes sense :-)
Great article. I was wondering if displaying the message for the correct input as the placeholder text in the field itself may help. When the user clicks on the field the placeholder gets aligned to right side of the field. Now this may not work for larger inputs but it may help. What’s your thought?
Here’s a code I found which does the kind of same thing I mentioned: http://jsfiddle.net/csdtesting/wbqq129q/
My immediate reaction is that it is too easy for the user-supplied text to overlap the relocated label text. Even when it does not overlap, it may be confusing for users with some language disabilities as it puts more characters in a field that should only contain their information. That pattern may have some value in a very specific setting, but as a general practice I would not use it. For your example, you would need to kick the contrast way up too.