This is part of a series on writing accessible Ember apps. Feel free to start at the beginning to get caught up. Want to see these components in action? Then be sure to check out the Ember Twiddle or the GitHub Repo! Got questions? Hit me up on Twitter.
When it comes to numbers, assistive technology could use a bit of a helping hand. If you have a number like 4,235, most screen readers will read that as “four two three five”, while in your head you most likely read “four-thousand two-hundred thirty-five”. So when a computer presents a series of single digits back to a user that is actually a larger, multi-digit number, it can be both frustrating and confusing.
On previous applications I’ve worked on, we had custom components that would take a number, such as 98254.29, and convert it to a string that looked more like 98,254.29.
In this post we’re going to be building something similar. But instead of just converting a number to something that looks easier to read on the screen, we’re going to generate an aria-label that will read the value back to us in the same way we read it to ourselves.
Because this is something we may want to use elsewhere, we’re going to create a utility to do the language parsing portion for us. Here is the final code for that:
We could spend quite a bit of time on this code alone, but for the sake of brevity I will simply say that we will be calling numToWords and passing in an integer. The function will then take this number and return a human readable string as the value.
While our utility is a decent size, our component, on the other hand, will actually be relatively small. Here is the whole thing:
For example uses of this component, check out the Ember Twiddle for this series. But you should also take a moment to review a few notes about the code:
Our numToWords utility only works with integers, meaning no floats here. This is by design, because we want to have control over how the decimal is read in the value. This will become even more clear in our next post.
This is just a simplified method of making numbers look pretty on the screen. But really all it is doing is adding commas to the left side of the number.
Here is where we call our numToWords function, which will populate the aria-label attribute. But do take notice that wherever a decimal is in the number, we are replacing it with the word ‘point’.
Here is a couple example uses of our new ui-num component.
It can take large numbers such as:
Which will be rendered as:
It can also take decimal values:
Which will be rendered as:
I’ll admit, this one is a bit of a beast, and it could be improved further, but the results truly do present so much more nicely than the alternative. People may complain that we are gumming up the DOM with more text (Which is true), but gummed up or not, it is a useful aide that warrants its presence.
Next, we’re going to be extending this component do make a another one that is extremely useful. If you ever need to display currency within your app, then you should check it out!