Compliance with WCAG

Is your feature request related to a problem? Please describe. Accordning to https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines#Legal_obligations businesses that have online presence shold provide accessibility to disabled users.

Running “Siteimprove Accessibility Checker” in our app highlights problems that need to be solved by the ng-select package.

Problems found so far are:

• 1.3.1 Info and Relationships

Input fields should always have a description that is explicitly associated with the field to make sure that users of assistive technologies will also know what the field is for.

If the input field has a visible description indicating the purpose of the field, this description should be explicitly associated to the input field either as a HTML label or using the WAI-ARIA attribute 'aria-labelledby'.

If it is not possible to add a visible description, either add a mouseover text ('title' attribute) to the input field or create an invisible label using the WAI-ARIA attribute 'aria-label'.

• 1.4.6 Contrast (Enhanced)

The color of the text and the color of the background are not in sufficient contrast to each other.

The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text.

Note: Contrasts are not relevant where content is hidden. But make sure that for hidden content, which becomes visible when receiving focus, the contrast ratio is sufficient.

Insufficient contrast between text and its background can give problems for users with visual impairments and color blindness, but it can also affect a lot of other users, leading to important text potentially being overlooked.

Occurrences on thi

• 2.4.7 Focus Visible

With keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus.

Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.

• 3.3.2 Labels or Instructions

Drop down menus (select boxes or role="listbox") should always have a description that is explicitly associated with the menu to make sure that users of assistive technologies will also know what the menu is for.

If the drop down menu (select box or role="listbox") has a visible description indicating the purpose of the menu, this description should be explicitly associated to the input drop down menu either as a HTML label or using the WAI-ARIA attribute 'aria-labelledby'.

If it is not possible to add a visible description, either add a mouseover text ('title' attribute) to the drop down menu or create an invisible label using the WAI-ARIA attribute 'aria-label'.

• 4.1.2 Name, Role, Value

Input fields should always have a description that is explicitly associated with the field to make sure that users of assistive technologies will also know what the field is for.

If the input field has a visible description indicating the purpose of the field, this description should be explicitly associated to the input field either as a HTML label or using the WAI-ARIA attribute 'aria-labelledby'.

If it is not possible to add a visible description, either add a mouseover text ('title' attribute) to the input field or create an invisible label using the WAI-ARIA attribute 'aria-label'.

Describe the solution you’d like I’d like the ng-select package to by compliant to WCAG

Describe alternatives you’ve considered None

Additional context I’d like to help if possible

[brunano21]

@fredriklindell see also https://github.com/ng-select/ng-select/pull/1026.

[Bennethon]

This is also an issue for my organization, which has to comply with Section 508 standards (WCAG 2.0 AA). The main issue we are seeing is that the form input is not associated with a label, and there is no way to assign a label to it.