Accessibility violation in placeholder

[nehagokhale]

Accessibility violation -

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

[marijn]

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

[srikant-ch5]

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

[marijn]

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?

[nehagokhale]

@marijn Thanks for prompt response. Adding role=note fixes the accessibility violation.

And the screen reader reader reads this -

[marijn]

@nehagokhale

Adding role=note fixes the accessibility violation.

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

[srikant-ch5]

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

[marijn]

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

[srikant-ch5]

The Checker throws below violation for html structure provided above.

[marijn]

Add a role=textbox

[srikant-ch5]

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

[marijn]

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.

[srikant-ch5]

Yes, that would work. Thanks.

[marijn]

Great. See this patch.

Improve accessibility of placeholder

[srikant-ch5]

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

[marijn]

Yes. I’ve just tagged a version 6.36.7