WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Conditional occurrence of Form CTA buttons

for

From: Mark Magennis
Date: Apr 19, 2021 6:29AM

Hi Pooja,

There are different ways of making things hidden or disabled. I would say that if a button simply doesn't make sense when the UI is in a certain state then it may be okay to hide it completely, but it should be hidden both visually and to AT. A problem may occur if it's a button that the user expects to find though, such as Submit or Save. If it's just not there, it may appear as if something has gone wrong with the app. Having it there but disabled shows that it's available but just not at the moment which seems to be the logic you are describing. If that's logical then I don't see a problem with doing that. You might consider adding a description using aria-describedby to tell screen reader users why it is not available at the moment, if that is visually obvious but not obvious to screen reader users. If it's not visually obvious then your concerns are justified because it might be confusing or disconcerting.

How you disable it also makes a difference. To functionally disable it you can just block the Enter, Space, and mouse click events. But it will still be focusable while tabbing and won't be announced as disabled by a screen reader. To have it announced as disabled you can add either the HTML disabled attribute or the aria-disabled attribute. The HTML disabled attribute will remove it from the Tab order in most browsers so it won't receive focus while tabbing. Again, perhaps not what you want because it may appear that it's not there. Adding aria-disabled will leave it in the Tab order but it will be announced as disabled, so it is 'visible' to all but obviously not functioning right now.

Mark