Enhancing accessibility for buttons: An in-depth guide!

By: Skynet Technologies USA LLC
8 mins
Accessibility for Disabled Button

A website is made of many elements that impact its user experience directly or indirectly. To offer accessible content and maintain a consistent conversion, adhering to web development best practices is mandatory. And when it comes to accessibility of all web elements, website buttons are one of them.

At times, websites have disabled buttons that impact user interaction profoundly with the website. However, such buttons are kept disabled purposely due to some technical requirements such as unavailability of that feature, missing or invalid link, or the link being unauthorized for users.

However, in any case, it is important to ensure that disabled buttons do not increase the website bounce rate and harm its accessibility.

Disadvantages of disabled buttons – reasons to improve their accessibility!

  • Disabled buttons create confusion and mislead users!

    Users suffering from cognitive or learning disabilities may find it weird that’s why a button is not working, or it may make them perplexed. Because the rest of the interface is working and only the button is not, it will be confusing for them. At times, disabled buttons don’t give any information on why they are not working. Such a situation leads to a negative user experience and decreases conversions.

  • Disabled buttons are difficult to find!

    WCAG accessibility guidelines has no specific requirement for disabled buttons' color contrast. Thus, websites that conform with accessibility standards, have disabled buttons mostly in gray color or muted color, which is problematic to see for users with low vision or visual impairments.

  • Assistive technologies cannot perceive disabled buttons!

    Disabled buttons are invisible to assistive technologies, thereby users relying on these technologies cannot hear the presence of disabled buttons.

Tips to make disabled buttons accessible!

  • ARIA can help!

    If in website settings, the ARIA-disabled attribute is kept ‘true’, then the button will receive tab focus and indicate to screen readers that the button is inactive. If the button (which is using aria-disabled) is left in the DOM order intentionally, the used web design is needed to pass the contrast minimum.

    Code to use the ARIA-disabled attribute and allow the button to receive focus:

    <button type="submit" aria-disabled="true"> Add to Cart</button>

    To remove the disabled button from the tab order, a negative tabindex can be used. It will replicate the behavior of control when the HTML disabled attribute is used.

    <button type="submit" aria-disabled="true" tabindex="-1"> Add to Cart</button>

    If a custom control is made using <div> or <span> non-HTML elements, they do not support the aria-disabled attribute even with the role="button". In such cases, the aria equivalent should be used to disable the control.

    <div role="button" aria-disabled="true" tabindex="-1">Edit</div>

    It is important to ensure that focus order is consistent and aria-disabled attribute helps maintain all interactive elements' visibility while keeping them disabled. Thereby, the buttons do not need to be removed completely. It is crucial to submit buttons in forms and items temporarily unavailable for users.

    Though, it is not a good design to keep a disabled button due to a lack of validation. But if such a design pattern must be used, providing an error message to explain the exact problem is suggested.

    On the other hand, the <disabled> HTML attribute fully disables the button by removing it from the tab order. However, it is announced as ‘unavailable’ to assistive technology in browse mode.

    <button type="button" disabled>Click Me!</button>
  • Visual indicators are to eliminate the problem!

    Putting a CSS property cursor on a disabled button is a good design practice. It provides an additional visual indicator to show that the button is inactive.

    disabled button

  • Provide help text assistance!

    Visible text can be placed around the disabled button to make them accessible. The text gives context to the users on why the button is not available. It is quite similar to instructions on forms. For example, if a user is filling out a form, there is an instruction above the submit button – “all fields in this form must be filled before clicking on the submit button”. So, the users will know why the submit button is not working for them if they haven’t filled all the fields.

    Consider styling help text differently to make it visible and distinct from the disabled button.

  • Avoid muting colors!

    Often, disabled buttons have muted colors or poor color contrast, which reduces their visibility for users with low vision.

    To solve this issue, do not use default colors for disabled buttons, instead, make them different from primary and secondary buttons. Thereby users will know that frequently used buttons are different from disabled buttons. Use WCAG-compliant colors by checking them through the contrast checker.

  • Try not disabling buttons!

    A better way to solve the disabled button accessibility problem is not disabling them. But if it is important to disable them, adhere to accessibility guidelines to ensure a smooth user experience.

Wrapping up

Enhancing accessibility for disabled buttons involves a combination of visual, technical, and contextual strategies. By adhering to best practices such as maintaining clear visual indicators, using appropriate HTML and ARIA roles, providing relevant information, and conducting thorough testing, it is possible to create an inclusive and user-friendly web experience.

Accessibility is an ongoing commitment, and by prioritizing it in web design and development processes, an organization contributes to a more equitable digital world for everyone.

At Skynet Technologies, we provide complete digital accessibility solution including accessibility audit, remediation, document accessibility, training, ongoing monitoring, and support to make and improve website accessibility. We provide AI-based “All in One Accessibility” tool, is a simple, quick, and cost-effective accessibility solution. Let’s make your website or web app accessible for everyone, so that every user can engage in a seamless way. For more information, reach out us to [email protected].