diff --git a/knowledge-base/radcombobox-checkboxes-aria-support.md b/knowledge-base/radcombobox-checkboxes-aria-support.md new file mode 100644 index 000000000..1fe69cdb1 --- /dev/null +++ b/knowledge-base/radcombobox-checkboxes-aria-support.md @@ -0,0 +1,70 @@ +--- +title: Fixing Missing ARIA Attributes in RadComboBox with CheckBoxes +description: Learn how to address the missing aria-checked attributes and correct the invalid use of aria-selected in RadComboBox items with checkboxes and ARIA support enabled. +type: troubleshooting +page_title: How to Correct ARIA Attribute Errors in RadComboBox with CheckBoxes for Accessibility Compliance +slug: radcombobox-checkboxes-aria-support +tags: radcombobox, asp.net ajax, aria, checkboxes, accessibility, wcag +res_type: kb +ticketid: 1667614 +--- + +## Environment + + + + + + + + + + + +
ProductRadComboBox for ASP.NET AJAX
Version2024.3.805
+ +## Description + +When using the [RadComboBox](https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/overview) with `EnableAriaSupport` set to `true` and `CheckBoxes` enabled, ARC toolkit reports errors related to missing `aria-checked` attributes and an invalid use of `aria-selected` in elements with the role of checkbox. This issue occurs when the dropdown is extended. + +## Cause + +The cause of the issue is that the RadComboBox items with checkboxes enabled and ARIA support do not automatically manage the `aria-checked` attribute, which is required for checkboxes to be compliant with WCAG 2.2 Success Criterion 4.1.2. Additionally, the `aria-selected` attribute is used incorrectly in this context. + +## Solution + +To resolve the missing `aria-checked` attributes and correct the invalid use of `aria-selected`, add a JavaScript function that sets the `aria-checked` attribute for each checkbox item in the RadComboBox when the dropdown is opened. This function also ensures that the `aria-selected` attribute is handled correctly. + +The following example demonstrates how to implement this solution: + +```aspx + + + + + + + + + + +``` + +This script selects all list items (`li`) with the class `rcbItem` and the role `checkbox`, and updates the `aria-checked` attribute based on whether the checkbox within the item is checked or not. This approach ensures that the RadComboBox with checkboxes complies with accessibility standards. + +## See Also + +- [RadComboBox Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/overview) +- [WCAG 2.2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)