w3c/wai-tutorials

[Forms] Guidance on ::placeholder opacity is outdated

hidde opened this issue · 1 comments

hidde commented

On: https://www.w3.org/WAI/tutorials/forms/instructions/#styling

we say:

At the time of writing this tutorial, web browsers usually display the placeholder text in a color that does not meet the minimum contrast requirement of WCAG.

In recent versions of Safari, Chrome and Edge, the opacity defaults to 1, so the guidance may not be relevant anymore for these browsers. It still is for Firefox.

As a minimum, the code example should probably include ::placeholder and not just the vendor prefixed. All of these support ::placeholder without vendor prefix, so the example could use just that (Firefox from Firefox 50, 2017, Chrome from 57, 2017, Safari from 10.3, 2017; sources: https://caniuse.com/?search=placeholder).

yatil commented

I found it easier to re-use the same code (including opacity: 1) in the example instead of explaining what to fix in every selector. If we can simplify that in 2021, it would be great.