fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only) #20339

Martin-Idel · 2024-08-15T15:42:33Z

Closes #19155
Closes #19156

Description

This PR solves accessibility problems in selection components. The current behaviour of a select field is the following:

The screen reader never reads the label
When in multi-select mode, the screen reader never announces which fields are actually selected in the list

The two separate commits solve these two issues: The first commit actually correctly attaches the lable of the selectbox to its input so that screen readers can pick this up and associate the label with the input, while the second commit puts a label to the Multiselect boxes (VSelect and VAutocomplete) which screen readers can use to read out whether that entry is currently selected or not.

This PR should introduce no change in behaviour for anybody not using a screenreader. It was tested with the screenreaders orca and JAWS (some of the latest versions).

Markup(s)

Bug: Not reading out the label. Playground link for reproduction:

https://play.vuetifyjs.com/#eNpdT8sKwjAQ/JVlL1HQVlBQpArevHj2YD3UukohaUKSFqT0392kFcVT5rHMTC4dOlumB2OStiHcYuZJGVl42uc1QNbOC2MijKTUtS+qmuwoRdGRpNJDO1f6TnKXo3LPHGFbcZRjGl8WZHGL9uk1QJbST3T6nx2UoTpLfyYxdaWtjAdHvhmWVcpo66EDSw/o4WG1AsG/EeEcgHOdB94Eu3AxEUeSUovp14sD2b2M1gzEWVt5F9fQPvRxE/YzXCarZLnBANbJAq9v6ylnYQ==
Using a screen reader, one can verify, that the label is not read out

Using the same Playground file with these fixes, the screen reader is now able to read it out.

Playground file for convenience:

<template>
  <v-app>
    <v-container>
      <v-select v-model="msg" :items="items" label="My label" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello')
  const items = ['Hello', 'World']
</script>

Bug: Not reading out the label in text areas. Playground link for reproduction:

https://play.vuetifyjs.com/#eNpdj81uwkAMhF/F3UtaqSTqD5cqVOLWS2+Veuj2sCQGIu2fvCYCId4dbxYkxM0zY3k+/x1Voq5ZxliPO1QfqmV00RrGT+0B2nFmYpzGSXTBsxk80sWaTMY9G0ID48yFHu1CK5c2WoE1q0l9H8oolpzucBtsj1SCG0Pi5lrV3Hdlp6C0zQ2iyNTREBkS8q6QDi4GYjgC4RpOsKbgoJLvqrwOIHcTgxDCIm88Vl9obYDfQLZ/0Nr/oMSBtwKk/dL3YDaCUT3l5tIlLer0rN7q9/plrvIwr1/V/xkW9G3G

Using the same Playground file with these fixes, the screen reader is now able to read it out.

Playground file for convenience:

<template>
  <v-app>
    <v-container>
      <v-textarea v-model="msg" label="My label" placeholder="My placeholder" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello World!\nTest other\nAnd again')
</script>

Bug: No information about which boxes are clicked in multiselect. Playground link for reproduction:

https://play.vuetifyjs.com/#eNpdkEFrwzAMhf+K8MUbtMmgg42SDnbbZecdmhyyVB0GOTa2Ehil/72y05C2J0vvE3pP3p9UDF356X0xDqi2qmK0nlrGj7oHqMZ1630uc9O5nlvTY7hKWYxI2PEsAIxr6w5Iu1rZ+FerBWztQGw8oSAOA94xI8ZRQH5vCbW/edn3/1QurJyDlY/JkjIFr8qbg6SNXTCeISIP013GehcYThDwCGc4BmdBy1/oNA4geyODHAK7NPG0119I5HTzvNAcWfjMVqB/XKCDbpL/5Che6rxSm+K12LyrVLwVL6q5AE2jduo=

Using the same Playground file with these fixes, the screen reader is now able to read it out.

Playground file for convenience:

<template>
  <v-app>
    <v-container>
      <v-select
        v-model="msg"
        :multiple="true"
        :items="items"
        label="My label"
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref(['Hello'])
  const items = ['Hello', 'World']
</script>

Screenreaders don't read out the label for several components, because it's not connected to the component.

In multiselect comboboxes, screen readers currently don't read out the checkboxes, which informs the user which elements are selected fixes vuetifyjs#19156

johnleider

Are there any other inputs that we need to consider this for?

johnleider · 2025-02-27T17:08:41Z

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -520,6 +520,7 @@ export const VAutocomplete = genericComponent<new <
                                      modelValue={ isSelected }
                                      ripple={ false }
                                      tabindex="-1"
+                                      aria-label={ isSelected ? 'checked' : 'not checked' }


Does this need to use i18n?

Probably makes sense. I tried to add i18n (added English for most languages, I hope that would be okay).

johnleider · 2025-02-27T17:08:52Z

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -440,6 +439,7 @@ export const VSelect = genericComponent<new <
                                        modelValue={ isSelected }
                                        ripple={ false }
                                        tabindex="-1"
+                                        aria-label={ isSelected ? 'checked' : 'not checked' }


Does this need to use i18n?

Text type is already default undefined

Martin-Idel · 2025-02-28T20:32:12Z

Regarding other parts where this might be needed: It needs to be multiselect checkboxes within a listbox and I could only find those in those two components - it works correctly for regular checkboxes.

KaelWD · 2025-03-03T08:25:19Z

Bug: Not reading out the label.

