search

zdfs / toscani

This is a jQuery-based, progressively-enhanced solution for creating a single-field credit card input. The idea is to create a more streamlined credit card entry process.
872 stars 102 forks source link

Restructure Inputs for better accessibility #22

Open bradfrost opened 10 years ago

bradfrost commented 10 years ago

Based on this conversation: https://twitter.com/toddmparker/status/455855655027736576

The basic gist: input masking causes some serious issues for screen readers, so instead of the JS-based input masking, we could dynamically position the input fields and labels to function as a single unit. When the input is validated, it will auto-advance to the next field.

zdfs commented 10 years ago

FYI. Auto advancing to the next field isn't going to work in mobile webkit. In order for it to work at all, it has to be a standalone app, and even then, the keyboard is going to disappear and reappear.

Aaron's pen (http://codepen.io/aarongustafson/pen/CervH/) doesn't seem to work in Chrome 34. Safari on iOS doesn't do anything either.

Also. I've forked the repo to 'v2' branch, so feel free to start committing whatever you want. We can start from scratch on this one.

bradfrost commented 10 years ago

The auto-advance thing might just be an unfortunate limitation of living in the browser ghetto. The current solution doesn't auto-advance either on iOS. If all other things are created equal, I'd try to implement the more accessible option. That's my hunch at least.

zdfs commented 10 years ago

I hope to implement this tonight. Sorry for the delay.