vuetifyjs / vuetifyjs/vuetify

[Feature Request] Add aria-disabled attribute to disabled VBtn components for improved accessibility

Open
#22,071 8 comments 0 reactions 1 assignee View on GitHub

@Haviles04 is already working on this.

Since Sep 18, 2025.

a11y C: VBtn T: enhancement
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Problem to solve

Currently, when a v-btn component is disabled using the disabled prop, it only applies visual styling (CSS classes) and prevents interactions, but lacks proper ARIA attributes for accessibility. This creates several issues:

Screen readers cannot properly announce the disabled state to users with visual impairments
Automated testing becomes difficult when trying to target disabled buttons
Does not follow WCAG 2.1 accessibility guidelines for disabled interactive elements
Inconsistent with modern web accessibility standards that recommend using aria-disabled="true" instead of or alongside the disabled attribute

<!-- Current output for disabled button -->
<button class="v-btn v-btn--disabled" disabled>
  Click me
</button>
<!-- Expected output with proper ARIA support -->
<button class="v-btn v-btn--disabled" disabled aria-disabled="true">
  Click me
</button>

This issue is part of a broader accessibility improvement effort. Similar issues may exist in other components like:

v-text-field (disabled inputs)
v-select (disabled selectors)
v-checkbox (disabled checkboxes)
Time picker clock items (already reported separately)

Visual error in storybook testing
Image

Proposed solution

Add the aria-disabled="true" attribute to VBtn components when the disabled prop is set to true. This should be implemented in the VBtn component to:

Automatically add aria-disabled="true" when disabled prop is true
Ensure the attribute is not present when the button is enabled
Maintain backward compatibility with existing implementations
Follow the same pattern used in other Vuetify components that support disabled states

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.