Using a developer can get you a quick win

A lot of my work as a developer involves adding functionality that my clients can’t do themselves. I’m sometimes asked why anyone would need a web developer now we have site builders like Squarespace and Wix. Well, polishing website experiences can get tricky!

For example, not long ago a client asked me to add visual representations of survey results to their website. The problem? The survey was made by a WordPress plugin with no clear option to add these visual results. Custom development by the plugin authors, although possible, would have been costly.

I took the survey myself, looking for solutions. Let’s mock up what a completed survey answer looked like at first:

This is fine. It gives the visitor their final score, and the maximum possible score. Text contrast is good, and screen readers can announce the text no problem, so no accessibility issues.

Looking for a WordPress solution first

I have a standard process for problems like this, which goes as follows:

1. Check all options within the plugin – sometimes the option to change functions isn’t immediately clear.
2. Check for a paid or ‘pro’ version of the plugin. Some authors offer more options in paid plugins.
3. Look for free or paid add-ons.
4. Look at the plugin code – sometimes we can ‘hook’ into this externally through WordPress and make changes that way.

When the WordPress route comes up short

In this case, none of these solutions were possible. Instead, I created external Javascript code that used the visitor’s score to create a visual similar to this:

What did I do here? I simply used the survey score to create a <meter> element below the text. This is a standard web element, so it’s available in all browsers. If Javascript is working on the user’s device, the <meter> will be shown. If not the score will still display as text. Progressive enhancement for the win!

The best part of the meter element is that it has built in “traffic light” colours. In this survey, lower scores are better. I suggested that we have a cut-off where the bar colour changes from green to amber as a warning. And here’s how it looks when the score is higher than the cut-off:

In the process, I fixed a few other accessibility issues I found in the plugin’s survey results. So the client got the changes they wanted and we made the overall experience better for everyone.