Missing form label about svelte-multiselect HOT 6 CLOSED

@egdegauperaa Thanks for reporting this. There's a comment in the component file about that input:

I'm guessing it needs an attribute aria-hidden to silence your warning.

from svelte-multiselect.

@janosh I´m still getting the "missing form label" error when I run Wave in Chrome.

When I run VoiceOver on my Mac the screen reader ignores that input field, so aria-hidden seems to be the correct approach to hide something from a screen reader. I guess one approach to silence the error in Wave would be to add a hidden label for that input?

from svelte-multiselect.

@egdegauperaa Thanks for reporting back. I just installed WAVE and ran it on https://svelte-multiselect.netlify.app after wrapping the offending input in a <label> with some random text. The a11y error went away but that leaves a bunch of CSS issues with the input no longer properly hidden. Will try to tackle those tonight.

from svelte-multiselect.

HI @janosh I´d try to have the label separate (not wrap the input with the label).

from svelte-multiselect.

What if we add an aria-label instead of a label element? That seems to fix the error as well and doesn't require changing the markup. Took the suggestion from w3 docs: Approach 2: Using aria-label

But I wonder what the value for this attribute should be. Is it ok just to set it to "should be ignored".

from svelte-multiselect.

That sounds good, and maybe "Label to be ignored"?

from svelte-multiselect.