“Kisses, Kisses, Kisses, Kisses”

I was testing the accessibility of the checkout process on the (upcoming) Practical Accessibility course website last week when I came across one of the cutest accessibility issues.

I will be using Paddle to accept and process payments on the site, and I wanted to make sure that the user interface that Paddle provides is accessible for someone using a keyboard and/or a screen reader.

I fired up VoiceOver on macOS and started navigating the checkout flow, checking to see that all elements and form fields are announced properly. And then I heard this:

== video ==

VoiceOver used the placeholder text as an accessible name for the card number field. “kisses kisses kisses kisses, edit text”

Placeholders become accessible names

When the parses the HTML to create the accessibility tree, it refers to the “Accessible name computation" algorithm to determine the accessible name of an element.

In the case of most of the common <input> elements, <select> and <textarea> elements, the order is:

1. Use aria-labelledby.
2. Otherwise, use aria-label.
3. Otherwise, use associated ‹label› element(s).
4. Otherwise, use title.
5. Otherwise, use placeholder.
6. If none of the above yield a usable text string, there is no accessible name.

When more than one naming mechanism is used on an element, this algorithm determines which accessible name “wins”. So if you have b

Don’t substitute labels with placeholders

Provide helpful instructions for all users

Name and purpose