VFieldLabel already has for, it shouldn't need id and aria-labeledby as well if VSelect didn't also add aria-label to the input element (#17786)

Bug: Not reading out the label in text areas.

#21025, there's two labels with for but both are hidden when the field is active.

Bug: No information about which boxes are clicked in multiselect.

NVDA at least already reads "Hello not selected 1 of 2", adding the label to the checkbox seems redundant because now it says "Not checked hello not selected 1 of 2". Does JAWS support aria-selected and if so why isn't our current implementation of it working?
On android talkback I can't even get to the list items, the menu closes as soon as I try to focus it.

J-Sek · 2025-03-03T13:21:58Z

I don't see VCombobox among changes. Is it just an oversight or intentional?

Martin-Idel · 2025-03-06T20:51:44Z

@KaelWD

Bug: Not reading out the label.

VFieldLabel already has for, it shouldn't need id and aria-labeledby as well if VSelect didn't also add aria-label to the input element (#17786)

So what you are suggesting is that removing the aria-label for the input element should be enough here? That sounds correct, I'll give that a try.

Bug: Not reading out the label in text areas.

#21025, there's two labels with for but both are hidden when the field is active.

I guess what you are suggesting is that the labels aria-hidden or visibility: hidden are not switched correctly between variants so your suggestion is to fix that bug instead of my approach here. Will you do this and I just remove my approach here?

Bug: No information about which boxes are clicked in multiselect.

NVDA at least already reads "Hello not selected 1 of 2", adding the label to the checkbox seems redundant because now it says "Not checked hello not selected 1 of 2". Does JAWS support aria-selected and if so why isn't our current implementation of it working?
On android talkback I can't even get to the list items, the menu closes as soon as I try to focus it.

Both JAWS and orca should in principle support "aria-selected". Checking my own reproduction link above I can now no longer reproduce it with orca, so maybe it was fixed on the screenreader's end. I'll ping my colleague to see whether they can still reproduce it with JAWS.

Martin-Idel added 2 commits August 15, 2024 16:32

fix(VSelect/VTextarea/VTextarea): Fix label for screenreaders

7959ff0

Screenreaders don't read out the label for several components, because it's not connected to the component.

fix(VAutocomplete/VSelect): Read out selection in combobox

91ad4a0

In multiselect comboboxes, screen readers currently don't read out the checkboxes, which informs the user which elements are selected fixes vuetifyjs#19156

Martin-Idel changed the title ~~Fix labelling~~ fix(VTextArea/VSelect): Fix labelling Aug 15, 2024

Martin-Idel changed the title ~~fix(VTextArea/VSelect): Fix labelling~~ fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only) Aug 20, 2024

KaelWD force-pushed the master branch 3 times, most recently from 4c970f9 to 6a3285f Compare September 3, 2024 18:11

Martin-Idel added 2 commits October 14, 2024 22:22

Merge branch 'master' into fix_labelling

1712b08

Merge branch 'master' into fix_labelling

1aa34d6

KaelWD force-pushed the master branch from 94fe84d to 006b7fd Compare October 25, 2024 09:56

MajesticPotatoe added C: VTextarea C: VSelect T: bug Functionality that does not work as intended/expected labels Oct 28, 2024

KaelWD force-pushed the master branch from e05ff63 to 54e430f Compare November 23, 2024 13:28

KaelWD force-pushed the master branch from 383dac4 to 812af2e Compare February 14, 2025 06:34

johnleider force-pushed the master branch from b3f121f to 6d957d3 Compare February 14, 2025 17:01

johnleider assigned Martin-Idel Feb 27, 2025

johnleider added this to the v3.7.x milestone Feb 27, 2025

johnleider requested changes Feb 27, 2025

View reviewed changes

johnleider and others added 2 commits February 27, 2025 11:34

chore(VField): remove default definition

51a656b

Text type is already default undefined

Merge branch 'master' into fix_labelling

9325205

Martin-Idel force-pushed the fix_labelling branch 3 times, most recently from f8a8069 to 941ef68 Compare February 28, 2025 20:17

feat(VSelect/VAutocomplete): Add locale for checked/unchecked labels

12846c7

Martin-Idel force-pushed the fix_labelling branch from 941ef68 to 12846c7 Compare February 28, 2025 20:24

johnleider force-pushed the master branch from 1cf8ca8 to bb6f4f8 Compare March 2, 2025 22:01

johnleider mentioned this pull request Apr 1, 2025

fix(VSelect): add aria-label a11y #21181

Merged

KaelWD modified the milestones: v3.7.x, v3.8.x Apr 1, 2025

johnleider force-pushed the master branch from a2e4439 to 050d544 Compare April 29, 2025 14:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only) #20339

fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only) #20339

Martin-Idel commented Aug 15, 2024 •

edited

Loading

johnleider left a comment

johnleider Feb 27, 2025

Martin-Idel Feb 28, 2025

johnleider Feb 27, 2025

Martin-Idel commented Feb 28, 2025

KaelWD commented Mar 3, 2025 •

edited

Loading

J-Sek commented Mar 3, 2025

Martin-Idel commented Mar 6, 2025

fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only) #20339

Are you sure you want to change the base?

fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only) #20339

Conversation

Martin-Idel commented Aug 15, 2024 • edited Loading

Description

Markup(s)

johnleider left a comment

Choose a reason for hiding this comment

johnleider Feb 27, 2025

Choose a reason for hiding this comment

Martin-Idel Feb 28, 2025

Choose a reason for hiding this comment

johnleider Feb 27, 2025

Choose a reason for hiding this comment

Martin-Idel commented Feb 28, 2025

KaelWD commented Mar 3, 2025 • edited Loading

J-Sek commented Mar 3, 2025

Martin-Idel commented Mar 6, 2025

Martin-Idel commented Aug 15, 2024 •

edited

Loading

KaelWD commented Mar 3, 2025 •

edited

Loading