Skip to content

Instantly share code, notes, and snippets.

@jesseangell

jesseangell/file.html

Last active July 31, 2016 17:58
Show Gist options
  • Save jesseangell/51859a8cdb2781e6a834 to your computer and use it in GitHub Desktop.
Save jesseangell/51859a8cdb2781e6a834 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
file.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Credit Card Form</title>
<style>
.forAppleCardScan {
width: 1px;
height: 1px;
margin-left: -1000px;
position: fixed;
display: block;
}
</style>
</head>
<body>
<form>
<fieldset>
<label for="ccName">Name on card</label>
<input id="ccName" name="ccName" type="text">
<label for="cc_number">Credit Card Number</label>
<input id="cc_number" name="cc_number" type="text" >
<label for="cc_exp_date">Expiration Date</label>
<input id="cc_exp_date" type="text" placeholder="mm/yyyy" >
<input class="forAppleCardScan" id="cardExpirationMonth" type="text">
<input class="forAppleCardScan" id="cardExpirationYear" type="text">
<input type="submit" value="Charge">
</fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.0.2/jquery.payment.js"></script>
<script type="text/javascript">
$('#cardExpirationMonth, #cardExpirationYear').change(function() {
var month = $('#cardExpirationMonth').val();
var year = $('#cardExpirationYear').val();
$('#cc_exp_date').val(month+'/'+year)
});
$('#cc_number').payment('formatCardNumber');
$('#cc_exp_date').payment('formatCardExpiry');
</script>
</body>
</html>
@7mary4
Copy link

7mary4 commented Jan 14, 2015

This approach leaves two unlabeled form inputs in the tab flow and will be announced via a screen reader. Could you test this by adding tabindex="-1" aria-hidden="true" to the inputs? Tabindex="-1' removes it from the tab flow, so a sighted keyboard user won't be confused when their cursor disappears. Aria hidden tells the screen reader to ignore the object, as it is hidden.
I would expect that this does not affect the functionality.

 <input class="forAppleCardScan" id="cardExpirationMonth" type="text" tabindex="-1" aria-hidden="true">
<input class="forAppleCardScan" id="cardExpirationYear" type="text" tabindex="-1" aria-hidden="true">

Also, did you try using type="hidden"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment