Accessibility - a plea for disabled buttons -

A few months ago there was a long critical article on the accessibility of disabled buttons. The tenor was that these buttons should be avoided. To read the article you have to be a Medium member. Like the old Groucho Marx, I don't want to be a member of a club that would accept me as a member, so I decided not to read the article "Never, ever disable buttons - Requirements for an accessible solution" - I hate those Membership reiquirements for reading an article, so I will not link to it.

In this context, disabled means that buttons are present in the user interface but cannot be clicked. Visually they are usually grayed out and in the Accessibility API they are displayed as an element with the correct role, for example "button", but as inactive. NVDA, for example, says "not available".

From a purely technical point of view there is no problem with accessibility. Even old HTML offers the Disabled state. The counter-argument is that you only realise at the end of a form that the form cannot be sent. However, in my opinion there is a more serious problem if the button can be activated despite errors. The screen reader user only notices that there was a problem after submitting and the screen reader has re-rendered the page, which is particularly annoying with large pages. Let's imagine a newsletter form that is close to the end of a subpage. There is also a risk that the user may not even notice that an error has occurred with static forms. How often do you submit a form and do not check again - or do not receive confirmation - that it worked? In my view, this is an argument for disabled buttons and their accessibility.

The situation is somewhat different with dynamically validated forms. Here you can alert the user to the problem with a message when they click on the button and focus on the possibly incorrect form element. In newsletters, this is often the data protection checkbox.

The problem here literally starts earlier in poor form design. If errors can be detected automatically, users must be informed of them at the latest when they leave the respective form element. I'm generally not a fan of Deutsche Bahn's user interface, but at least they're doing a good job. They do this in the interface where you can request mobility assistance online. If you leave a mandatory field without or with incorrect information, you're immediately informed. So the key is not the disabled button, but good error management in the form. This includes dynamic validation of input and the correct display of mandatory fields.

Of course, there will still be people who fill out the form incorrectly. But as mentioned above, this can be reduced through sensible error management and then the button is no longer disabled when you reach it.

There is also nothing wrong with providing information before or on the Disabled button as to why the button cannot be activated. For sighted people, this can be done by displaying a message, for blind people, by using an ARIA label.

Read more on accessible Conception