Reference Number

[feedmypixel]

Description

Reference Number

Screenshot

Hackpad Discussion

https://designpatterns.hackpad.com/Transaction-reference-numbers-a7qTA6e2HEU

[stevenaproctor]

@gavinwye Component?

[gavinwye]

@stevenaproctor probably both I think we need an HMRC specific pattern for ref numbers unless we just use the GOV.UK guidance, but I think there may be reasons HMRC is different. Then we should have a component that can be reused.

[stevenaproctor]

@gavinwye We will probably have to consider different reference numbers for different systems. Also, the logic of calling something that may have letters in it a number.

[philsherry]

259972932783, or…
2599 7293 2783?

We need to push for the latter, regardless of how the data falls out of the API. I have to highlight the middle bunch of numbers with my mouse to visually separate them before my brain can consider taking in the information.

It's possible @stevenaproctor has mentioned this sort of thing elsewhere.

[philsherry]

Did a small experiment around this. For reference IDs that make more sense to be read out character by character, we could do something like this:
<p class="reference-number">259972932783</p>

Then throw some JavaScript at it (but probably written better than this):

var refString = $('.reference-number').text()
function insertSpaces(refString) {
return refString.split("").join(" ")
}
refStringSpaces = insertSpaces(refString)
ref.attr('aria-label', refStringSpaces)
ref.wrapInner('<span aria-hidden="true"/>').text(refString.match(/[\s\S]{1,4}/g).join(" "))

Which would output this:
<p aria-label="2 5 9 9 7 2 9 3 2 7 8 3"><span aria-hidden="true">2599 7293 2783</span></p>

Screen reader will read out as individual characters, hide the original value (so older screen readers don’t read it twice), and then chunk it up into groups of four to make it easier to read for sighted users.

http://jsbin.com/kubaheyode/edit?html,js,output

[stevenaproctor]

What happens if JavaScript fails?

[philsherry]

@stevenaproctor Nothing happens. It's called progressive enhancement.

[stevenaproctor]

@philsherry Didn't want to assume.