Picto thématique

Rule n° 98 - Disabled buttons are not hidden from screen readers.

From an ergonomic point of view, it is sometimes useful to disable certain form submission buttons. This may be the case when certain information is required or certain conditions must be met before the form can be submitted. When this choice is made, these disabled buttons are often represented by grayed-out buttons. The ergonomic choice is as follows: either disable the action button, or leave it enabled and inform users that a condition has not been met when they click on it. We have no recommendation to make regarding this ergonomic choice, but if you choose to disable the action button, you must ensure that the button in question is not hidden from screen readers, as this could render the form unusable with these tools.

PreviousNext
#Accessibility #Development #Forms

Goal

  • Ensure that forms are understandable in a screen reader.
  • Inform the user about actions that are possible or unavailable while filling out a form.

Implementation

  • Do not use the disabled attribute to disable the submit button.
  • Use the aria-disabled=“true” attribute on the button element, accompanied by the aria-describedby attribute to explain the status of the button.
  • Use JavaScript to block the button action and provide an informational message to the user.

Control

Verify that buttons that are disabled during input do not use the disabled attribute, and that they are correctly rendered in a screen reader in a comprehensible manner.

By Opquast - Read the license

PreviousNext

Discover Opquast training and certification

The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.

Opquast training has already allowed over 19,000 web professionals to have their skills certified. Train your teams, contact us

We offer a 1 hour free discovery module.

Discover Web QA
Free training module