nvda placeholder and label behaviour
I am trying out nvda and I am curious how label and placeholder behave on inputs.
when I have both label and place holder. NVDA will annouce
title edit, title of the post
if i remove aria label it will say title of the post edit
I am wondering if label is redundant here or placeholder just can't be trusted to work on every version.
Or i guess label and placeholder have different purpose. Label for indicating what the field is for and placeholder for an example of what should go into the field14 Replies
What if there's already something in the field?
Have you tried other screen readers they are really inconsistent from one to the next
And you should not use
aria-label on an input, use a <label>What if the design given has no visible label and I'm forced to follow it
I was gonna download jaws but it seems to be paid and only has free trial
I think nvda and jaws are the most prominent one
If there's something already in the field iirc it does
placeholder-text/aria-label edit 'text inside input' Then try to talk with the designer to have one added. Cause sighted users can't read aria-labels. And if there's really nothing you can do... Then aria-label is better than nothing... But not by much
Kk
I've been trying to copy some designs and see if i can replicate them
https://github.com/GaneshS288/UI_challanges/blob/main/social_login%2Fsocial_login.png
GitHub
UI_challanges/social_login/social_login.png at main · GaneshS288/U...
A repository with some ui challanges I did. Contribute to GaneshS288/UI_challanges development by creating an account on GitHub.
Some of them have design imgs like these
Not forced to follow them yet but might be in future that's why I asked
one could argue that the "Log in to your account and connect with your teammates" is the label here, but that might be far fetched
if you can talk with the designer(s) try to have then incorporate a label into the design
The input demands email and the heading, paragraph don't indicate that so yeah not workable.
Don't think the guys who own the site where I got this from care about changing the design.
You can also use a "visually hidden" class to hide the label. It's still an anti-pattern though, and having a label is a requirement if you're trying to be WCAG compliant (which, depending on what country the company is based in, might be a requirement)
Here's the requirement, if you're interested: https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html
Wouldn't a visually hidden label still be same as aria label. I guess it passes the above criteria on a technicality but it is still not available to a sighted user which is the point with a label element if i understand this right
some screen readers might pick up a hidden label better than an aria-label on an input
but you would need to try all of them to know
Yeah that is a bit annoying
yeah it would still fail that criteria. In general, I prefer using a visually hidden element over an aria-label if it makes sense, but neither is great in this case
Ah okay