search

mozilla / payments

The root repository for all things Payments at Mozilla.
Other
9 stars 9 forks source link

Labelling fields for accessibility #50

Closed muffinresearch closed 9 years ago

muffinresearch commented 9 years ago

@brampitoyo do we need to do anything for accessibility in order to tell the user what field they are working on?

Placeholders are great, but they're hidden as soon as you start typing.

The current UI here [1] has labels that are hidden for screenreaders. But should we do something to display the field whilst the user is interacting with the field?

I noted that braintree's own drop-in UI has a feature for telling you what field you are typing into. [2]

[1] http://mozilla.github.io/payments-ui/forms.html [2] https://developers.braintreepayments.com/javascript+python/start/hello-client#try-it-now

brampitoyo commented 9 years ago

I like Braintree’s approach a lot. Firefox Accounts doesn’t have such conventions in its form fields, but we should do it.

I think we can follow the behaviour they’ve set up to the letter, like so: payment-form-field-label-pop-out

What do you think?

muffinresearch commented 9 years ago

Looks great. I'll implement something along these lines to try it out.

brampitoyo commented 9 years ago

The only change I’ll make is to have the small label simultaneously slide up and fade in, instead of just fade in.