Buttons are core to the success of each website and mobile app. Be it for an online store, subscription service, or government site, buttons enhance the user experience.

Button accessibility is the development and implementation of website or app buttons that everyone can easily understand and use. Improving button accessibility is about integrating top practices and helpful tips to make web buttons accessible to assistive technologies such as screen readers.

Guest article by David Gevorkian, Founder, and CEO of Be Accessible Inc.

Why is Button Accessibility Important?

As mentioned above, buttons have a key impact on the user experience of any website. Each website must ensure all its buttons are accessible and user-friendly to as many visitors as possible.

Imagine browsing a website and finding the desired button such as “Get the Offer”, or “Try Now” disabled, unclickable, or in bad font. You would probably leave the website and try to find an alternative with more accessible buttons. 

Unfortunately, the same situation can cause huge problems for people with disabilities preventing them from completing a mission on the website. This makes them excluded from information and services.

Button accessibility is one of the most critical elements for acquiring and retaining potential customers. Each non-accessible button drives them away from your website.

To make sure your website buttons are accessible, you need to simply perform a detailed audit for accessibility, find the potential issues, and make the necessary improvements.

What Are the Requirements for Button Accessibility?

Accessible buttons are not a nice-to-have practice anymore. They are a legal requirement.

The standard for website accessibility is considered the Web Content Accessibility Guidelines (WCAG).

The most well-known law for protecting the rights of disabled people is the Americans with Disabilities Act (ADA) which is based on the WCAG guidelines. The U.S. Department of Justice even pursues legal action against companies that don’t comply with the ADA standards. According to Forbes, there has been a rise in accessibility lawsuits despite the increased awareness about accessibility and the laws and guidelines for protecting it.

The most recent version of the Web Content Accessibility Guidelines (WCAG 2.2) suggests that website and app buttons should be visible and easily understandable to the users. Visitors should quickly understand how to press the button and what actions will follow after they do.

Main button accessibility guidelines according to WCAG are listed below:

  • The button text must simply inform users how to use it and what its function is. So, it should be as clear and concise as possible.
  • The size of the buttons should be at least 24 pixels. This makes them better clickable.
  • There should be proper color contrast between the text and the button, and the button and the background.

8 Tips to Design Accessible Buttons

1.   Provide Minimum Size Target

The first level of button accessibility is the button size. The target must be at least 24 pixels as per the latest WCAG guidelines. However, to make your buttons as accessible as possible, keep them larger (ideally 44 pixels). This way you make the buttons easy to use for people with physical disabilities.

2.   Avoid Using Complex Designs

Buttons serve as guides to your website and app. To ensure easy website interaction for all users, you need to avoid any complex designs. A simple and minimalistic button design will help the users navigate your website smoothly without any confusion. All you need to do is to clearly show the purpose of each button.

3.   Provide Proper Color Contrast

Color contrast plays a key role in button accessibility. The latest version of Web Content Accessibility Guidelines (WCAG 2.2) suggests that:

  • The minimum color contrast between the text and the button should be 4.5:1.
  • The contrast between the background and the button should be a minimum of 3:1.

4.   Ensure Keyboard Navigability

The buttons should not only be clickable but also accessible by keyboard navigation. It’s important to remember that not everyone can use a mouse, especially people who are blind or have visual impairments and cannot see the mouse cursor. Ensuring keyboard navigability makes your website more user-friendly and intuitive for everyone.

5.   Provide Screen Reader Compatibility

Blind people or those with visual impairments rely on screen readers to navigate websites and apps. To make your website or app accessible, you need to prioritize screen reader compatibility for the buttons. Note that the code of each button should include a matching text label to help screen readers locate the button. Otherwise, the screen readers will simply read out “button” each time coming across one making it useless for the user.

Last but not least, to ensure button compatibility, label them properly and most importantly not include links on the button labels.

6.   Differentiate Buttons and Links

As mentioned above, buttons and links should always be differentiated as separate entities. Otherwise, you will break the user experience of your website.

Simply put, links and buttons deliver distinct communication to users by carrying out certain actions on your web page and linking direct users to diverse parts of the web experience.

A tip to consider when improving your button accessibility is to make buttons and links look different and be simple to understand for users.

7.   Give Each Button a Clear Label

Consider your website or app buttons as the pathway to different sections of your website. Labeling helps the users envision actions they will take by pressing each button and where it will lead them. Clear and straightforward labeling on buttons encourages users to take action without hesitation.

To avoid confusion, make sure to indicate the button type, including ARIA labels in the semantic HTML. Use simple and concise language like “Next”, or “Send”,  avoiding jargon or technical terms.

8.   Provide a Visual Cue For Each Button State

Buttons have different states depending on the product (click, hover, default, toggle, etc). They serve as visual indicators for the possible interactions with the button. All you need to do is make sure each button state has a visual cue that will help assistive technologies distinguish the state and identify the specific button being interacted with.

Provide Accessible Experiences

Buttons are the gateway to your website, products, services, and your brand as a whole.

If you do not have accessible buttons on your website or mobile app you are missing out on a significant portion of the potential audience and customers.

Improving button accessibility is not rocket science. All you need is to familiarize and adhere to the Web Content Accessibility Guidelines, perform regular accessibility audits, and make the required adjustments.

The tips described above will guide you in your accessibility journey making your website and app stand out in the market.