Accessible Loyalty Program Pages and Points Displays
Loyalty pages hide points balances inside graphics, explain tiers in image banners, and bury redemption behind sliders. A pattern for loyalty that every member can use.
Loyalty programs ask members to trust a balance they often cannot read. Points totals rendered as stylised graphics, tier progress shown only as a coloured bar, and redemption controls built as custom sliders all shut out the members the program most wants to keep: the engaged ones who check often.
None of this needs exotic fixes. Points are numbers, tiers are lists, and redemption is a form. This guide covers presenting each of those plainly so the program works for every member.
State the balance and tier as plain text
The points balance, its cash equivalent where one exists, and the current tier should appear as ordinary text a screen reader announces on the account page. A progress bar may sit alongside, but the bar cannot be the only record of progress.
Expiry information deserves the same treatment. Points expiring on a date should say that date in text, with enough prominence that a member hears it before the points vanish, not in a footnote graphic.
Explain earning and redemption in a readable list
How points are earned, what they are worth, and how they are redeemed should be a short structured list on one page, not a banner carousel. Members comparing earn rates across actions need text they can revisit, not images that rotate away.
Keep the program terms linked from that same page in readable HTML. A terms PDF that no assistive technology can parse is a common and avoidable failure for a program built on trust.
Build redemption controls from native elements
Sliders are the default redemption control and the worst one: fiddly with a mouse, hostile to keyboards, and opaque to screen readers. A select list or a set of preset amount buttons plus a custom amount field does the same job accessibly.
Whatever control is used, the result must be announced: how many points will be spent, what they buy, and what balance remains. A redemption that changes the balance silently leaves keyboard and screen reader users guessing whether it worked.
Test the full member journey
Join, check balance, understand tier progress, redeem, and see the new balance: run that whole journey with keyboard only and with a screen reader. Loyalty journeys cross account pages, emails, and checkout, and a barrier in any one of them reads as a broken program.
Repeat the test after program relaunches and tier changes, which are marketing led redesigns and therefore exactly the changes that skip accessibility review until a member complains.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Colour Contrast for Sale Badges and Promo Labels, Making Store Search and Autocomplete Accessible, and Keyboard Navigation for Product Image Galleries.
Frequently asked questions
Why are points displays often inaccessible?
Because they are designed as marketing graphics: stylised numbers, progress bars, and banner images. The design treats the balance as decoration, while members treat it as account information that must be readable.
What should replace a redemption slider?
Preset amount buttons or a select list, plus a custom amount field when partial redemption is allowed. All are native, keyboard friendly, and announce their effect clearly.
Should tier progress be more than a progress bar?
Yes. The bar can stay as a visual aid, but the current tier, points to the next tier, and what the next tier unlocks should all exist as plain text.
How often should loyalty pages be retested?
At every program redesign or tier change, and at least yearly otherwise. Loyalty pages change with marketing calendars, not development ones, so they drift out of review easily.