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
Copy file name to clipboardexpand all lines: components/checkbox/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
27
27
| -------- | --------- | ----- |
28
28
|`.k-checkbox`|`role=checkbox` or `type=checkbox`| Announces the `checkbox` role of the element. |
29
29
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name to which it will be assigned. |
30
+
||`aria-required=true`| The attribute is rendered only when the CheckBox is in a `form` HTML element and announces the required state of the component. |
31
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the checkbox, or if the value of the checkbox is invalid, to the error message. This attribute should only be present when a hint is set or when the checkbox value is invalid. |
30
32
||`aria-checked=true` or `checked=checked`| Announces the checked state of the CheckBox. |
31
33
||`disabled=disabled` or `aria-disabled=true`| The attribute is rendered only when the CheckBox is disabled. |
32
34
|`.k-invalid,.ng-invalid`|`aria-invalid=true`| The attribute is rendered only when the CheckBox is in a `form` HTML element and announces the invalid state of the component. |
Copy file name to clipboardexpand all lines: components/dateinput/accessibility/wai-aria-support.md
+3
Original file line number
Diff line number
Diff line change
@@ -27,6 +27,9 @@ This section lists the selectors, attributes, and behavior patterns supported by
27
27
| -------- | --------- | ----- |
28
28
|`.k-input-inner`|`role=textbox` or `nodeName=input`| The element should either be an `<input type="text">` element or should have `role="textbox"` assigned. |
29
29
||`label for` or `aria-label` or `aria-labelledby`| The input needs an accessible name to be assigned to it. |
30
+
||`aria-required=true`| The attribute is rendered only when the DateInput is in a `form` HTML element and announces the required state of the component. |
31
+
||`aria-invalid=true`| Attribute is rendered only when the DateInput is in form and announces the valid state of the component. |
32
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
30
33
||`readonly=readonly` or `aria-readonly=true`| Attribute is rendered only when the DateInput is readonly. |
31
34
||`tabindex=0`| The element should be focusable. |
32
35
|`.k-disabled .k-input-inner`|`disabled=disabled` or `aria-disabled=true`| Attribute is rendered only when the DateInput is disabled. |
Copy file name to clipboardexpand all lines: components/datepicker/accessibility/wai-aria-support.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -29,12 +29,14 @@ This section lists the selectors, attributes, and behavior patterns supported by
29
29
| -------- | --------- | ----- |
30
30
|`.k-input-inner`|`role=combobox`| The input element should follow the `combobox` specification. |
31
31
||`label for` or `aria-label` or `aria-labelledby`| The input needs an accessible name to be assigned to it. |
32
+
||`aria-required=true`| The attribute is rendered only when the DatePicker is in a `form` HTML element and announces the required state of the component. |
32
33
||`aria-haspopup=grid`| Indicates the component has a Calendar Popup that implements `role="grid"`. |
33
34
||`aria-expanded=true/false`| Announces whether the Popup is visible or not. |
34
35
||`aria-controls=.k-animation-container id`| Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
35
36
||`aria-activedescendant=.k-calendar-td.k-focus id`| Points to the focused item (date/month/year) in the Calendar Popup. Should only be present when the Popup is open. |
37
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
36
38
||`readonly=readonly` or `aria-readonly=true`| Attribute is rendered only when the DatePicker is readonly. |
37
-
||`aria-invalid=true`| Attribute is rendered only when the combobox is in form and announces the valid state of the component. |
39
+
||`aria-invalid=true`| Attribute is rendered only when the DatePicker is in form and announces the valid state of the component. |
38
40
||`tabindex=0`| The element must be focusable. |
39
41
|`.k-disabled .k-input-inner`|`disabled=disabled` or `aria-disabled=true`| Attribute is rendered only when the DatePicker is disabled. |
40
42
|`.k-input-button`|`role=button` or `nodeName=button`| The element should either be a `<button>` element or should have `role="button"` assigned. |
Copy file name to clipboardexpand all lines: components/daterangepicker/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -29,6 +29,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
29
29
| -------- | --------- | ----- |
30
30
|`.k-input-inner`|`role=combobox`| The input element should follow the `combobox` specification. |
31
31
||`label for` or `aria-label` or `aria-labelledby`| The input needs an accessible name to be assigned to it. |
32
+
||`aria-required=true`| The attribute is rendered only when the DateRangePicker is in a `form` HTML element and announces the required state of the component. |
33
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
32
34
||`aria-haspopup=grid`| Indicates the component has a Calendar Popup that implements `role="grid"`. |
33
35
||`aria-expanded=true/false`| Announces whether the Popup is visible or not. |
34
36
||`aria-controls=.k-calendar-container id`| Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
Copy file name to clipboardexpand all lines: components/datetimepicker/accessibility/wai-aria-support.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -29,12 +29,14 @@ This section lists the selectors, attributes, and behavior patterns supported by
29
29
| -------- | --------- | ----- |
30
30
|`.k-input-inner`|`role=combobox`| The input element should follow the `combobox` specification. |
31
31
||`label for` or `aria-label` or `aria-labelledby`| The input needs an accessible name to be assigned to it. |
32
+
||`aria-required=true`| The attribute is rendered only when the DateTimePicker is in a `form` HTML element and announces the required state of the component. |
33
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
32
34
||`aria-haspopup=dialog`| Indicates the component has a Dialog Popup. |
33
35
||`aria-expanded=true/false`| Announces whether the Popup is visible or not. |
34
36
||`aria-controls=.k-calendar-container id`| Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
35
37
||`aria-activedescendant=.k-calendar-td.k-focus id`| Points to the focused item (date/month/year/hour/minute) in the Calendar Popup or the Time Popup. Should only be present when the Popup is open. |
36
38
||`readonly=readonly` or `aria-readonly=true`| Attribute is rendered only when the DateTimePicker is readonly. |
37
-
||`aria-invalid=true`| Attribute is rendered only when the combobox is in form and announces the valid state of the component. |
39
+
||`aria-invalid=true`| Attribute is rendered only when the DateTimePicker is in form and announces the valid state of the component. |
38
40
||`tabindex=0`| The element should be focusable. |
39
41
|`.k-disabled .k-input-inner`|`disabled=disabled` or `aria-disabled=true`| Attribute is rendered only when the DateTimePicker is disabled. |
40
42
|`.k-input-button`|`role=button` or `nodeName=button`| The element should either be a `<button>` element or should have `role="button"` assigned. |
Copy file name to clipboardexpand all lines: components/maskedtextbox/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -32,6 +32,8 @@ The following table summarizes the selectors and attributes supported by the `in
32
32
| -------- | --------- | ----- |
33
33
|`.k-input-inner`|`role=textbox` or `nodeName=input`| Specifies the role of the component. Not required if the `<input type=text`> configuration is used. |
34
34
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
35
+
||`aria-required=true`| The attribute is rendered only when the MaskedTextBox is in a `form` HTML element and announces the required state of the component. |
36
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
35
37
||`aria-placeholder`| Announces the mask or placeolder for the component. |
36
38
|`.k-invalid .k-input-inner,.ng-invalid .k-input-inner`|`aria-invalid=true`| The attribute is rendered only when the MaskedTextBox is in a form and announces the valid state of the component. |
37
39
|`.k-disabled .k-input-inner`|`disabled=disabled` or `aria-disabled=true`| The attribute is rendered only when the MaskedTextBox is disabled. |
Copy file name to clipboardexpand all lines: components/numerictextbox/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
27
27
| -------- | --------- | ----- |
28
28
|`.k-input-inner`|`role=spinbutton`| Announces the spin button capabilities of the NumericTextBox. |
29
29
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
30
+
||`aria-required=true`| The attribute is rendered only when the NumericTextBox is in a `form` HTML element and announces the required state of the component. |
31
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
30
32
||`aria-valuemnow`| Announces the value for the component. |
31
33
||`aria-valuemin`| Announces the minimum value allowed for the component. |
32
34
||`aria-valuemax`| Announces the maximum value allowed for the component. |
Copy file name to clipboardexpand all lines: components/pager/accessibility/wai-aria-support.md
-1
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,6 @@ The `Page` select, which is present for mobile devices and smaller screens with
39
39
|`.k-pager-nav`|`role=button` or `nodeName=button`| Specifies the role of the element. |
40
40
||`aria-disabled=true`| The attribute is present when the the `Arrow` button is disabled, for example, present on the **Previous** button when the current page is the first one. |
41
41
||`title`| Specifies the purpose of each button. |
42
-
|`.k-pager-numbers>.k-link`|`role=button` or `nodeName=button`| Specifies the role of the element. |
43
42
||`aria-label` or `title`| Specifies the purpose of each link, for example, `Page 6`. |
44
43
||`aria-current=page`| The attribute must be present on the currently selected page element. |
45
44
|`.k-pager-sizes>.k-dropdownlist`|`aria-label`| The element requires an `aria-label` to specify its purpose. |
Copy file name to clipboardexpand all lines: components/pdfviewer/accessibility/wai-aria-support.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -13,18 +13,18 @@ position: 50
13
13
14
14
15
15
16
-
Out of the box, the Telerik UI for Blazor PDFViewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
16
+
Out of the box, the Telerik UI for Blazor PDF Viewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
17
17
18
18
19
-
The PDFViewer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
19
+
The PDF Viewer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
20
20
21
21
## WAI-ARIA
22
22
23
23
24
24
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
25
25
26
26
27
-
The PDFViewer component contains two inner elements - a toolbar and a page container.
27
+
The PDF Viewer component contains two inner elements - a toolbar and a page container.
@@ -40,19 +40,19 @@ The PDFViewer component contains two inner elements - a toolbar and a page conta
40
40
## Section 508
41
41
42
42
43
-
The PDFViewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
43
+
The PDF Viewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
44
44
45
45
## Testing
46
46
47
47
48
-
The PDFViewer has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
48
+
The PDF Viewer has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
49
49
50
50
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
51
51
52
52
### Screen Readers
53
53
54
54
55
-
The PDFViewer has been tested with the following screen readers and browsers combinations:
55
+
The PDF Viewer has been tested with the following screen readers and browsers combinations:
|`.k-slider .k-button-decrease, .k-slider .k-button-increase`|`aria-hidden=true`| Hides the decrease/increase button elements and all their children from assistive technologies. |
49
+
||`tabindex=-1`| Excludes the decorative decrease/increase buttons from the natural tab order of the page. |
Copy file name to clipboardexpand all lines: components/splitter/accessibility/wai-aria-support.md
+1
Original file line number
Diff line number
Diff line change
@@ -38,6 +38,7 @@ This section lists the selectors, attributes, and behavior patterns supported by
38
38
|`.k-splitbar`|`role=separator`| Sets the proper role for the Splitter split-bar element. |
39
39
||`aria-label`| An accessible name, with aria-label should be included if there is more than one focusable separator. The value is set through the corresponding SplitterPane API. |
40
40
|`.k-splitbar-horizontal`|`aria-orientation=vertical`| When a splitbar separates two panes horizontally, its aria-orientation must be explicitly set to 'vertical'. |
41
+
||`aria-keyshortcuts=ArrowLeft ArrowRight ArrowUp ArrowDown`| Sets the aria-keyshortcuts attribute value to announce available keyboard shortcuts. Some are omitted for brevity. |
41
42
42
43
> Note: Setting the value-now attribute of the separator element is not applicable, as the Splitter is a complex layout component allowing splitting the content into multiple panes across any number and level of nested Splitters and panes, thus announcing a value would not convey any meaningful information. Moreover, there is no specification, or WAI-ARIA recommendation that explains how value should be set in multiple panes scenario. Further information on this complicated scenario could be found in the following WAI-ARIA GitHub issue:
Copy file name to clipboardexpand all lines: components/stepper/accessibility/wai-aria-support.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -31,8 +31,8 @@ The Stepper component is a landmark `<nav>` element or an element with `role="na
31
31
|`.k-stepper`|`role=navigation` or `nodeName=nav`| The landmark role `navigation` must be assigned to the component. |
32
32
|`.k-step-disabled>.k-step-link`|`aria-disabled=true`| A disabled (inactive) link. |
33
33
|`.k-step-current>.k-step-link`|`aria-current=step`| The currently selected link. |
34
-
|`.k-step.k-focus .k-step-link`|`tabindex=0`|Add element to the page Tab sequence. Set based on the Roving tabindex navigation when the tab is focused. |
35
-
|`.k-step:not(.k-focus) .k-step-link`|`tabindex=-1`| Removes the element from the page Tab sequence. Set based on the Roving tabindex navigation when a tab is not focused. |
34
+
|`.k-step.k-focus .k-step-link`|`tabindex=0`|Adds an element to the page's tab order. Set based on the roving tabindex navigation when the tab is focused. |
35
+
|`.k-step:not(.k-focus) .k-step-link`|`tabindex=-1`| Removes the element from the page's tab order. Set based on the roving tabindex navigation when a tab is not focused. |
36
36
37
37
38
38
No aria attributes should be applied to the Stepper as the ProgressBar serves a purely aesthetic purpose.
Copy file name to clipboardexpand all lines: components/switch/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
27
27
| -------- | --------- | ----- |
28
28
|`.k-switch`|`role=switch`| Announces the switch role of the element. |
29
29
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
30
+
||`aria-required=true`| The attribute is rendered only when the Switch is in a `form` HTML element and announces the required state of the component. |
31
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
30
32
||`aria-checked`| Announces the checked state of the Switch. |
31
33
||`tabindex=0`| The element must be focusable. |
32
34
||`aria-invalid=true`| The attribute is rendered only when the Switch is in a form and announces the valid state of the component. |
Copy file name to clipboardexpand all lines: components/textarea/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
27
27
| -------- | --------- | ----- |
28
28
|`.k-input-inner`|`role=textbox` or `nodeName=textarea`| Describes the role of the component. |
29
29
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
30
+
||`aria-required=true`| The attribute is rendered only when the TextArea is in a `form` HTML element and announces the required state of the component. |
31
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
30
32
||`aria-multiline=true`| Announces the multi-line behavior of the TextArea. |
31
33
||`aria-invalid=true`| The attribute is rendered only when the TextArea is in a form and announces the valid state of the component. |
32
34
|`.k-disabled .k-input-inner`|`disabled=disabled` or `aria-disabled=true`| The attribute is rendered only when the TextArea is disabled. |
Copy file name to clipboardexpand all lines: components/textbox/accessibility/wai-aria-support.md
+2
Original file line number
Diff line number
Diff line change
@@ -30,6 +30,8 @@ No role attribute is implemented as the `html input type="text"` element is suff
30
30
| -------- | --------- | ----- |
31
31
|`.k-input-inner`|`role=textbox` or `nodeName=input`| Describes the role of the component. |
32
32
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
33
+
||`aria-required=true`| The attribute is rendered only when the TextBox is in a `form` HTML element and announces the required state of the component. |
34
+
||`aria-describedby=.k-form-hint id/.k-form-error id`| Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
33
35
||`aria-invalid=true`| The attribute is rendered only when the TextBox is in a form and announces the valid state of the component. |
34
36
|`.k-disabled .k-input-inner`|`disabled=disabled` or `aria-disabled=true`| The attribute is rendered only when the TextBox is disabled. |
0 commit comments