You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Get started with the {{ site.product }} AutoComplete and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5
5
slug: accessibility_aspnetcore_autocomplete
6
6
position: 1
@@ -10,28 +10,88 @@ position: 1
10
10
11
11
The AutoComplete is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12
12
13
+
> According to [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria/#combobox) specification *"Authors must ensure an element with role combobox contains or owns a text input element with role textbox or searchbox..."*. Note, that in our implementation, the text input element is the one that has role="combobox", and does not contain another text input element. **This approach is valid for the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) specification and also for the [WAI-ARIA 1.0](https://www.w3.org/TR/wai-aria/#combobox) specification .**
14
+
>
15
+
> As it is stated in [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox)*"The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns"*. Therefore, we will keep the current state, even if it contradicts the WAI-ARIA 1.1 specification.
16
+
13
17
For more information, refer to:
14
18
*[Keyboard navigation by the Telerik UI AutoComplete]({% slug keynav_aspnetcore_autocomplete %})
15
19
*[Accessibility in {{ site.product }}]({% slug overview_accessibility %})
16
20
17
-
## WAI-ARIA
18
21
19
-
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in {{ site.product }}]({% slug overview_accessibility %}#wai-aria).
20
22
21
-
> According to [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria/#combobox) specification *"Authors must ensure an element with role combobox contains or owns a text input element with role textbox or searchbox..."*. Note, that in our implementation, the text input element is the one that has role="combobox", and does not contain another text input element. **This approach is valid for the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) specification and also for the [WAI-ARIA 1.0](https://www.w3.org/TR/wai-aria/#combobox) specification .**
22
-
>
23
-
> As it is stated in [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox)*"The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns"*. Therefore, we will keep the current state, even if it contradicts the WAI-ARIA 1.1 specification.
23
+
24
+
The Kendo UI for jQuery AutoComplete component is [WCAG 2.1 AAA](https://www.w3.org/TR/WCAG21/) and [Section 508](http://www.section508.gov/) compliant. The component also follows the [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing the keyboard navigation for its component role, and is tested against the popular screen readers.
25
+
26
+
## Wai-Aria
27
+
28
+
### AutoComplete wrapper
29
+
30
+
| Selector | Attribute | Usage |
31
+
| -------- | --------- | ----- |
32
+
| .k-input-inner |`role=combobox`| Announces the presence of a autocomplete as inner element of the autocomplete used for filtering. |
33
+
||`label for=` or `aria-label` or `aria-labelledby`| The input needs an accessible name to be assigned to it. |
34
+
||`aria-haspopup=listbox`| Indicates the component has a listbox Popup. |
35
+
||`aria-expanded=true/false`| Announces the state of the visibility of the popup. |
36
+
||`aria-controls=.k-animation-container id`| Points to the popup element. Signifies that the `combobox` element controls the `listbox`. |
37
+
||`aria-activedescendent=.k-list-item id`| Points to the focused item in the popup. The focused item is changed via keyboard navigation. If the popup is not visible, the attribute should not point to any element or should be removed. |
38
+
||`aria-autocomplete=list`| Attribute is rendered and value is set to list when **filtering** feature is enabled. |
39
+
||`aria-autocomplete=both`| Attribute is rendered and value is set to both when both **filtering** and **suggest** features are enabled. |
40
+
||`aria-autocomplete=inline`| Attribute is rendered and value is set to only **suggest** feature is enabled. |
41
+
||`disabled` or `aria-disabled`| Attribute is rendered only when the autocomplete is disabled. |
42
+
||`readonly` or `aria-readonly`| Attribute is rendered only when the autocomplete is readonly. |
43
+
||`aria-invalid=true`| Attribute is rendered only when the autocomplete is in form and announces the valid state of the component. |
44
+
||`aria-busy=true`| Attribute is rendered only when the autocomplete is loading data. |
45
+
||`tabindex=0`| The element must be focusable. |
46
+
47
+
### ListBox Popup
48
+
49
+
50
+
The Popup element of the component should implement the specification for a **PopuList** component.
51
+
52
+
| Selector | Attribute | Usage |
53
+
| -------- | --------- | ----- |
54
+
| .k-animation-container |`role=region`| When the component container is appended to the `<body>` element of the document, it needs a landmark role to be assigned to it. Otherwise, it should be appended to an element with an appropriate landmark role. |
55
+
||`aria-label` or `aria-labelledby`| Provides a label when the container has a `region` role assigned. |
56
+
| .k-list-ul |`role=listbox`| Identifies the ul element as a listbox. |
57
+
||`aria-label` or `aria-labelledby`| Provides a label for the listbox of the combobox. |
58
+
| .k-list-item |`role=option`| Identifies the li element as a listbox option. |
59
+
| .k-list-item.k-selected |`aria-selected=true`| Indicates the selected state of the item. |
60
+
61
+
## Resources
62
+
63
+
[ARIA practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)
64
+
65
+
[ARIA Practices: Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html)
24
66
25
67
## Section 508
26
68
27
-
The AutoComplete is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug overview_accessibility %}#section-508).
28
69
29
-
## WCAG 2.1
70
+
The AutoComplete is compliant with the [Section 508](http://www.section508.gov/) requirements
71
+
72
+
## Testing
73
+
74
+
75
+
The component has been extensively tested automatically with static code analyzers and manually with the most popular screen readers.
76
+
77
+
> Any Accessibility Issues could be reported in [Telerik Support System](https://www.telerik.com/account/support-center).
78
+
79
+
### Screen Readers
80
+
81
+
| Environment | Tool |
82
+
| ----------- | ---- |
83
+
| Firefox | NVDA |
84
+
| Chrome | JAWS |
85
+
| Microsoft Edge | JAWS |
86
+
87
+
88
+
89
+
### Automated Testing
30
90
31
-
The AutoComplete supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
91
+
The AutoComplete has been tested with [axe-core](https://github.com/dequelabs/axe-core).
32
92
33
93
## See Also
34
94
35
95
*[Keyboard Navigation by the AutoComplete HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/autocomplete/keyboard-navigation)
36
96
*[Keyboard Navigation by the AutoComplete HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_autocomplete %})
37
-
*[Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
97
+
*[Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
Copy file name to clipboardExpand all lines: docs/controls/editors/autocomplete/accessibility/overview.md
+73-9Lines changed: 73 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -10,29 +10,93 @@ position: 1
10
10
11
11
The AutoComplete is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12
12
13
+
> According to [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria/#combobox) specification *"Authors must ensure an element with role combobox contains or owns a text input element with role textbox or searchbox..."*. Note, that in our implementation, the text input element is the one that has role="combobox", and does not contain another text input element. **This approach is valid for the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) specification and also for the [WAI-ARIA 1.0](https://www.w3.org/TR/wai-aria/#combobox) specification .**
14
+
>
15
+
> As it is stated in [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox)*"The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns"*. Therefore, we will keep the current state, even if it contradicts the WAI-ARIA 1.1 specification.
16
+
13
17
For more information, refer to:
14
18
*[Keyboard navigation by the Kendo UI AutoComplete]({% slug keynav_kendoui_autocomplete_widget %})
15
19
*[Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
16
20
17
-
## WAI-ARIA
18
21
19
-
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in Kendo UI for jQuery]({% slug wai_aria_accessibility_support %}).
20
22
21
-
> According to [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria/#combobox) specification *"Authors must ensure an element with role combobox contains or owns a text input element with role textbox or searchbox..."*. Note, that in our implementation, the text input element is the one that has role="combobox", and does not contain another text input element. **This approach is valid for the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) specification and also for the [WAI-ARIA 1.0](https://www.w3.org/TR/wai-aria/#combobox) specification .**
22
-
>
23
-
> As it is stated in [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox)*"The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns"*. Therefore, we will keep the current state, even if it contradicts the WAI-ARIA 1.1 specification.
23
+
24
+
The Kendo UI for jQuery AutoComplete component is [WCAG 2.1 AAA](https://www.w3.org/TR/WCAG21/) and [Section 508](http://www.section508.gov/) compliant. The component also follows the [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing the keyboard navigation for its component role, and is tested against the popular screen readers.
25
+
26
+
## Wai-Aria
27
+
28
+
### AutoComplete wrapper
29
+
30
+
| Selector | Attribute | Usage |
31
+
| -------- | --------- | ----- |
32
+
| .k-input-inner |`role=combobox`| Announces the presence of a autocomplete as inner element of the autocomplete used for filtering. |
33
+
||`label for=` or `aria-label` or `aria-labelledby`| The input needs an accessible name to be assigned to it. |
34
+
||`aria-haspopup=listbox`| Indicates the component has a listbox Popup. |
35
+
||`aria-expanded=true/false`| Announces the state of the visibility of the popup. |
36
+
||`aria-controls=.k-animation-container id`| Points to the popup element. Signifies that the `combobox` element controls the `listbox`. |
37
+
||`aria-activedescendent=.k-list-item id`| Points to the focused item in the popup. The focused item is changed via keyboard navigation. If the popup is not visible, the attribute should not point to any element or should be removed. |
38
+
||`aria-autocomplete=list`| Attribute is rendered and value is set to list when **filtering** feature is enabled. |
39
+
||`aria-autocomplete=both`| Attribute is rendered and value is set to both when both **filtering** and **suggest** features are enabled. |
40
+
||`aria-autocomplete=inline`| Attribute is rendered and value is set to only **suggest** feature is enabled. |
41
+
||`disabled` or `aria-disabled`| Attribute is rendered only when the autocomplete is disabled. |
42
+
||`readonly` or `aria-readonly`| Attribute is rendered only when the autocomplete is readonly. |
43
+
||`aria-invalid=true`| Attribute is rendered only when the autocomplete is in form and announces the valid state of the component. |
44
+
||`aria-busy=true`| Attribute is rendered only when the autocomplete is loading data. |
45
+
||`tabindex=0`| The element must be focusable. |
46
+
47
+
### ListBox Popup
48
+
49
+
50
+
The Popup element of the component should implement the specification for a **PopuList** component.
51
+
52
+
| Selector | Attribute | Usage |
53
+
| -------- | --------- | ----- |
54
+
| .k-animation-container |`role=region`| When the component container is appended to the `<body>` element of the document, it needs a landmark role to be assigned to it. Otherwise, it should be appended to an element with an appropriate landmark role. |
55
+
||`aria-label` or `aria-labelledby`| Provides a label when the container has a `region` role assigned. |
56
+
| .k-list-ul |`role=listbox`| Identifies the ul element as a listbox. |
57
+
||`aria-label` or `aria-labelledby`| Provides a label for the listbox of the combobox. |
58
+
| .k-list-item |`role=option`| Identifies the li element as a listbox option. |
59
+
| .k-list-item.k-selected |`aria-selected=true`| Indicates the selected state of the item. |
60
+
61
+
## Resources
62
+
63
+
[ARIA practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)
64
+
65
+
[ARIA Practices: Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html)
24
66
25
67
## Section 508
26
68
27
-
The AutoComplete is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug section508_accessibility_support %}).
28
69
29
-
## WCAG 2.1
70
+
The AutoComplete is compliant with the [Section 508](http://www.section508.gov/) requirements
71
+
72
+
## Testing
73
+
74
+
75
+
The component has been extensively tested automatically with static code analyzers and manually with the most popular screen readers.
76
+
77
+
> Any Accessibility Issues could be reported in [Telerik Support System](https://www.telerik.com/account/support-center).
78
+
79
+
### Screen Readers
30
80
31
-
The AutoComplete supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in Kendo UI for jQuery]({% slug section508_wcag21_accessibility_support %})
81
+
| Environment | Tool |
82
+
| ----------- | ---- |
83
+
| Firefox | NVDA |
84
+
| Chrome | JAWS |
85
+
| Microsoft Edge | JAWS |
86
+
87
+
88
+
89
+
### Automated Testing
90
+
91
+
The AutoComplete has been tested with [axe-core](https://github.com/dequelabs/axe-core).
92
+
93
+
### Test Example
94
+
95
+
A live test example of the AutoComplete component could be found here: https://demos.telerik.com/kendo-ui/accessibility/autocomplete
32
96
33
97
## See Also
34
98
35
99
*[Keyboard Navigation by the AutoComplete (Demo)](https://demos.telerik.com/kendo-ui/autocomplete/keyboard-navigation)
36
100
*[Keyboard Navigation by the AutoComplete]({% slug keynav_kendoui_autocomplete_widget %})
37
101
*[Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
38
-
*[Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
102
+
*[Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
0 commit comments