05/12/2024
'tis the season where brands go over the top with their Christmas-themed content by making them so inaccessible. And this one caught my eye.
As someone who gets various food produce delivered from local businesses and farmers, I can somewhat sympathise with those that does not a department dedicated in optimising their platform and making as intuitive and easy-to-use as possible. That's expensive and food producers struggle as it is.
But I would argue that everyone has the time and budget to make sure that their content are accessible, regardless of who you are. And this one from a milk delivery company has caught my eye.
Even as someone who is not blind, it was a struggle for me to read the banner. I really had to take my time. At first, I thought it was an image uploaded. But then I realised the background image was uploaded in CSS. So I'm assuming that has the budget to get some who is technical enough to upload that, which means that person should be able to adjust the CSS properties to make it easier to read with relative ease. But they didn’t.
Maybe one can make an argument that it's screen-reader friendly. It's not enough of an argument because not everyone who is blind depends nor can use a screen reader. And it’s affecting everyone. But let's go with this argument.
I used VoiceOver to test it and quickly ran into problems. I realised that the first heading at the top is using H4 and seemingly used for styling purpose. And the generic use of 'click here' is not making obvious enough for screen readers on where the page is going. So I immediately realised that it’s not screen-reader friendly. But there's no point for them to go to the next page, as it contained an image of calendars…with no alt text and limited text-based equivalent of the calendar. 🤷🏽
So what could they have done? Many things. But at the very least, be aware of how patterns and colour contrast in the background can make words illegible for many people.
I can't share a link for you to view, as that banner is behind a login. But looking at the image attached, how are you finding it?
---
ID: the top half is a Christmas-themed banner where there is a heavy snow in the background and white text on front of it. The text (barely) reads “Cheers to a Dairy Merry Christmas 🎅🏻 Can you believe the time?! Neither can we. In any case, let's talk Crimbo deliveries. Our team work hard all year round to get some of the countries freshest milk from our dairy to your doorstep- and we want to ensure they have some time to rest and recharge with friends and family. With that in mind, your deliveries will be changing over the holidays. Click here to see when to expect your deliveries over Christmas & New Year.”
The bottom half of the image is the browser's web developer tool showing the HTML and how the title is in H4, and the CSS on the right is displaying how a background image has been used.