Disabling a button or input (type checkbox) using aria-disabled

Hi all.

So I want to disable a button ,as well as some inputs but off course it’s not possible to use disabled or btn.disabled=true; because of Aria.

Which has caused me probably , I don’t know , a week at least of extra headaches, as off course I had a working version with js disabled, until I realized (not accessible!), and now I need to start over basically .

I tried using add/remove eventlisteners but that did not work.
I have read MDN docs about aria-disabled , it’s of no help.

If I quit coding in the end it will be because of all the Aria complications.

is it acceptable, aria wise, to do this?

a button disabled in js like so

btn.setAttribute('aria-disabled', 'true');

from what I read this is not acceptable, but I’m not 100% sure.
if it is acceptable than my code would be fine.

I can’t get it work using removeEventlistener(‘click’ , ()=>{})


I think you need to be clearer about what you are trying to do here. There are legitimate uses for the disabled attribute and the aria-disabled attribute, but they depend on the context. So it’s hard to give you a good answer without knowing why you need to disable something.

And if you really want good help, then it would really help to see your code.

Hi , I’m trying to disable an ‘out of stock’ button ? I will post my code in github meanwhile.

The disabled attribute and the aria-disabled attribute do different things.

The disabled attribute actually disables something for everyone. The element is taken out of the tab order. You can’t click on it. Screen reader users won’t even know it is there.

The aria-disabled attribute does only one thing: it gives screen readers users a “hint” that the button is supposed to be disabled. But it doesn’t actually disable the button. That is up to you, the developer, to make sure the button is disabled. The aria-disabled attribute is basically a promise made to screen reader users that the button is disabled.

You would only use one or the other. You would never use both the disabled and aria-disabled attribute at the same time.

I’m not sure what an “out of stock” button does. Why does it need to be disabled?

That’s my understanding from what I read and it’s frustrating because it would have made things so much easier.

The page has a number of ‘pledges’ and when a pledge for a certain item gets to zero the button next to it changes to ‘out of stock’. Then that button should be disabled.

Each reward button pops up the ‘back this project’ popup.
It’s not very clear as I’ve not done enough CSS , but it’s there .
And when a user clicks the input buttons , if the pledge is ‘out of stock’ that input should be disabled as well .


It’s probably not clear at all. Ugh.

My first reaction is that “Out of stock” shouldn’t be a button. It doesn’t make any sense for it to be a button. The name of a button describes what a button does. “Out of stock” isn’t describing what the button does. It is describing the status of the item. I would just make this a p element. If you want to style it to look like a button, that’s fine.

If you want to keep it as a button element, then the button text should remain “Select Reward” and you can disable it with aria-disabled and then add the text “Out of stock” below the button, give the text an id, and then associate the text with the button using aria-describedby. That way a screen reader user will hear “Select Reward button disabled, Out of stock”. If you do this though, then you need to prevent the dialog from opening so that the button really is disabled. I don’t have time to read through your JS to tell you exactly how to do that (it’s bedtime) but it should be as simple as checking for the aria-disabled attribute on the button and then don’t open the dialog if it exists.

You might also want to look into using the dialog element to open that dialog. It will be a lot more accessible if you do.

1 Like

Thanks. From what I understand looking at the design folder , ‘select reward’ is a button , used to open the popup (modal I guess) .
I have tried disabling the functionality using : if (btn.getAttribute(‘aria-disabled’, ‘true’) , but it seemed not to work as the button would have both ‘aria-disabled’ set to true and false , which shouldn’t have been possible?

I will take a look at the dialog element (new to me).

I’m not sure I follow here. The button can only have one aria-disabled attribute. The value of that attribute would be either true or false. It can’t be both at the same time.

1 Like

I know, I probably had messed up in some way. Dialog seems to be going better so far :+1:

I managed to solve it using dialog and I had incorrectly used ‘aria-disabled’.
I had done :
if(btn.hasAttribute('aria-disabled', 'false') {}

And it should have been

const ariaFalse = btn.getAttribute('aria-disabled');

and if ariaFalse was false it woud execute the dialog.

Thanks again!