How to write better buttons

Accessible content can be the difference between someone ordering your product and someone totally ignoring it. In this blog, I’ll show you how to make buttons engaging for your entire audience, why they need to be descriptive, and why leaving them as they are could be costing you BIG MONEY.

Want your buttons to be pushed? Get in touch and I’ll get people in a pressing frenzy.

What is accessible content?

Accessible content is content than anyone can experience, whether they’re fully abled or have any kind of disability. It means blind people can use screen readers to navigate a website, that deaf people can read subtitles on videos, and that people who can’t use mice can still access menus through the tab key.

There are lots of assets that create accessible content, all of which are decided by the Web Content Accessibility Guidelines.

The one I’m going to talk about today is buttons, and text links that perform the same function. How do you make these accessible, and what happens if you don’t? Oooh, intriguing.

Why do buttons need to be accessible?

For able-bodied people, a button is obvious. It looks different, usually highlighted in a different colour and positioned underneath a product or body of text. It looks like something you should click. Just by seeing it, we know we should click it to complete an action, because that’s what years of internet use has trained us to do.

But imagine if you couldn’t see that button, and were relying on supportive technology like a screen reader to tell you what it was. A screen reader wouldn’t tell you it was a different colour. It wouldn’t tell you the text in it was in bold, or what clicking it would achieve. It would just read what it said.

If the button text isn’t clear and descriptive, screen reader users might not know it’s a button at all.

This also applied to people who are colourblind. If the button is only different to the rest of a page because it’s in bright pink, but someone can’t see pink, they won’t know to click it.

If someone has the contrast turned down on the screen because they get headaches, and the the button text is white on light blue, they won’t. be able to read it.

If someone uses a head wand to navigate the web, but your button is too small for the wand to hit, they ain’t gonna waste too much time trying.

Basically, by making your buttons only work for fully able-bodied users, you’re alienating a huge chunk of your target market. There are over 14 million people registered as disabled in the UK alone. If 14 million people can’t click your buttons, your buttons are a waste of space.

What makes a button accessible?

To make a button accessible to everyone, it needs to say what clicking it will achieve. Not only is that good for people who can’t see the button, but it’s also good for those who can. It creates a sense of trust for your customers, and allows them to complete their journey without any doubt.

Take the following two examples, both of which link to my Twitter account.

If the first button said “to see my Twitter account, click here,” a screen reader would only announce that the ‘click here’ was active. If you were tabbing through buttons on a page, and one simply said ‘click here,’ you wouldn’t know what clicking it would accomplish.

If the second button said “See my Twitter account” you would know exactly what to expect. It’s descriptive. It tells you what action it will perform.

But it’s more than just what the button says that make it accessible – it’s also how it looks. A button or a text link should be in a noticeably different colour from the rest of your text, helping it stand out even for people who have problems with their vision. This also helps with skimability – when people are just skimming your page’s content looking to complete their next next action.

If your button blends in, people can ignore it.

What happens if buttons aren’t accessible?

Accessibility doesn’t just impact on how your website performs, it could also put a serious dent in how much money in earns. Not only will you be preventing a huge percentage of your target market from completing a purchase, you’ll also be making it harder for everyone else.

The point of any product-focussed website is to get people from ‘thinking’ to ‘buying’ as quickly as possible. It’s a sales funnel, and you need that funnel to be clear of any potential obstructions.

Obstructions like poorly designed buttons and misleading button text.

By making buttons accessible, you make them easier to click. A big button next to a product that says ‘Add to basket’ is going to perform a lot better than one that says ‘Learn more’.

Want to know more about making your content accessible?

I’ve been making words work harder for over 10 years, and know all about how to make copy accessible no matter who your audience is. If you want me to do the same for you, get in touch (see how descriptive that text link was?) and I’ll make it happen.