Thinking of adding festive cheer to your site? Will everyone appreciate your Christmas plugin?

As Christmas approaches, all the traditional decorations, imagery and sounds appear. Trees are put up, fake snow is dotted about, and shopping centres pipe carols at us all. So how does Santa relate to accessibility? Here’s Hassell Inclusion’s Graham Armfield with an inclusive Christmas tale for you…

At a WordPress meetup recently, someone mentioned a plugin called Christmasify. This allows site administrators to easily add a selection of Christmassy items to their website. Options include: snowfall, Santa on his sledge moving across the screen, some Christmassy tunes playing, festive decorations for images, and a Christmassy font for the headings.

Screenshot of website page with presentation of content and images updated by Christmasify plugin . Snowflakes are passing across the screen, as is Santa’s sledge

Now I know this is not a serious plugin. It’s supposed to be a bit of fun. And we do like fun. However, I would urge people to think twice before they use this plugin on their sites, as it’s a potential accessibility nightmare.

In my view, if you use the plugin you may need to be prepared to say goodbye to significant numbers of your site visitors. Which might not be the Christmas bonus you were hoping for.

So what accessibility problems does the plugin (and others like it) cause? And can changes to the plugin be made that would save it from being a total accessibility nightmare.

Can we save Christmas?

Accessibility problems with movement

Movement within a web page can be annoying or distracting for significant numbers of people.

Dyslexics (who make up around 10% of the population), and others with learning or reading difficulties, can sometimes have difficulties reading text on web pages. Add in random white snowflakes moving around over the text, and Santa’s sledge coming across from the right, and reading has just become a lot harder.

People with poor vision are also likely to be impacted by the incessant movement as they try to focus on the core content on the page.

Some autistic people, and those with Asperger’s or ADHD (Attention deficit hyperactive disorder) may also find the continuous movement very distracting. Some may actually find it painful to view. If they can’t stop the movement, they are likely to leave our Christmassy site almost immediately. The back button is easy to find for everyone…

Accessibility problems with autoplaying sounds

If you choose to add in the plugin option to play a Christmas jingle, this is set to autoplay when each page of your site loads, which can also be problematic.

Unexpected audio playing in pages can cause concentration issues for people on the Autistic spectrum or those with ADHD. It can also affect people with reading or learning difficulties in the same way.

Screen reader users may also find that autoplaying sounds can obscure what their screen reader is saying when they arrive at your page. Thankfully, as the volume of the music is quite low initially, this is unlikely to prevent the user from hearing what page they’ve arrived at, but it’s still unexpected.

Thankfully, it is possible to stop the music. When the Christmas jingle is playing, there is an audio control inserted on the page. At the bottom. Which means that most of the people who want to find the stop button will have to spend a lot of time looking for it. Sighted keyboard users, for example, will have to tab through every other element on the page, before they can turn the music off.

Any other accessibility issues?

Screenshot of test page on smartphone screen

Unfortunately, the controls within the audio player are also not labelled, so screen readers will not announce what they are for. Additionally, within the NVDA screen reader, the audio control plays NVDA’s progress beeps whenever the music is playing, which ruins any enjoyment from the music.

One bit of good news. I checked the test site with a mobile screen reader (Talkback) on my Android phone, because I was concerned that the snow and Santa could interfere with usage of the mobile screen reader for blind users who move their fingers around the screen to focus on elements. Fortunately, there didn’t seem to be any problems here. I also noticed that on my mobile, the music did not autoplay as it does when on a desktop or laptop.

Usefully, the festive decoration on images within pages was provided using a CSS background image, and so was effectively ignored by screen readers and other assistive technologies.

Finally, the plugin substitutes the fonts used in headings on the page with one that is much more decorative. Some may find this stylised font harder to read.

Could the plugin be made better?

The main issues with this plugin are that:

  1. The user has no control over the snowfall and Santa movement – both of which automatically move across text on the page
  2. The audio can be switched off but the audio player exposes no useful screen reader labels for the controls, and the player controls are situated right at the bottom of the page

Both of these issues could be addressed if there was an obvious ‘Stop Christmas animations and sounds’ button provided at the top of the page – one that was keyboard accessible and had a sensible label for screen readers. When operated, this button should just disable the entire plugin functionality and remove the extra markup that the plugin adds to pages – including the button.

Ideally, the plugin should then set a cookie which would deactivate the plugin for all other pages on the site. Setting a cookie may seem extreme here, but most websites will use cookies for analytics purposes anyway. And this is a good use of a cookie – to remember a user’s preferred setting.

It wouldn’t really be that much work, to make sure Christmas doesn’t become an Accessibility Grinch.

Is this the only snow plugin?

No, it seems there are a few in WordPress… (sighs)

4 plugins to add snowfall effects to WordPress websites

Just some of the WordPress plugins to provide snow on your website

What do you think?

We’d love to know your thoughts on this blog. Please share your comments below.

Want more?

If this has been useful, you might like to sign-up for the Hassell Inclusion newsletter to get more insights like this in your email every month.

Tags: , ,
Leave a Comment

Fields with a background colour of light yellow and marked with * are required fields.

Fields with a background colour of red are invalid fields and need re-entry.