Accessibility violation in placeholder

Accessibility violation -

Screenshot 2025-04-24 at 12.16.48 PM

Can you please remove aria-label attribute from <span /> element?

What would be a better way to indicate to screen reader users that this is a placeholder, not actual content?

An alternative to this would be wrapping the placeholder with a role="note" or aria-describedby attribute pointing to hidden descriptive text.

When I hide the placeholder entirely and use aria-placeholder, NVDA will announce the editor as ‘[placeholder text] edit multiline’. Does that sound like an improvement?

@marijn Thanks for prompt response. Adding role=note fixes the accessibility violation.
Screenshot 2025-04-25 at 2.26.44 PM

And the screen reader reader reads this -

I’m not just looking to make the checker quiet, though. How does the aria-placeholder solution sound to you?

@marijn Could you please provide html snippet of proposed solution so that we can test locally ?

<div contenteditable=true aria-placeholder="Placeholder text" aria-multiline=true>
  <p><br></p>
</div>

The Checker throws below violation for html structure provided above.

Add a role=textbox

If role=textbox is added then it would expect a label to be associated with it.

See, I’m not asking whether your checker tool is reporting any warnings. I’m asking whether the way NVDA reads area-placeholder seems reasonable to you.

Yes, that would work. Thanks.

Great. See this patch.

Thanks, above patch looks good. Will this be included in the next release ?

Yes. I’ve just tagged a version 6.36.7