An accessibility audit of one of my websites turned up an interesting problem. I have placeholder text in a form input. When the viewport is small, the placeholder text is cut off. This was reported as a failure of success criterion 1.4.4 - Resizing text.

My first thought was to see if there was some way to make the placeholder text fit into the small space available inside the input at small viewport sizes. I was able to make this happen – sort of – in Chrome and Safari. It wouldn't work in Firefox (which is the browser the auditor is using). After some searching, I found a very helpful guide posted by Samantha Ming about Styling Placeholder Text with CSS. The big takeaway from this article is the list of supported styles for placeholder text:

• background properties
• color
• font properties
• letter-spacing
• line-height
• opacity
• text-decoration
• text-indent
• text-transform
• vertical-align
• word-spacing

As you can see, position and text wrap are not among the available options. Looks like I will need to replace the placeholder text with some other sort of description – perhaps an accessible tooltip.