Vuetify and Screenreader issue - label of v-select isn't read

Viewed 124

I am actually using Vuetify 2.6.6, sticking to the standard components. Beeing asked to make it accessible for screen reader users I struggle with the label not read by NVDA in case of v-select. (it must be read on hovering the label)

    <v-select  :items="items" label="name">
    </v-select>

I already played around with some of the examples on https://vuetifyjs.com/en/features/accessibility/ but nothing really helps.

Interesting: Not even the examples on the vuetifyjs site are read.

Also: Clicking in the input field makes NVDA read the label. Unfortunately, having selected sth. it says nothing is selected or blank.

Having finally selected sth. and hovering an inch to the right of the label... it is read.

The items in the v-select are just an array of strings.

If I understood right, semantic tags like label and input do not need to have additional aria attributes but my knowledge in this field is limited.

However, this is what gets rendered:

<div class="v-input theme--light v-text-field v-text-field--is-booted v-select">
<div class="v-input__control">
    <div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-14" class="v-input__slot">
        <div class="v-select__slot">
            <label for="input-14" class="v-label theme--light"
                style="left: 0px; right: auto; position: absolute;">Name</label>
            <div class="v-select__selections"><input id="input-14" readonly="readonly" type="text"
                    aria-readonly="false" autocomplete="off" control-id="ControlID-2"></div>
            <div class="v-input__append-inner">
                <div class="v-input__icon v-input__icon--append">
                    <i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light"></i>
                </div>
            </div>
            <input type="hidden">
        </div>
        <div class="v-menu">
            <!---->
        </div>
    </div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"></div>
        </div>
    </div>
</div>
0 Answers
Related