Accessibility for inputs

[djfuzzy]

This function solves the problem (这个功能解决的问题)

There currently doesn't appear to be a way to associate labels with inputs as recommended by W3C for accesibility: https://www.w3.org/WAI/tutorials/forms/labels/. This is so people using screen readers or voice assistants can properly identify inputs. A website using this framework would be difficult to use by people who are hard of seeing or have other disabilities.

Expected API (期望的 API)

<n-form-item label="Name" path="name">
  <n-input id="nameInput" v-model:value="form.name" type="text" />
</n-form-item>

Should generate something like the following:

<label for="nameInput" ...>Name</label>
...
<input type="text" id="nameInput" ...>

If the id is missing, a random, unique one should be automatically generated.

It should also be possible to use aria attributes like aria-label when there isn't an identifying element for the input.

<n-input id="nameInput" v-model:value="form.name" type="text" aria-label="Name" />

[woodhull]

It also makes it very difficult to use naive-ui with many test automation technologies.

[kvii]

The code below is works in my case, but it's a little bit ... boring.

<NFormItem label="label" path="field" :label-props="{ 'for': 'field' }">
    <NInput v-model:value="model.field" :input-props="{ autocomplete: 'off', id: 'field' }" />
</NFormItem>

[tommed]

There is a wider need for WCAG/WAI support in this UI. Here in the UK and also in the USA, there is legislation requiring systems to properly work with screen readers and keyboard shortcuts.

There seems to be almost no support for WCAG in these components. Is this something which would be considered? It's super important for us to allow any end-users with disabilities to use our systems fully, but this component library looks very very good - it puts us in a difficult place.

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

[tommed]

Closing due to inactivity < fixing the ticket!

[woodhull]

It seems very unhelpful to close all of the accessibility tickets.

[jahnli]

At present, the problem has been submerged. In my opinion, only by re-opening a problem can more people see it and be willing to add it. If this problem is closed, I am very sorry and I will re-open it

[djfuzzy]

Accessibility should be a top priority for the maintainers of this library. It's absurd that a UI library in 2024 is not following even the basic of accessibility standards that have been around for a long time.

[tommed]

Tbh, @djfuzzy have you seen PrimeVue's WCAG support? It's really impressive. Given this library isn't likely to get all the basics anytime soon - you may want to check this out.

[djfuzzy]

@tommed I was actually thinking about that. I can't go live with my web app without accessibility so I was strongly considering another UI library, and PrimeVue was one of them. Thanks for the suggestion!