Question about Vuejs and disabled links
I'm currently doing an ADA assessment on a project that is failing on their disabled links because the html rendered is
<a disabled="disable"> instead of <a disabled>
As far as I can tell, this is how Vuejs renders it because even if I change the <a v-bind:disabled="disabledValue"> to just hard code the <a disabled> Vuejs still seems to change it to <a disabled="disable">
Does anyone know if this is just how Vuejs handles its boolean attributes and if so is there a way around it? I've never used Vuejs before so I'm assuming I'm just missing something.25 Replies
have you tried to set
disabledValue to an empty string or null?
disabled="" should be the exact same as disabled, so, if you can output an empty string then that might be enoughPer ADA compliance, it needs to use the boolean attribute of
disableddisabled and disabled="" is the exact same@Scott Borrowman I think for something this specific, you might want to try at the Vue.js server directly.
https://discord.gg/vue
If you find out, please ping me as I'd like to know this as well 😄
by the way, which compliance tester are you using?
Thanks! Though, it looks like the issue I'm trying to fix needs something different. I need the screen reader to announce that it's disabled and I read that it won't announce
disabled="disable" but after more research it seems it only might announce disabled
What I need to make sure it's announced is aria-disabled="true"
ADA is fun.... hah!that's weird, but makes some sense
wait, why are you trying to disable a link?
and a link without an href at that...
i dont think that a link even has a
disabled attributeThe site is using anchors for previous and next buttons in their pagination instead of buttons. I'm just trying to fix some of their ADA fails without rebuilding the whole site. And they are using the old
<a href="#">can't you change it to
<button>?
with a tiny bit of css, and a touch in js, it should work"Should" work. They are using this pagination in multiple locations with different css and javascipt for each one. Changing the html could lead to breaking something somewhere without me knowing it
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled <-- links don't support the attribute, btw
They do support the
aria-disable="true" howeverwhich does nothing
that is, the link is still enabled
It makes the screen reader anounce that it's disable. Which is what I am trying to accomplish.
and the disabling of the link is working?