Fix the a11y of the pay-method-choice radio buttons.

[muffinresearch]

At a minimum we need a text alternative for the card-icon. Also I reckon we should have the text be something more like:

VISA card ending in 1234

even if visually you get:

**** **** **** 1234

[brampitoyo]

I think having the text say VISA **** 1234 is a good alternative. It’s shorter than displaying all twelve *s, yet still perfectly understandable.

[muffinresearch]

I checked to see what ●●●● is like in voiceover. A string like 'VISA ●●●● 1111' was read as 'VISA 1111' which is ideal. It would be good to see what other assistive tech does with '●' though.

[muffinresearch]

If it turns out the general case means the '●' isn't read we can just make the text alternative for the card icon:

'Visa card ending in'

So the full string would be:

'Visa card ending in ●●●● 1111'

And it would be read as:

'Visa card ending in 1111'

but visually you'd see:

[VISA ICON] ●●●● 1111

[tofumatt]

👍 I like that solution!

• tofumatt

On Thu, Aug 13, 2015 at 9:29 AM, Stuart Colville notifications@github.com
wrote:

If it turns out the general case means the '●' isn't read we can just make the text alternative for the card icon:
'Visa card ending in'
So the full string would be:
'Visa card ending in ●●●● 1111'
And it would be read as:
'Visa card ending in 1111'
but visually you'd see:

[VISA ICON] ●●●● 1111

Reply to this email directly or view it on GitHub:
#326 (comment)

[muffinresearch]

So based on this https://twitter.com/joverm/status/631787514504835073

It's not really going to be great if we end up with this being read out:

"Visa card ending in bullet, bullet, bullet, bullet 1111"

To that end I think we can do it so that we could use markup something like:

<p><span class="vh pmtype-visa">Visa card ending in</span><span aria-hidden="true">●●●●</span>1111</p>

Notes: The vh class (short for visually hidden) hides the text but does not exclude it from screenreaders.

This should provide the correct visual result but what's read out being "Visa card ending in 1111".

Clearly we'd need to get this tested but I think that could work.