How to Make Accessible Buttons on Your Website?

When building accessible internet products, we really need to think about everything. From overall design and feel of the page to the small and often overlooked elements. This is exactly the case with buttons.

Yes, you read this right – buttons are also essential elements to accessibility. They help us navigate a website, perform tasks and acquire information. So, they have to be accessible.

Here we are going to outline what button accessibility actually is and how to achieve it.

Why Do Buttons Need to Be Accessible?

Buttons are an essential element in any web page. They serve for navigation, for accessing additional information, for giving additional information – they can serve any purpose you decide as a developer.

There is a large portion of people in the world who live with some kind of disability. A lot of people require the use of assistive technologies such as screen readers, text-to-speech software, braille readers, etc.

People with disabilities use the internet the same way as everybody else, so that’s why it’s extremely important to provide them with the necessary tools to do so.

By having accessible buttons, you are helping disabled people feel included. They can navigate your web page better and ultimately – will come back to it for just the same reason. Because it’s accessible.

Accessible buttons are also a requirement in many laws and guidelines all over the world. Accessibility laws are getting more important every day and following them can save you from lawsuits in the future.

History of Button Designs

The story of internet and software buttons, naturally, comes from the real world. Since the Industrial revolution, machines have been used to make all sorts of tasks easier. Humans are still using machines in everyday tasks even though we don’t make that a big deal anymore. Machines are just a part of life now.

But back then, when the first machines started simplifying our work, the use of buttons was the thing that gave us control. Thanks to buttons, levers, pulleys and different mechanisms, we are able to operate machines that give us freedom and more free time.

Following that same logic, buttons in the internet world are there to serve a specific function. They are there to do something and do only that something and nothing else – kind of a mouthful, but it’s true!

Button design online represents that function and by making the buttons accessible it’s easier for people to use them. Notice that we didn’t say disabled people – that’s because accessible button design is beneficial to all.

The design of software buttons came a long way since the development of the first computers. In those early days all buttons resembled real objects. For example, a calculator on your computer looked exactly the same way as a calculator in the real world. Every shadow, texture, shape and symbol were added.

With the evolution of computers, button design evolved as well and in 2014 Google introduced the flat design of buttons. Designers were really happy with that – it was simple, easy to design, it didn’t take a lot of time.

But we have to be completely frank – flat is boring. So, a few years later, buttons were designed with the so-called neomorphism design. It emphasizes shading and texture, making the button seem raised above the screen.

And since then, all hell broke loose. In today’s world, button design is as diverse as people living on earth. But one thing that stays the same is the function of the button, the thing that is key to accessibility.

Source: Pexels

Common Types Buttons in Web Design

Here we will look at the main types of buttons used in web design. Keep in mind that they all serve the same function across websites but can have different designs. We are going to talk about both and how to implement accessible features a little bit later on.

Primary Buttons

Primary buttons are buttons that serve the most common functions of any website. These are the buttons that people use all the time while navigating a website.

Ghost Buttons

Ghost buttons are exactly what they sound like. They have an outline, a label, but no solid fill or color. That’s why they are called ghost buttons. They serve different functions based on your design decisions.

Toggle Buttons

A toggle button is a software button that switches between two different functions. For example, a toggle button is the button for Light and Dark mode on a website, or ON/OFF buttons.

Dropdown Buttons

Drop down buttons suggest there’s more information hidden inside. They are primarily used on websites, where the navigation is hidden inside a drop-down menu.

Floating Action Buttons

These are buttons that perform the most common task on the screen. They appear raised over the content at all times, even when you scroll.

Source: Pexels

How to Build Accessible Buttons?

Making buttons accessible is a combination of design, function and proper labeling. Here we are going to outline the main aspects of accessible button design and why they are important.

Size of Buttons

The size of the buttons is crucial when you want to make them accessible. The famous accessibility guidelines established by the World Wide Web Consortium say that buttons have to be at least 24 x 24 CSS pixels. This can include both the button design and the padding around it.

Anything lower than that is not visible enough.

The size of the buttons is crucial for:

• People with visual disabilities, who can’t see the screen well enough.
• People with loss of motor function, who have a problem with pressing or clicking on small spaces.

But considering how accessible web design is good for everyone, large enough buttons are good even for users without disabilities.

Shape of Buttons

Here, intuitive and simple design is key. You should throw ideas for funky buttons in the trash and simply go with the more classical ones, especially for your primary buttons.

The shape of buttons is crucial for:

• People with visual disabilities;
• People with loss of motor function;
• People with cognitive or learning disabilities, who can’t perceive information the same way as everybody else.

Simple button design serves the function of the different buttons and leaves no room for questioning “oh, what does this button do?”.

Color Contrast

Color contrast is essential not only for buttons, but for all design features. For buttons, it’s important that you have a good contrast between the background color of the button and the text label on it.

You have to make sure your text is easily readable.

Color contrast is beneficial for:

• People with visual problems;
• Color blind people;
• People who use screen-readers.

They are also beneficial to users in general, because if you have low color contrast, you will make information almost invisible to everyone.

Labeling of Buttons

Labels are very important when you assign functions to your buttons. They have to be straight-forward, say exactly what the function is and leave no room for mistake.

When using a drop-down button, it’s advised to add an arrow, pointing down. This way you highlight that there’s a drop-down menu, even if it’s not visible.

Labeling is beneficial to:

• People with visual disabilities or blindness, who use screen-readers to browse the internet.
• People with cognitive disabilities;
• People who require special software to browse online and fill out forms.

As with all examples above, labeling is beneficial not only to disabled users, but to all users.

Conclusion

Buttons are an integral part of web design that is often overlooked in accessibility. Web buttons are the way we navigate online, find more information and reach it easily.

Buttons come from a long tradition of machines being used in the real world. In the modern world they have design and function that extend beyond their ancestors. That’s why it’s crucial to make them easy for use by people with disabilities, who are part of our society.

Frequently Asked Questions

Can I Skip Button Accessibility?

No, you can’t. Button accessibility is integral to any laws regarding accessibility features online. It’s important to have it in order to drive a bigger audience to your website and at the same time not put yourself in danger of accessibility lawsuits.

Is Button Accessibility Good for People Without Disabilities?

Yes. In their core, accessibility features equal great design. So, it’s beneficial to everybody.

Is It Hard to Make Buttons Accessible?

No, but you have to think about accessible design very early on in the design process. This way it will be easier.