`, ``, and ` `). Their semantic meaning will be used instead.
+
+#### Grid header
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-header-wrap>table` | `role=presentation/none` | Negates the default semantic role of the `` element. |
+| `.k-grid-header-wrap>table>thead` | `role=rowgroup` | Required as the owner `` element has its semantic role removed. |
+| | `id` | Id must be present on the element, so that it can be properly referenced in the `role=grid` element. |
+| `.k-grid-header-wrap>table>thead>tr` | `role=row` | Required as the owner `` element has its semantic role removed. |
+| | `aria-rowindex` | Row number including all headers, data (including master and detail) rows, and footers starting from 1. Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper indexing could not be calculated. Hence, the attribute must not be set. |
+| `.k-grid-header-wrap>table>thead>tr>th:not(.k-hierarchy-cell):not(.k-group-cell):not(.k-drag-cell)` | `role=columnheader` | Required as the owner `` element has its semantic role removed. |
+| | `aria-sort=none/ascending/descending` | Present if sorting is enabled for that column. |
+| | `title` or `aria-label` | Present on the element or its child if sorting is enabled for that field. |
+| | `aria-colindex` | Column number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans. |
+| | `aria-haspopup=dialog` | The attribute must be present if the column has a ColumnMenu. |
+| | `aria-haspopup=dialog` | The attribute must be present if the column has a FilterMenu and no ColumnMenu. |
+
+#### Grid locked header
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-header-locked>table` | `role=none/presentation` | Negates the default semantic role of the `` element. |
+| `.k-grid-header-locked>table>thead>tr>th` | `role=columnheader` | Required as the owner `` element has its semantic role removed. |
+| | `title` or `aria-label` | Present on the element or its child if sorting is enabled for that field. |
+| | `aria-colindex` | Column number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans. |
+| | `id` | Id must be present on the element, so that it can be properly referenced in the respective `` element in the `k-grid-header-wrap ` element. |
+| `.k-grid-header-locked .k-header[data-role='columnsorter']` | `aria-sort=none/ascending/descending` | Present if sorting is enabled for that column. |
+| `.k-grid-header-locked .k-header[data-role='columnmenu']` | `aria-haspopup=menu` | The attribute must be present if the column has a ColumnMenu. |
+| `.k-grid-header-locked .k-header[data-role='filtermenu']` | `aria-haspopup=dialog` | The attribute must be present if the column has a FilterMenu and no ColumnMenu. |
+
+#### Grid filter row
+
+Even if part of the ``, the Filter row must be composed of `` elements.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-header-wrap>table>thead>tr.k-filter-row>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `aria-label` | Has a label indicating that the cell is part of a filter row. |
+
+#### Grid locked filter row
+
+Even if part of the ``, the Filter row must be composed of `` elements.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-header-locked>table>thead>tr.k-filter-row>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `aria-label` | Has a label indicating that the cell is part of a filter row. |
+| | `id` | Id must be present on the element, so that it can be properly referenced in the respective `` filter row element in the `k-grid-header-wrap ` element. |
+
+#### Grid content
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid:not(.k-treelist) .k-grid-content>table` | `role=grid` | This is the main focusable Grid element (see above). |
+| `.k-grid-content>table>tbody` | `role=rowgroup` | Required as the owner `` element has its semantic role removed. |
+| `.k-grid-content>table>tbody>tr` | `role=row` | Required as the owner `` element has its semantic role removed. |
+| | `aria-rowindex` | Row number including all headers, data (including master and detail) rows, and footers starting from 1. Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper indexing could not be calculated. Hence, the attribute must not be set. In scenarios when master and detail rows are present in the Grid (Hierarchical Grid, Detail Template Grid), both master and detail rows must always be indexed. For example, if the first master row has `aria-rowindex=2`, even if its detail row is not present in the DOM, the next master row must have `aria-rowindex=4`. When rendered, the detail row must receive the missing index between the two master rows. In this example it would be `aria-rowindex=3`. |
+| `.k-grid-content tr.k-selected` | `aria-selected=true` | Set on the currently selected row(s). Only used wen selection mode is set to `row`. |
+| `.k-grid-content-locked + .k-grid-content tr` | `aria-owns` | If the Grid contains locked columns, the attribute points to the ids of the locked cells belonging visually to the same row. |
+| `.k-grid-content>table>tbody>tr>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `aria-colindex` | Col number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans. |
+| `td.k-selected` | `aria-selected=true` | Set on the currently selected cell(s). Only used when selection mode is set to cell. |
+| `.k-master-row .k-hierarchy-cell,.k-grouping-row>td` | `aria-expanded=true/false` | Optionally for cells holding grouping criteria values and for Master row cells in Detail template scenario. |
+| `.k-drag-cell` | `aria-label` | Must be present in a Drag Row scenario on the cell containing the drag handle. |
+
+#### Grid locked content
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-content-locked>table` | `role=none/presentation` | Negates the default semantic role of the `` element. |
+| `.k-grid-content-locked>table>tbody>tr>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `aria-colindex` | Col number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans. |
+| | `id` | Id must be present on the element, so that it can be properly referenced in the respective `` element in the `k-grid-content ` element. |
+
+#### Grid footer
+
+The Aggregates totals are placed within a ` ` element in the Content ``.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-footer-wrap>table` | `role=none/presentation` | Negates the default semantic role of the `` element. |
+| `tfoot` | `role=rowgroup` | Required as the owner `` element has its semantic role removed. |
+| | `id` | Id must be present on the element, so that it can be properly referenced in the `role=grid` element. |
+| `tfoot>tr` | `role=row` | Required as the owner `` element has its semantic role removed. |
+| | `aria-rowindex` | Row number including all headers, data (including master and detail) rows, and footers starting from 1. Footer rows are always the last ones in a Grid. Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper indexing could not be calculated. Hence, the attribute must not be set. |
+| `tfoot>tr>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `aria-colindex` | Column number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans. |
+
+#### Grid locked footer
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-footer-locked>table` | `role=none/presentation` | Negates the default semantic role of the `` element. |
+| `.k-grid-footer-locked>table>tfoot>tr>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `aria-colindex` | Col number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans. |
+| | `id` | Id must be present on the element, so that it can be properly referenced in the respective `` element in the `k-grid-footer-wrap ` element. |
+
+### Pager
+
+For the Grid Pager WAI-ARIA spec, please review the [Pager component]({% slug htmlhelpers_pager_aspnet_overview %}).
+
+[Pager accessibility specification]({% slug accessibility_aspnetcore_pager %}).
+
+#### Grid selection aggregates
+
+The selection aggregates are placed within a `.k-grid-selection-aggregates` element after the Grid `.k-grid-aria-root` element.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-selection-aggregates` | `aria-live=polite` | Ensures that changes in the calculated selection aggregates are announced by assistive technologies. |
+
+## Resources
+
+[WAI-ARIA specification for grid](https://www.w3.org/TR/wai-aria-1.2/#grid)
## Section 508
-The Grid is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug overview_accessibility %}#section-508).
+The Grid is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The Grid has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The Grid has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
-## WCAG 2.2
+To test the Grid component, refer to the [Grid Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/grid).
-The Grid 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/).
+## Keyboard Navigation
-For more information, refer to:
-* [WCAG 2.2 support by the Grid (demo)](https://demos.telerik.com/{{ site.platform }}/grid/index)
-* [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the Grid keyboard navigation works, refer to the [Grid Keyboard Navigation]({%slug keynav_aspnetcore_grid%}) article.
## See Also
-* [WCAG 2.2 Support by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/index)
-* [Keyboard Navigation by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/keyboard-navigation)
-* [Keyboard Navigation by the Grid HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_grid %})
-* [Accessibility Compliance in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the Grid for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/keyboard-navigation)
+* [Keyboard Navigation by the Grid for {{ site.framework }}]({% slug keynav_aspnetcore_grid %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/listview/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/listview/accessibility/overview.md
index eda4801d6cf..c5bc7f1f5df 100644
--- a/docs-aspnet/html-helpers/data-management/listview/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/data-management/listview/accessibility/overview.md
@@ -1,33 +1,67 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the Telerik UI ListView for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: ListView Documentation | ListView Accessibility
+description: "Get started with the {{ site.product }} ListView and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_htmlhelpers_listview
position: 1
---
# ListView Accessibility
-The ListView is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} ListView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI ListView HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_listview_aspnetcore_navigation %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The ListView is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](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.
## WAI-ARIA
-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 [accessibility support in {{ site.product }}]({% slug compliance_accessibility %}).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-listview:not(.k-selectable) .k-listview-content` | `role=list` | Specifies the role of non selectable ListView content element. |
+| `.k-listview.k-selectable .k-listview-content` | `role=listbox` | Specifies the role of selectable ListView content element. |
+| `.k-listview:not(.k-selectable) .k-listview-item` | `role=listitem` | Specifies the role of each item in a non selectable ListView. |
+| `.k-listview.k-selectable .k-listview-item` | `role=option` | Specifies the role of each item in a selectable ListView. |
+| `.k-listview-item` | `aria-setsize` | Specifies the total number of items present in the ListView. |
+| | `aria-posinset` | Specifies the position of the current item in the entire list of items present in the ListView. Value must be greated than or equal to 1 and smaller than or equal to the total number of items in the ListView. |
+| `.k-listview-item:nth-child(1)` | `tabindex=0` | The first item in the ListView must be focusable by default. |
+
+## Resources
+
+[WAI-ARIA Specification: List](https://www.w3.org/TR/wai-aria-1.2/#list)
+
+[WAI-ARIA Specification: Listitem](https://www.w3.org/TR/wai-aria-1.2/#listitem)
## Section 508
-The ListView is compliant with the Section 508 requirements. For more information, refer to the article on [accessibility support in {{ site.product }}]({% slug compliance_accessibility %}).
+The ListView is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The ListView has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The ListView has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the ListView component, refer to the [ListView Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/listview).
-## WCAG 2.2
+## Keyboard Navigation
-The ListView 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 [accessibility support in {{ site.product }}]({% slug compliance_accessibility %}).
+For details on how the ListView keyboard navigation works, refer to the [ListView Keyboard Navigation]({%slug htmlhelpers_listview_aspnetcore_navigation%}) article.
## See Also
-* [Keyboard Navigation by the ListView HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/keyboard-navigation)
-* [Keyboard Navigation by the ListView HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_listview_aspnetcore_navigation %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the ListView for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/keyboard-navigation)
+* [Keyboard Navigation by the ListView for {{ site.framework }}]({% slug htmlhelpers_listview_aspnetcore_navigation %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/pager/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/pager/accessibility/overview.md
index 331ed9f502d..8f28a4873d7 100644
--- a/docs-aspnet/html-helpers/data-management/pager/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/data-management/pager/accessibility/overview.md
@@ -1,38 +1,77 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the {{ site.product_short }} Pager by Telerik UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: Pager Documentation | Pager Accessibility
+description: "Get started with the {{ site.product }} Pager and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_pager
position: 1
---
# Pager Accessibility
-The pager is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} Pager provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the {{ site.product_short }} Pager]({% slug keynav_aspnetcore_pager %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The Pager 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.
## WAI-ARIA
-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_short }}]({% slug overview_accessibility %}#wai-aria).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The `PageSize` select must be implemented either as a DropDownList component with no filtering or through a native `` element.
+
+The `Page` select, which is present for mobile devices and smaller screens with limited space for page links, must be a native `` element.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pager` | `role=application` | Indicates that the `pager` element has its own keyboard navigation implemented. |
+| | `aria-roledescription=pager` | Clarifies the role of the Pager. |
+| | `aria-keyshortcuts=Enter ArrowRight ArrowLeft` | Announces the available keyboard shortcuts while the `pager` element is focused. |
+| | `aria-label` | Announces the currently selected page and the number of available pages. |
+| | `aria-controls` | Points to the `id` of the element that is being controlled, for example, a Grid. |
+| `.k-pager-nav` | `role=button` or `nodeName=button` | Specifies the role of the element. |
+| | `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. |
+| | `title` | Specifies the purpose of each button. |
+| | `aria-label` or `title` | Specifies the purpose of each link, for example, `Page 6`. |
+| | `aria-current=page` | The attribute must be present on the currently selected page element. |
+| `.k-pager-sizes>.k-dropdownlist` | `aria-label` | The element requires an `aria-label` to specify its purpose. |
+| `.k-pager-numbers-wrap>.k-dropdown` | `aria-label` | The element requires an `aria-label` to specify its purpose. |
+| `.k-pager-input>.k-input>.k-input-inner` | `aria-label` | The element requires an `aria-label` to specify its purpose. |
+
+## Resources
+
+[WAI-ARIA Specification for Navigation](https://www.w3.org/TR/wai-aria-1.2/#navigation)
+
+[Accessibility Style Guide: Pagination](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination)
## Section 508
-The Pager is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug overview_accessibility %}#section-508).
+The Pager is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The Pager has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The Pager has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
-## WCAG 2.2
+To test the Pager component, refer to the [Pager Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/pager).
-The pager 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/).
+## Keyboard Navigation
-For more information, refer to:
-* [WCAG 2.2 support by the Pager (demo)](https://demos.telerik.com/{{ site.platform }}/pager/index)
-* [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the Pager keyboard navigation works, refer to the [Pager Keyboard Navigation]({%slug keynav_aspnetcore_pager%}) article.
## See Also
-* [WCAG 2.2 Support by the Pager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pager/index)
-* [Keyboard Navigation by the Pager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pager/keyboard-navigation)
-* [Keyboard Navigation by the Pager HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_pager %})
-* [Accessibility Compliance in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the Pager for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pager/keyboard-navigation)
+* [Keyboard Navigation by the Pager for {{ site.framework }}]({% slug keynav_aspnetcore_pager %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/pager/overview.md b/docs-aspnet/html-helpers/data-management/pager/overview.md
index 1874ce1e7bc..b8764662c05 100644
--- a/docs-aspnet/html-helpers/data-management/pager/overview.md
+++ b/docs-aspnet/html-helpers/data-management/pager/overview.md
@@ -128,4 +128,7 @@ The following example demonstrates how to tie a pager to a data source and enabl
* [Pager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
* [Pager Server-Side API](/api/pager)
-* [Knowledge Base Section](/knowledge-base)
\ No newline at end of file
+* [Knowledge Base Section](/knowledge-base)
+{% if site.core %}
+* [Razor Pages binding]({% slug htmlhelpers_pager_razorpage_aspnetcore %})
+{% endif %}
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/pager/razor-page.md b/docs-aspnet/html-helpers/data-management/pager/razor-page.md
new file mode 100644
index 00000000000..90f8caa0025
--- /dev/null
+++ b/docs-aspnet/html-helpers/data-management/pager/razor-page.md
@@ -0,0 +1,170 @@
+---
+title: Razor Pages
+page_title: Razor Pages
+description: "Learn how to use the Telerik UI Pager component for {{ site.framework }} in a Razor Pages application."
+slug: htmlhelpers_pager_razorpage_aspnetcore
+position: 8
+---
+
+# Pager in Razor Pages
+
+Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name).
+
+You can seamlessly integrate the Telerik UI Pager for {{ site.framework }} in Razor Pages applications.
+
+This article describes how to configure the Pager component in a Razor Pages scenario.
+
+## Getting Started
+
+The Pager component provides a convenient integration with the Grid and DataSource. This example will demonstrate how to configure them in a Razor Pages scenario so that the Pager appear at the top of the Grid.
+
+1. Create the Grid, DataSource and Pager definitions.
+
+ ```HtmlHelper_Index.cshtml
+ @page
+ @model IndexModel
+ @using Kendo.Mvc.UI
+
+ @(Html.Kendo().DataSource()
+ .Name("dataSource1")
+ .Ajax(t => t.Read(r => r.Url("/Index?handler=Read").Data("forgeryToken")).PageSize(20))
+ )
+ @(Html.Kendo().Pager()
+ .Name("pager")
+ .DataSource("dataSource1")
+ .ButtonCount(5)
+ .PageSizes(true)
+ )
+ @(Html.Kendo().Grid()
+ .Name("grid")
+ .Columns(columns =>
+ {
+ columns.Bound(p => p.OrderID).Filterable(false).Width(100);
+ columns.Bound(p => p.Freight).Width(100);
+ columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
+ columns.Bound(p => p.ShipName);
+ columns.Bound(p => p.ShipCity).Width(150);
+ })
+ .Sortable()
+ .Scrollable()
+ .Filterable()
+ .DataSource("dataSource1")
+ )
+ ```
+ ```TagHelper_Index.cshtml
+ @page
+ @model IndexModel
+ @using Kendo.Mvc.UI
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+1. Add an `AntiForgeryToken` at the top of the page.
+
+ ```
+ @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+ @Html.AntiForgeryToken()
+ ```
+
+1. Send the `AntiForgeryToken` with the Read request.
+
+ ```
+
+ ```
+
+ Additional parameters can also be supplied.
+
+ ```
+
+ ```
+
+1. Within the `cshtml.cs` file, add a handler method for the Read data operation.
+
+ ```tab-Index.cshtml.cs
+ public static IList orders;
+
+ public void OnGet()
+ {
+ if (orders == null)
+ {
+ // Populate the "orders" collection with data.
+ orders = new List();
+ Enumerable.Range(1, 50).ToList().ForEach(i => orders.Add(new OrderViewModel
+ {
+ OrderID = i,
+ Freight = i * 10,
+ ShipName = "ShipName " + i,
+ ShipCity = "ShipCity " + i
+ }));
+ }
+ }
+
+ public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
+ {
+ return new JsonResult(orders.ToDataSourceResult(request));
+ }
+ ```
+ ```tab-Model
+ public class OrderViewModel
+ {
+ public int OrderID { get; set; }
+
+ public decimal? Freight { get; set; }
+
+ public string ShipCity { get; set; }
+
+ public string ShipName { get; set; }
+ }
+ ```
+
+## See Also
+
+* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
+* [Client-Side API of the Pager](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
+* [Server-Side HtmlHelper API of the Pager](/api/pager)
+* [Server-Side TagHelper API of the Pager](/api/taghelpers/pager)
+* [Knowledge Base Section](/knowledge-base)
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/pivotgrid/data-binding/razor-page.md b/docs-aspnet/html-helpers/data-management/pivotgrid/data-binding/razor-page.md
new file mode 100644
index 00000000000..1c916035831
--- /dev/null
+++ b/docs-aspnet/html-helpers/data-management/pivotgrid/data-binding/razor-page.md
@@ -0,0 +1,186 @@
+---
+title: Razor Pages
+page_title: Razor Pages
+description: "Learn how to use the Telerik UI PivotGrid component for {{ site.framework }} in a Razor Pages application."
+slug: htmlhelpers_pivotgrid_razorpage_aspnetcore
+position: 8
+---
+
+# PivotGrid in Razor Pages
+
+Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name).
+
+You can seamlessly integrate the Telerik UI PivotGrid for {{ site.framework }} in Razor Pages applications.
+
+This article describes how to configure the PivotGrid component in a Razor Pages scenario.
+
+## Getting Started
+
+The PivotGrid component provides a convenient integration with the Grid and DataSource. This example will demonstrate how to configure them in a Razor Pages scenario so that the PivotGrid appear at the top of the Grid.
+
+1. Create the Grid, DataSource and PivotGrid definitions.
+
+ ```HtmlHelper_Index.cshtml
+ @page
+ @model IndexModel
+ @using Kendo.Mvc.UI
+
+
+ @(Html.Kendo().PivotConfigurator()
+ .Name("configurator")
+ .Filterable(true)
+ .Height(500)
+ )
+
+ @(Html.Kendo().PivotGrid()
+ .Name("pivotgrid")
+ .Configurator("#configurator")
+ .ColumnWidth(120)
+ .Filterable(true)
+ .Height(500)
+ .DataSource(dataSource => dataSource
+ .Ajax()
+ .Transport(transport => transport.Read(r => r.Url("/Index?handler=Read").Data("forgeryToken")))
+ .Schema(schema => schema
+ .Cube(cube => cube
+ .Dimensions(dimensions => {
+ dimensions.Add(model => model.ContactName).Caption("All Contacts");
+ dimensions.Add(model => model.CompanyName).Caption("All Companies");
+ dimensions.Add(model => model.Country).Caption("All Countries");
+ dimensions.Add(model => model.ContactTitle).Caption("All Titles");
+ })
+ .Measures(measures => measures.Add("Contacts Count").Field(model => model.CustomerID).AggregateName("count"))
+ ))
+ .Columns(columns =>
+ {
+ columns.Add("Country").Expand(true);
+ columns.Add("CompanyName");
+ })
+ .Rows(rows => rows.Add("ContactTitle").Expand(true))
+ .Measures(measures => measures.Values("Contacts Count"))
+ )
+ )
+
+ ```
+ ```TagHelper_Index.cshtml
+ @page
+ @model IndexModel
+ @using Kendo.Mvc.UI
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
customers;
+
+ public void OnGet(string culture)
+ {
+ if (!String.IsNullOrEmpty(culture))
+ {
+ CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo(culture);
+ }
+
+ if (customers == null)
+ {
+ customers = new List();
+
+ Enumerable.Range(1, 50).ToList().ForEach(i => customers.Add(new CustomerViewModel
+ {
+ CustomerID = "CustomerID " + i,
+ CompanyName = "CompanyName " + (i % 3),
+ ContactName = "ContactName " + i,
+ ContactTitle = "ContactTitle " + (i % 7),
+ Country = "Country " + (i % 3)
+ }));
+
+ }
+ }
+
+ public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
+ {
+ return new JsonResult(customers.ToDataSourceResult(request));
+ }
+ ```
+ ```tab-Model
+ public class CustomerViewModel
+ {
+ public string CustomerID { get; set; }
+ public string CompanyName { get; set; }
+ public string ContactName { get; set; }
+ public string ContactTitle { get; set; }
+ public string Country { get; set; }
+ }
+ ```
+
+## See Also
+
+* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
+* [Client-Side API of the PivotGrid](https://docs.telerik.com/kendo-ui/api/javascript/ui/pivotgrid)
+* [Server-Side HtmlHelper API of the PivotGrid](/api/pivotgrid)
+* [Server-Side TagHelper API of the PivotGrid](/api/taghelpers/pivotgrid)
+* [Knowledge Base Section](/knowledge-base)
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/pivotgrid/overview.md b/docs-aspnet/html-helpers/data-management/pivotgrid/overview.md
index 3d0696511ef..876c2b3d755 100644
--- a/docs-aspnet/html-helpers/data-management/pivotgrid/overview.md
+++ b/docs-aspnet/html-helpers/data-management/pivotgrid/overview.md
@@ -138,4 +138,7 @@ To configure the PivotGrid for Ajax binding to an [Adventure Works](https://lear
* [Server-Side API of the PivotGrid TagHelper](/api/taghelpers/pivotgrid)
{% endif %}
* [Client-Side API of the PivotGrid](https://docs.telerik.com/kendo-ui/api/javascript/ui/pivotgrid)
+{% if site.core %}
+* [Razor Pages binding]({% slug htmlhelpers_pivotgrid_razorpage_aspnetcore %})
+{% endif %}
diff --git a/docs-aspnet/html-helpers/data-management/pivotgridv2/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/pivotgridv2/accessibility/overview.md
index c4f5083a494..2697dd262c3 100644
--- a/docs-aspnet/html-helpers/data-management/pivotgridv2/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/data-management/pivotgridv2/accessibility/overview.md
@@ -1,36 +1,143 @@
---
title: Overview
-page_title: PivotGridV2 Accessibility
-description: "Get started with the Telerik UI PivotGridV2 HtmlHelper for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: PivotGridV2 Documentation | PivotGridV2 Accessibility
+description: "Get started with the {{ site.product }} PivotGridV2 and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_pivotgridv2
position: 1
---
# PivotGridV2 Accessibility
-The PivotGridV2 is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} PivotGridV2 provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Kendo UI PivotGridV2]({% slug keynav_aspnetcore_pivotgridv2 %})
-* [Accessibility in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %})
+The PivotGridV2 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.
## WAI-ARIA
-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_short }}]({% slug overview_accessibility %}#wai-aria).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The PivotGridV2 is a composite component that consists of two logically separated structural elements:
+
+* Data Grid (`role="grid"`)
+* Configurator (`role="dialog"`)
+
+### Data Grid
+
+The element with `role="grid"` - includes the row headers, column headers, and data tables.
+
+#### Grid element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid` | `role=grid` | The role specifies the element is a Data Grid. |
+
+#### Column Headers
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid-column-headers>.k-pivotgrid-table` | `role=presentation/none` | Negates the default semantic role of the `` element. |
+| `.k-pivotgrid-empty-cell` | `role=columnheader` | Announces the empty cell role as a part of the programmatically constructed a11y tree. |
+| | `aria-colspan` | Sets the correct `aria-colspan` corresponding to the number of columns in the row headers table. |
+| | `aria-rowspan` | Sets the correct `aria-rowspan` corresponding to the number of rows in the column headers table. |
+| | `id` | Sets an unique identifier for the cell to be referenced from the first row in the column header table `aria-owns` attribute. |
+| `.k-pivotgrid-empty-cell>.k-sr-only` | `undefined` | The empty cell should have a nested `span.k-sr-only` element containing the localizable text message that will be announced by screen readers when the empty cell is focused. |
+| `.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody` | `role=rowgroup` | Required as the owner `` element has its semantic role removed. |
+| `.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row` | `role=row` | Required as the owner `` element has its semantic role removed. |
+| `.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row:first-child` | `aria-owns` | Lists the IDs of the `.k-pivotgrid-empty-cell` element AND all TD elements, children of the first column headers row (in the correct order - `EmptyID td1ID td2ID ...`), to construct the a11y tree. |
+| `.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row>th` | `role=columnheader` | Required as the owner `` element has its semantic role removed. |
+| | `aria-expanded=true/false` | Indicates the current expanded state of the header. |
+| | `id` | Unique and deterministic identifier, used to associate the header cell with respective data cells. |
+| `.k-i-arrow-chevron-up,.k-svg-i-arrow-chevron-up` | `aria-hidden=true` | Excludes the collapse icon from the screen reader output. |
+| `.k-i-arrow-chevron-down,.k-svg-i-arrow-chevron-down` | `aria-hidden=true` | Excludes the expand icon from the screen reader output. |
+
+#### Row Headers
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid-row-headers>.k-pivotgrid-table` | `role=none/presentation` | Negates the default semantic role of the `` element. |
+| `.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody` | `role=rowgroup` | Required as the owner `` element has its semantic role removed. |
+| `.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row` | `role=row` | Required as the owner `` element has its semantic role removed. |
+| | `aria-owns=[IDs of corresponding data cells]` | Used to associate row header cells with the corresponding data cells. |
+| `.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row>th` | `role=rowheader` | Required as the owner `` element has its semantic role removed. |
+| | `aria-expanded=true/false` | Indicates the current expanded state of the header. |
+| `.k-i-arrow-chevron-up,.k-svg-i-arrow-chevron-up` | `aria-hidden=true` | Excludes the collapse icon from the screen reader output. |
+| `.k-i-arrow-chevron-down,.k-svg-i-arrow-chevron-down` | `aria-hidden=true` | Excludes the expand icon from the screen reader output. |
+
+#### Grid Data Table
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid-values>.k-pivotgrid-table` | `role=none/presentation` | Negates the default semantic role of the `` element. |
+| `.k-pivotgrid-values>.k-pivotgrid-table>tbody` | `role=none/presentation` | The contained rows are associated with their headers through alternative mechanics. |
+| `.k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row` | `role=none/presentation` | The rows are associated with their headers through alternative mechanics. |
+| `.k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row>td` | `role=gridcell` | Required as the owner `` element has its semantic role removed. |
+| | `id` | Unique and deterministic identifier, used to associate the data cell with respective row header cells. |
+| | `aria-describedby=[IDs of corresponding column header cells]` | Used to associate the data cells with the respective column header cells. |
+
+### Configurator
+
+The element with `role="dialog"` - includes the configurator header, content (fields, columns, rows, and values sub-sections), and actions (cancel and apply buttons) sections.
+
+#### Configurator Button Element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid-configurator-button` | `aria-hidden=true` | Hides the element from the assistive technologies, as it is not focusable, and there are designated shortcuts for opening and closing the configurator. |
+
+#### Configurator Wrapping Element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid-configurator` | `role=dialog` | The role specifies the element is a dialog. |
+| | `aria-hidden=true/false` | Specifies whether the configurator is visible if it is still in the DOM when closed. |
+| | `aria-labelledby=.k-pivotgrid-configurator-header-text id` | Associates the configurator wrapper with its internal header element. |
+
+#### Configurator Internal Elements
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-pivotgrid-configurator-header-text` | `id` | Unique and deterministic identifier, used to associate the header text with elements that need to use it as a label. |
+| `.k-pivotgrid-configurator-content .k-label` | `id` | Unique and deterministic identifier, used to associate the label text with elements that need to use it as a label. |
+| `.k-pivotgrid-configurator-actions .k-button` | `aria-disabled=true/false` | Announces the disabled state of the configurator Cancel and Apply buttons. |
+| `.k-fields-list-wrapper .k-treeview` | `aria-labelledby` | Associates the fields chooser TreeView with the Fields section and Configurator header texts by setting the `aria-labelledby` attribute to the `id` of the `.k-pivotgrid-configurator-header-text` element, followed by a space and the `id` of the Fields label element |
+| `.k-pivotgrid-configurator-content .k-chip-list` | `aria-labelledby` | Associates the rows, columns and measures Chiplists with their respective section label and Configurator header texts by setting the `aria-labelledby` attribute to the `id` of the `.k-pivotgrid-configurator-header-text` element followed by a space and the `id` of the Rows/Columns/Values label element |
+
+## Resources
+
+[WAI-ARIA specification for grid](https://www.w3.org/TR/wai-aria-1.2/#grid)
+
+[WAI-ARIA specification for dialog](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)
## Section 508
-The PivotGridV2 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).
+The PivotGridV2 is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The PivotGridV2 has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The PivotGridV2 has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
-## WCAG 2.2
+To test the PivotGridV2 component, refer to the [PivotGridV2 Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/pivotgrid).
-The PivotGridV2 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/).
+## Keyboard Navigation
-For more information, refer to:
-* [WCAG 2.2 support by the PivotGridV2 (demo)](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/keyboard-navigation)
-* [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the PivotGridV2 keyboard navigation works, refer to the [PivotGridV2 Keyboard Navigation]({%slug keynav_aspnetcore_pivotgridv2%}) article.
## See Also
-* [WCAG 2.2 support by the PivotGridV2 (demo)](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/keyboard-navigation)
-* [Keyboard Navigation by the PivotGridV2]({% slug keynav_aspnetcore_pivotgridv2 %})
+* [Keyboard Navigation by the PivotGridV2 for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/keyboard-navigation)
+* [Keyboard Navigation by the PivotGridV2 for {{ site.framework }}]({% slug keynav_aspnetcore_pivotgridv2 %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/propertygrid/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/propertygrid/accessibility/overview.md
index fe61c581223..6595dbfad10 100644
--- a/docs-aspnet/html-helpers/data-management/propertygrid/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/data-management/propertygrid/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: PropertyGrid Documentation | PropertyGrid Accessibility
description: "Get started with the {{ site.product_short }} PropertyGrid by Telerik UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_propertygrid
position: 1
@@ -20,14 +20,14 @@ The component follows the WAI-ARIA Authoring Practices for implementing the keyb
## Section 508
-The PropertyGrid is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %}#section-508).
+The PropertyGrid is compliant with the [Section 508 requirements](https://www.section508.gov/). For more information, see section [Legal and Technical Compliance]({%slug overview_accessibility%}#legal-and-technical-compliance).
## WCAG 2.2
-The PropertyGrid supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.2](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.2 compliance in {{ site.product_short }}]({% slug overview_accessibility %}#wcag-22).
+The PropertyGrid supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/). For more information, refer to the [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#web-content-accessibility-guidelines).
## See Also
-* [Keyboard Navigation by the PropertyGrid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/propertygrid/keyboard-navigation)
+* [Keyboard Navigation by the PropertyGrid for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/propertygrid/keyboard-navigation)
* [Keyboard Navigation by the {{ site.product_short }} PropertyGrid]({% slug keynav_aspnetcore_propertygrid %})
-* [Accessibility Compliance in {{ site.product }}]({% slug compliance_accessibility %})
+* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
diff --git a/docs-aspnet/html-helpers/data-management/spreadsheet/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/spreadsheet/accessibility/overview.md
new file mode 100644
index 00000000000..3e3184060ab
--- /dev/null
+++ b/docs-aspnet/html-helpers/data-management/spreadsheet/accessibility/overview.md
@@ -0,0 +1,151 @@
+---
+title: Overview
+page_title: Spreadsheet Documentation | Spreadsheet Accessibility
+description: "Get started with the {{ site.product }} Spreadsheet and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+slug: accessibility_spreadsheet_overview
+position: 1
+---
+
+# Spreadsheet Accessibility
+
+Out of the box, the {{ site.product }} Spreadsheet provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+The Spreadsheet 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.
+
+## WAI-ARIA
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The Spreadsheet is a composite component that is used to render spreadsheet data and provide the proper means for its editing. It consists of the following structural elements:
+
+* Quick access elements - Undo and Redo buttons
+* Menu
+* ToolBars
+* Name editor
+* Formula input
+* Sheet area
+* Sheets bar Add Button
+* Sheets bar Menu Button
+* Sheets bar TabStrip
+
+### SpreadSheet Wrapping Element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet` | `role=application` | Indicates the Spreadsheets' role as an application. |
+
+### Quick access elements
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet-quick-access-toolbar>.k-button` | `role=button` | The two quick access elements are buttons. |
+| | `aria-label` or `title` | The two quick access elements must have labels as they do not have text content. |
+
+### ToolBar Menu
+
+The Menu used for selecting the active ToolBar must implement the Menu specification.
+
+[Menu accessibility specification]({%slug accessibility_aspnetcore_menu%})
+
+### ToolBars
+
+All ToolBars must implement the ToolBar specification. Apart from that, they also need to be labeled as per their purpose.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet-toolbar` | `aria-label` or `title` | Each ToolBar must have a label specifying its purpose. |
+
+[ToolBar accessibility specification]({% slug accessibility_toolbar_overview %})
+
+### Name editor
+
+The Name editor must implement the spec for a ComboBox component.
+
+[ComboBox accessibility specification]({% slug accessibility_aspnetcore_combobox %})
+
+### Formula input
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet-formula-input` | `aria-haspopup=menu` | Specifies that the formula input opens a popup. |
+| | `aria-controls=.k-spreadsheet-formula-list id` | Points to the formulas list with role `menu`. Signifies that the formula input element controls the popup. |
+| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
+| | `title` | The Formula input of the Spreadsheet must have a title specifying its purpose. |
+| | `role=combobox` | The focusable element of the component must have role `combobox` (an input with popup). |
+
+### Formula list
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet-formula-list` | `id` | Unique and deterministic id linked to the `aria-controls` attribute of the corresponding formula input. |
+| `.k-spreadsheet-formula-list` | `role=menu` | Announces the `menu` role of the popup. |
+| `.k-list-item` | `role=menuitem` | Announces the `menuitem` role of the popup items. |
+
+### Sheet area
+
+The Sheet area must implement the spec for a Grid component. The column header cells are header cells are the members of the `.k-spreadsheet-column-header` element. The row header cells are the members of the `.k-spreadsheet-row-header` element.
+
+[Grid accessibility specification]({% slug accessibility_aspnetcore_grid %})
+
+### Add new sheet button
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet-sheet-add:not(button)` | `role=button` | The add new sheet element is a button. |
+| `.k-spreadsheet-sheet-add` | `aria-label` or `title` | The add new sheet element must have a label as it does not have text content. |
+| `.k-spreadsheet-sheet-add` | `aria-controls=.k-tabstrip-items id` | Points to the `ul` element of the TabStrip that contains all tabs. Signifies that the `button` element controls the `tablist` one. |
+
+### Menu sheet button
+
+The Menu sheet button must implement the spec for a DropDownButton component.
+
+[DropDownButton accessibility specification]({% slug accessibility_aspnetcore_dropdownbutton %})
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-spreadsheet-sheets-menu` | `aria-controls=.k-tabstrip-items id` | Points to the `ul` element of the TabStrip that contains all tabs. Signifies that the `button` element controls the `tablist` one. |
+
+### Sheets bar
+
+The Sheets bar of the Spreadsheet must implement the TabStrip specification.
+
+[TabStrip accessibility specification]({% slug accessibility_aspnetcore_tabstrip %})
+
+### Tab Menu button
+
+The Menu button is each TabStrip tab must implement the DropDownButton specification.
+
+[DropDownButton accessibility specification]({% slug accessibility_aspnetcore_dropdownbutton %})
+
+## Section 508
+
+The Spreadsheet is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The Spreadsheet has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The Spreadsheet has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the Spreadsheet component, refer to the [Spreadsheet Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/spreadsheet).
+
+## Keyboard Navigation
+
+For details on how the Spreadsheet keyboard navigation works, refer to the [Spreadsheet Keyboard Navigation Demo](https://demos.telerik.com/{{ site.platform }}/spreadsheet/keyboard-navigation).
+
+## See Also
+
+* [Keyboard Navigation by the Spreadsheet for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/spreadsheet/keyboard-navigation)
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/taskboard/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/taskboard/accessibility/overview.md
index 98948ab619a..5b56fb87b28 100644
--- a/docs-aspnet/html-helpers/data-management/taskboard/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/data-management/taskboard/accessibility/overview.md
@@ -1,33 +1,82 @@
----
-title: Overview
-page_title: Overview
-description: "Get started with the Telerik UI for {{ site.framework }} TaskBoard and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
-slug: htmlhelpers_taskboard_aspnetcore_accessibility
-position: 1
----
-
-# TaskBoard Accessibility
-
-The TaskBoard is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
-
-For more information, refer to:
-* [Keyboard navigation by the {{ site.product_short }} TaskBoard]({% slug htmlhelpers_taskboard_aspnetcore_keynav %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
-
-## WAI-ARIA
-
-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_short }}]({% slug overview_accessibility %}#wai-aria).
-
-## Section 508
-
-The TaskBoard is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %}#section-508)
-
-## WCAG 2.2
-
-The TaskBoard 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
-
-## See Also
-
-* [Keyboard Navigation in the TaskBoard (Demo)](https://demos.telerik.com/{{ site.platform }}/taskboard/keyboard-navigation)
-* [Keyboard Navigation in the TaskBoard]({% slug htmlhelpers_taskboard_aspnetcore_keynav %})
-* [Accessibility Compliance in {{ site.product }}]({% slug compliance_accessibility %})
+---
+title: Overview
+page_title: TaskBoard Documentation | TaskBoard Accessibility
+description: "Get started with the {{ site.product }} TaskBoard and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+slug: htmlhelpers_taskboard_aspnetcore_accessibility
+position: 1
+---
+
+# TaskBoard Accessibility
+
+Out of the box, the {{ site.product }} TaskBoard provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+The TaskBoard 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.
+
+## WAI-ARIA
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The TaskBoard component is a composite component that contains:
+
+* `ToolBar` - on top of the component
+* `Columns` - it represents a list of tasks
+
+Each Column contains:
+
+* `Buttons` - action buttons present on the top of each column
+* `Tasks` - a collection of tasks (cards/list items)
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-taskboard` | `role=application` | The TaskBoard has `role=application` as its inner navigation requires the use of arrows. |
+| `.k-taskboard-column` | `role=list` | The TaskBoard Column is a collection of list items. |
+| | `tabindex=0` | The TaskBoard Column must be focusable. |
+| | `aria-labelledby=.k-taskboard-column-header id` | The TaskBoard Column must be labelled by its header. |
+| `.k-taskboard-column-action-button` | `role=button` or `nodeName=button` | The TaskBoard Column actions are buttons. |
+| | `aria-label` or `title` | Each action must have an accessible name as they are represented by icons and no text is available in their contents. |
+| `.k-taskboard-card` | `role=listitem` | The TaskBoard Tasks (cards) are list items. |
+| | `tabindex=0` | The TaskBoard Card must be focusable. |
+| `.k-taskboard-card-menu-button` | `role=button` or `nodeName=button` | The TaskBoard card menu element must be a button. |
+| | `aria-label` or `title` | The menu button must have an accessible name as it is represented by an icon and no text is available in its contents. |
+| `.k-taskboard-pane-header-actions>.k-button` | `role=button` or `nodeName=button` | The TaskBoard edit form close element must be a button. |
+| | `aria-label` or `title` | The edit form close button must have an accessible name as it is represented by an icon and no text is available in its contents. |
+| `.k-taskboard-edit-pane .k-form` | `role=form` | The edit Form needs the appropriate role to be assigned to it. |
+| | `aria-labelledby=.k-taskboard-pane-header-text id` | The TaskBoard edit form must be labeled by the header text of the pane it is located at. |
+
+## Resources
+
+[WAI-ARIA spec: Role List](https://www.w3.org/TR/wai-aria-1.2/#listt)
+
+## Section 508
+
+The TaskBoard is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The TaskBoard has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The TaskBoard has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the TaskBoard component, refer to the [TaskBoard Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/taskboard).
+
+## Keyboard Navigation
+
+For details on how the TaskBoard keyboard navigation works, refer to the [TaskBoard Keyboard Navigation]({%slug htmlhelpers_taskboard_aspnetcore_keynav%}) article.
+
+## See Also
+
+* [Keyboard Navigation by the TaskBoard for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/taskboard/keyboard-navigation)
+* [Keyboard Navigation by the TaskBoard for {{ site.framework }}]({% slug htmlhelpers_taskboard_aspnetcore_keynav %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/data-management/treelist/accessibility/overview.md b/docs-aspnet/html-helpers/data-management/treelist/accessibility/overview.md
index b7d92501467..6e932e544ff 100644
--- a/docs-aspnet/html-helpers/data-management/treelist/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/data-management/treelist/accessibility/overview.md
@@ -1,38 +1,88 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the Telerik UI TreeList component for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: TreeList Documentation | TreeList Accessibility
+description: "Get started with the {{ site.product }} TreeList and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: htmlhelpers_treelist_aspnetcore_accessibility
position: 1
---
# TreeList Accessibility
-The TreeList is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} TreeList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the {{ site.product_short }} TreeList]({% slug htmlhelpers_treelist_aspnetcore_keynav %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The TreeList 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.
## WAI-ARIA
-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_short }}]({% slug overview_accessibility %}#wai-aria).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The TreeList is a composite component that consists of two logically separated structural elements:
+
+* Toolbar (`role=toolbar`)
+* Tree Grid (`role=treegrid`)
+
+### TreeList Toolbar
+
+TreeList Toolbar follows the specification of the ToolBar component.
+
+[ToolBar accessibility specification]({% slug accessibility_toolbar_overview %})
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-toolbar` | `role=toolbar` | The toolbar is a collection of command buttons and inputs. |
+| | `aria-label` | Clarifies the purpose of the toolbar. |
+| | `aria-controls=.k-grid-aria-root id` | Points to the `id` of the element with `role=treegrid`. |
+
+### Tree Grid
+
+The element with `role=treegrid` must not include the ToolBar element as it does not belong to the `role=treegrid` element itself. It implements the ARIA specification for the Grid component with some exceptions listed below.
+
+[Grid accessibility specification]({% slug accessibility_aspnetcore_grid %})
+
+In the {{ site.product }} TreeList, the `role=treegrid` is assigned to the `` in the `k-grid-content` element.
+
+The below table lists the ARIA requirements for the TreeList which are not present in the Grid specification:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-grid-content>table` | `role=treegrid` | The role specifies the element is a TreeGrid. |
+| `.k-table-tbody .k-table-row` | `aria-expanded=true/false` | Set on the currently expanded row(s). |
+| `.k-table-tbody .k-i-caret-alt-down,.k-table-tbody .k-i-caret-alt-right,.k-table-tbody .k-svg-i-caret-alt-down,.k-table-tbody .k-svg-i-caret-alt-right` | `aria-hidden=true` | Removes the expand/collapse icon from the accessibility tree. |
+
+## Resources
+
+[WAI-ARIA specification for tree grid](https://www.w3.org/TR/wai-aria-1.2/#treegrid)
## Section 508
-The TreeList is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug overview_accessibility %}#section-508).
+The TreeList is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The TreeList has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The TreeList has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
-## WCAG 2.2
+To test the TreeList component, refer to the [TreeList Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/treelist).
-The TreeList 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/).
+## Keyboard Navigation
-For more information, refer to:
-* [WCAG 2.2 support by the TreeList (demo)](https://demos.telerik.com/{{ site.platform }}/treelist/index)
-* [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the TreeList keyboard navigation works, refer to the [TreeList Keyboard Navigation]({%slug htmlhelpers_treelist_aspnetcore_keynav%}) article.
## See Also
-* [WCAG 2.2 Support by the TreeList for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/treelist/index)
* [Keyboard Navigation by the TreeList for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/treelist/keyboard-navigation)
* [Keyboard Navigation by the TreeList for {{ site.framework }}]({% slug htmlhelpers_treelist_aspnetcore_keynav %})
-* [Accessibility Compliance in {{ site.product }}]({% slug compliance_accessibility %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/accessibility/overview.md b/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/accessibility/overview.md
index d5a1805671e..de130e201e5 100644
--- a/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: OrgChart Documentation | OrgChart Accessibility
description: "Get started with the {{ site.product }} OrgChart and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_orgchart
position: 1
@@ -8,26 +8,77 @@ position: 1
# OrgChart Accessibility
-The OrgChart is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} OrgChart provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI OrgChart]({% slug keynav_aspnetcore_orgchart %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The OrgChart 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The OrgChart component represents a tree structure and allows editing of its items.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-orgchart-level-1` | `role=tree` | The root `div` element of the OrgChart. Contains all its top level items. |
+| | `aria-orientation=horizontal` | Specifies the orientation of the OrgChart tree. |
+| `.k-orgchart-group:not(.k-orgchart-level-1)` | `role=group` | The element that wraps child nodes. |
+| `.k-orgchart-card` | `role=treeitem` | The card (node) representing the treeitem in the hierarchical structure. |
+| | `aria-level` | Announces the level of the tree node item. The value of level is number-based(>=1). |
+| | `aria-keyshortcuts=Enter` | Announces the that the edit menu of the OrgChart can be activated via the `Enter` key. |
+| `.k-orgchart-card[aria-owns]` | `aria-expanded=true/false` | Present when a node has subitems. Announces the expanded state of the node. It is true when expanded, and false when collapsed. |
+| `.k-orgchart-card[aria-expanded]` | `aria-owns` | Present when a node has subitems. The value of the attribute is the id of the group element containing the current node children |
+| `.k-orgchart-card.k-focus` | `aria-selected=true` | Announces the selected (focused) item in the OrgChart. |
+| `.k-orgchart-card:not(.k-focus)` | `aria-selected=false` | Announces the not selected (focused) items in the OrgChart. |
+| `.k-avatar-image img` | `alt` | Describes the avatar image of an item. Normally contains the name of the person/function represented by the item. |
+| `.k-orgchart-card-menu` | `role=button` | Specifies the menu icon of the item is a button. |
+| | `aria-label=Edit menu` | Provides an accessible name for the edit button, as it does not contain text. |
+| | `tabindex=-1` | The Edit menu button must not be part of the page tab sequence. |
+| `.k-orgchart-button` | `role=button` or `nodeName=button` | Specifies the expand/collapse element of the OrgChart as a button. |
+| | `aria-label` | Provides an accessible name for the expand/collapse button, as it does not contain text. |
+| | `tabindex=-1` | The expand/collapse button must not be part of the page tab sequence. |
+
+
+The edit popup of the OrgChart must implement the specification of the Window component with a Form component in it.
+
+[Window accessibility specification]({% slug accessibility_aspnetcore_window %})
+
+[Form accessibility specification]({% slug htmlhelpers_form_aspnetcore_accessibility %})
+
+## Resources
+
+[ARIA practices File Directory Treeview Example](https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-1/treeview-1a.html)
## Section 508
-The OrgChart 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).
+The OrgChart is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The OrgChart has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The OrgChart has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the OrgChart component, refer to the [OrgChart Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/orgchart).
-## WCAG 2.2
+## Keyboard Navigation
-The OrgChart 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the OrgChart keyboard navigation works, refer to the [OrgChart Keyboard Navigation]({%slug keynav_aspnetcore_orgchart%}) article.
## See Also
-* [Keyboard Navigation by the OrgChart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/orgchart/keyboard-navigation)
-* [Keyboard Navigation by the OrgChart HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_orgchart %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the OrgChart for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/orgchart/keyboard-navigation)
+* [Keyboard Navigation by the OrgChart for {{ site.framework }}]({% slug keynav_aspnetcore_orgchart %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/binding/razor-page.md b/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/binding/razor-page.md
new file mode 100644
index 00000000000..75b4921231e
--- /dev/null
+++ b/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/binding/razor-page.md
@@ -0,0 +1,190 @@
+---
+title: Razor Pages
+page_title: Razor Pages
+description: "Learn how to use the Telerik UI OrgChart component for {{ site.framework }} in a Razor Pages application."
+slug: htmlhelpers_orgchart_razorpage_aspnetcore
+position: 4
+---
+
+# OrgChart in Razor Pages
+
+Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name).
+
+You can seamlessly integrate the Telerik UI OrgChart for {{ site.framework }} in Razor Pages applications.
+
+This article describes how to configure the OrgChart component in a Razor Pages scenario.
+
+## Getting Started
+
+To connect the OrgChart to a data set retrieved from a remote endpoint in a Razor Pages application, proceed with the following steps:
+
+1. Specify the Read request URL in the `DataSource` configuration. The URL must refer to the method name in the `PageModel`.
+
+ ```HtmlHelper_Index.cshtml
+ @page
+ @model IndexModel
+
+ @(Html.Kendo().OrgChart()
+ .Name("orgchart")
+ .DataSource(dataSource => dataSource
+ .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
+ .Model(m => {
+ m.Id(f => f.ID);
+ m.ParentId(f => f.ParentID);
+ m.Name(f => f.Name);
+ m.Title(f => f.Title);
+ m.Avatar(f => f.Avatar);
+ m.Expanded(f=>f.Expanded);
+ })
+ )
+
+ ```
+ ```TagHelper_Index.cshtml
+ @page
+ @model IndexModel
+ @addTagHelper *, Kendo.Mvc
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+1. Add an `AntiForgeryToken` at the top of the page.
+
+ ```
+ @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+ @Html.AntiForgeryToken()
+ ```
+
+1. Send the `AntiForgeryToken` with the Read request.
+
+ ```
+
+ ```
+
+ Additional parameters can also be supplied.
+
+ ```
+
+ ```
+
+1. Within the `cshtml.cs` file, add a handler method for the Read data operation.
+
+ ```tab-Index.cshtml.cs
+ public static IList employees;
+
+ public void OnGet(string culture)
+ {
+ if (!String.IsNullOrEmpty(culture))
+ {
+ CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo(culture);
+ }
+
+ if (employees == null)
+ {
+ employees = GetData();
+ }
+ }
+
+ public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request, int? id)
+ {
+ return new JsonResult(employees.ToDataSourceResult(request));
+ }
+
+ private List GetData()
+ {
+ var source = new List();
+ var path = "https://demos.telerik.com/aspnet-core/shared/web/treelist/people/";
+
+ source.Add(new OrgChartEmployeeViewModel() { ID = 1, Name = "Gevin Bell", Title = "CEO", Expanded = true, Avatar = path +"1.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 2, Name = "Clevey Thrustfield", Title = "COO", Expanded = true, ParentID = 1, Avatar = path +"2.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 3, Name = "Carol Baker", Title = "CFO", Expanded = false, ParentID = 1, Avatar = path +"3.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 4, Name = "Kendra Howell", Title = "CMO", Expanded = false, ParentID = 1, Avatar = path +"4.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 5, Name = "Sean Rusell", Title = "Financial Manager", Expanded = true, ParentID = 3, Avatar = path +"5.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 6, Name = "Steven North", Title = "Senior Manager", Expanded = false, ParentID = 3, Avatar = path +"6.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 7, Name = "Michelle Hudson", Title = "Operations Manager", Expanded = true, ParentID = 2, Avatar = path +"7.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 8, Name = "Andrew Berry", Title = "Team Lead", ParentID = 5, Avatar = path +"8.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 9, Name = "Jake Miller", Title = "Junior Accountant", ParentID = 5, Avatar = path +"9.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 10, Name = "Austin Piper", Title = "Accountant", ParentID = 5, Avatar = path +"10.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 11, Name = "Dilyana Newman", Title = "Accountant", ParentID = 5, Avatar = path +"11.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 12, Name = "Eva Andrews", Title = "Team Lead", ParentID = 6, Avatar = path +"12.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 13, Name = "Kaya Nilsen", Title = "Financial Specialist", ParentID = 6, Avatar = path +"13.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 14, Name = "Elena Austin", Title = "Team Lead", ParentID = 4, Avatar = path +"14.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 15, Name = "Lora Samuels", Title = "Lawyer", ParentID = 4, Avatar = path +"15.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 16, Name = "Lillian Carr", Title = "Operator", ParentID = 7, Avatar = path +"17.jpg" });
+ source.Add(new OrgChartEmployeeViewModel() { ID = 17, Name = "David Henderson", Title = "Team Lead", ParentID = 7, Avatar = path +"16.jpg" });
+
+ return source;
+ }
+ ```
+ ```tab-Model
+ public class OrgChartEmployeeViewModel
+ {
+ public int ID
+ {
+ get; set;
+ }
+ public int? ParentID
+ {
+ get; set;
+ }
+ public string Name
+ {
+ get; set;
+ }
+ public string Title
+ {
+ get; set;
+ }
+ public string Group
+ {
+ get; set;
+ }
+ public bool? Expanded
+ {
+ get; set;
+ }
+ public bool hasChildren
+ {
+ get; set;
+ }
+ public string Avatar
+ {
+ get; set;
+ }
+ }
+ ```
+
+## See Also
+
+* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
+* [Client-Side API of the OrgChart](https://docs.telerik.com/kendo-ui/api/javascript/ui/orgchart)
+* [Server-Side HtmlHelper API of the OrgChart](/api/orgchart)
+* [Server-Side TagHelper API of the OrgChart](/api/taghelpers/orgchart)
+* [Knowledge Base Section](/knowledge-base)
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/overview.md b/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/overview.md
index b542ccc396b..c8610021f19 100644
--- a/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/overview.md
+++ b/docs-aspnet/html-helpers/diagrams-and-maps/orgchart/overview.md
@@ -138,3 +138,6 @@ The following example demonstrates the basic configuration of the OrgChart compo
* [Using the API of the OrgChart for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/orgchart/api)
* [Knowledge Base Section](/knowledge-base)
+{% if site.core %}
+* [Razor Pages binding]({% slug htmlhelpers_orgchart_razorpage_aspnetcore %})
+{% endif %}
diff --git a/docs-aspnet/html-helpers/editors/autocomplete/accessibility/overview.md b/docs-aspnet/html-helpers/editors/autocomplete/accessibility/overview.md
index 206db3baa6f..a0445359bbc 100644
--- a/docs-aspnet/html-helpers/editors/autocomplete/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/autocomplete/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: "{{ site.product }} AutoComplete Documentation - AutoComplete Accessibility"
+page_title: AutoComplete Documentation | AutoComplete Accessibility
description: "Get started with the {{ site.product }} AutoComplete and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_autocomplete
position: 1
@@ -8,32 +8,20 @@ position: 1
# AutoComplete Accessibility
-The AutoComplete is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
-
> 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 .**
>
> 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.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI AutoComplete]({% slug keynav_aspnetcore_autocomplete %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
-
-
-
-
-Out of the box, the Kendo UI for jQuery AutoComplete provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-
+Out of the box, the {{ site.product }} AutoComplete provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The AutoComplete is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The AutoComplete 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.
## WAI-ARIA
-
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
### AutoComplete Wrapping Element
-
The following table summarizes the selectors and attributes supported by the AutoComplete wrapper element:
| Selector | Attribute | Usage |
@@ -55,7 +43,6 @@ The following table summarizes the selectors and attributes supported by the Aut
### Popup Listbox
-
The popup element of the AutoComplete has to implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the AutoComplete:
| Selector | Attribute | Usage |
@@ -80,19 +67,16 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
## Section 508
-
-The AutoComplete is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
+The AutoComplete is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
## Testing
-
The AutoComplete has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
### Screen Readers
-
The AutoComplete has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
@@ -101,14 +85,16 @@ The AutoComplete has been tested with the following screen readers and browsers
| Chrome | JAWS |
| Microsoft Edge | JAWS |
+### Test Example
+To test the AutoComplete component, refer to the [AutoComplete Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/autocomplete).
-### Automated Testing
+## Keyboard Navigation
-The AutoComplete has been tested with [axe-core](https://github.com/dequelabs/axe-core).
+For details on how the AutoComplete keyboard navigation works, refer to the [AutoComplete Keyboard Navigation]({% slug keynav_aspnetcore_autocomplete %}) article.
## See Also
-* [Keyboard Navigation by the AutoComplete HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/autocomplete/keyboard-navigation)
-* [Keyboard Navigation by the AutoComplete HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_autocomplete %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
\ No newline at end of file
+* [Keyboard Navigation by the AutoComplete for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/autocomplete/keyboard-navigation)
+* [Keyboard Navigation by the AutoComplete for {{ site.framework }}]({% slug keynav_aspnetcore_autocomplete %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/autocomplete/binding/razor-pages.md b/docs-aspnet/html-helpers/editors/autocomplete/binding/razor-pages.md
index e53fd2b5725..613bdc403d9 100644
--- a/docs-aspnet/html-helpers/editors/autocomplete/binding/razor-pages.md
+++ b/docs-aspnet/html-helpers/editors/autocomplete/binding/razor-pages.md
@@ -137,6 +137,54 @@ You can also include additional parameters if needed:
}
```
+## Binding the AutoComplete to a PageModel Property
+
+To bind the AutoComplete to a property from the `PageModel`, follow the next steps:
+
+1. Add a property to the `PageModel` that must bind to the AutoComplete.
+
+ ```Index.cshtml.cs
+ public class IndexModel : PageModel
+ {
+ [BindProperty]
+ public string Country { get; set; }
+
+ public void OnGet()
+ {
+ Country = "Italy";
+ }
+ }
+ ```
+1. Declare the `PageModel` at the top of the page.
+
+ ```C#
+ @page
+ @model IndexModel
+ ```
+
+1. Bind the AutoComplete to the property using the `AutoCompleteFor()` configuration.
+
+ ```HtmlHelper_Index.cshtml
+ @page
+ @model IndexModel
+
+ @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+ @Html.AntiForgeryToken()
+
+ @(Html.Kendo().AutoCompleteFor(m => m.Country))
+ ```
+ ```TagHelper_Index.cshtml
+ @page
+ @model IndexModel
+
+ @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+ @Html.AntiForgeryToken()
+ @addTagHelper *, Kendo.Mvc
+
+
+
+ ```
+
## See Also
* [Razor Pages Support]({% slug razor_pages_integration_aspnetmvc6_aspnetmvc %})
diff --git a/docs-aspnet/html-helpers/editors/captcha/accessibility/overview.md b/docs-aspnet/html-helpers/editors/captcha/accessibility/overview.md
index 772c3840984..483a9f8a95d 100644
--- a/docs-aspnet/html-helpers/editors/captcha/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/captcha/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: Captcha Documentation | Captcha Accessibility
description: "Get started with the {{ site.product }} Captcha and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: htmlhelpers_captcha_accessibility
position: 1
@@ -8,29 +8,61 @@ position: 1
# Captcha Accessibility
-The Captcha is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} Captcha provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI Captcha]({% slug htmlhelpers_aspnetcore_keynav %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
-* [Audio Content]({% slug htmlhelpers_captcha_audio %})
+The Captcha 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+No `role` attribute is implemented as the HTML `input type="text"` element is sufficient for definining purpose of the component.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-captcha-image>img` | `alt` | The Captcha image must have an `alt` tag, so that the. |
+| `.k-captcha-image-controls>.k-button` | `role=button` or `nodeName=button` | The image control buttons must have an appropriate role. |
+| | `aria-label` or `title` | Each button must have an accessible name as they are all represented by icons and no text is available in their contents. |
+| `.k-captcha-input .k-input-inner` | `role=textbox` or `nodeName=input` | Describes the role of the component. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
+| | `aria-invalid=true` | Attribute is rendered only when the captcha is in form and announces the valid state of the component. |
+| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the textbox is disabled. |
+| `.k-captcha-input>input` | `type=hidden` | The hidden input holding the Captcha ID value so that the remote could validate the user input. |
+
+## Resources
+
+[WAI-ARIA specification for textbox](https://www.w3.org/TR/wai-aria-1.2/#textbox)
## Section 508
-The Captcha 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).
+The Captcha is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The Captcha has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The Captcha has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
-## WCAG 2.2
+### Test Example
-The Captcha 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+To test the Captcha component, refer to the [Captcha Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/captcha).
+## Keyboard Navigation
+For details on how the Captcha keyboard navigation works, refer to the [Captcha Keyboard Navigation]({%slug htmlhelpers_aspnetcore_keynav%}) article.
## See Also
-* [Keyboard Navigation by the Captcha HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/captcha/keyboard-navigation)
-* [Keyboard Navigation by the Captcha HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_aspnetcore_keynav %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the Captcha for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/captcha/keyboard-navigation)
+* [Keyboard Navigation by the Captcha for {{ site.framework }}]({% slug htmlhelpers_aspnetcore_keynav %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/checkbox/accessibility/overview.md b/docs-aspnet/html-helpers/editors/checkbox/accessibility/overview.md
new file mode 100644
index 00000000000..49e394dd7ed
--- /dev/null
+++ b/docs-aspnet/html-helpers/editors/checkbox/accessibility/overview.md
@@ -0,0 +1,59 @@
+---
+title: Overview
+page_title: CheckBox Documentation | CheckBox Accessibility
+description: "Get started with the {{ site.product }} CheckBox and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+slug: accessibility_checkbox_overview
+position: 1
+---
+
+# CheckBox Accessibility
+
+Out of the box, the {{ site.product }} CheckBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+The CheckBox 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.
+
+## WAI-ARIA
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-checkbox` | `role=checkbox` or `type=checkbox` | Announces the `checkbox` role of the element. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name to which it will be assigned. |
+| | `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. |
+| | `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 must only be present when a hint is set or when the checkbox value is invalid. |
+| | `aria-checked=true` or `checked=checked` | Announces the checked state of the CheckBox. |
+| | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the CheckBox is disabled. |
+| `.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. |
+
+## Resources
+
+[WAI-ARIA Authoring Practices: CheckBox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
+
+## Section 508
+
+The CheckBox is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The CheckBox has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The CheckBox has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+## Keyboard Navigation
+
+For details on how the CheckBox keyboard navigation works, refer to the [Accessibility Overview]({%slug overview_accessibility%}#keyboard-navigation) article.
+
+## See Also
+
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/checkboxgroup/accessibility/overview.md b/docs-aspnet/html-helpers/editors/checkboxgroup/accessibility/overview.md
index 12984187e22..a95277fb19e 100644
--- a/docs-aspnet/html-helpers/editors/checkboxgroup/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/checkboxgroup/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: CheckBoxGroup Documentation | CheckBoxGroup Accessibility
description: "Get started with the {{ site.product_short }} CheckBoxGroup by Telerik UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: htmlhelpers_accessibility_checkboxgroup_aspnetcore
position: 1
@@ -20,14 +20,14 @@ The component follows the WAI-ARIA Authoring Practices for implementing the keyb
## Section 508
-The CheckBoxGroup 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).
+The CheckBoxGroup is compliant with the [Section 508 requirements](https://www.section508.gov/). For more information, see section [Legal and Technical Compliance]({%slug overview_accessibility%}#legal-and-technical-compliance).
## WCAG 2.2
-The CheckBoxGroup 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+The CheckBoxGroup supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/). For more information, refer to the [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#web-content-accessibility-guidelines).
## See Also
-* [Keyboard Navigation by the CheckBoxGroup HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/checkboxgroup/keyboard-navigation)
-* [Keyboard Navigation by the CheckBoxGroup HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_checkboxgroup_keyboardnavigation_aspnetcore %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the CheckBoxGroup for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/checkboxgroup/keyboard-navigation)
+* [Keyboard Navigation by the CheckBoxGroup for {{ site.framework }}]({% slug htmlhelpers_checkboxgroup_keyboardnavigation_aspnetcore %})
+* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
diff --git a/docs-aspnet/html-helpers/editors/colorgradient/accessibility/overview.md b/docs-aspnet/html-helpers/editors/colorgradient/accessibility/overview.md
index 4c9924fbf8e..f9564af5073 100644
--- a/docs-aspnet/html-helpers/editors/colorgradient/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/colorgradient/accessibility/overview.md
@@ -1,38 +1,87 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the Telerik UI ColorGradient for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: ColorGradient Documentation | ColorGradient Accessibility
+description: "Get started with the {{ site.product }} ColorGradient and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: htmlhelpers_accessibility_colorgradient
position: 1
---
# ColorGradient Accessibility
-The ColorGradient is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} ColorGradient provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-{% if site.has_cta_panels == true %}
-{% include cta-panel-introduction.html %}
-{% endif %}
+The ColorGradient 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.
-For more information, refer to:
+## WAI-ARIA
-* [Keyboard navigation by the ColorGradient]({% slug keynav_colorgradient_aspnetcore %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-## WAI-ARIA
+### ColorGradient Wrapping Element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-colorgradient` | `role=textbox` | The focusable wrapper of the component must be considered a `textbox`. That signifies it has a value that could be submitted. |
+| | `aria-label` or `aria-labelledby` | The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component. |
+| | `aria-invalid=true` | Attribute is rendered only when the selected value in the component is not valid against the current validation rules. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-colorgradient.k-disabled` | `aria-disabled=true` | Attribute is rendered only when the ColorPalette is disabled. |
+
+### Drag handles
+
+All the `k-draghandle` elements implement the Slider specification.
+
+[Slider accessibility specification]({%slug accessibility_aspnetcore_slider%})
+
+Apart from that the HSV draghandle must also cover the following additional requirements:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-hsv-draghandle` | `aria-orientation=undefined` | The implicit orientation for the `role="slider"` must be removed. |
+| | `aria-label` | Must provide information about the purpose of the `slider` (for example: "Color well with two-dimensional slider for selecting saturation and lightness") and the currently selected color (for example: "X: 142, Y: 93"). |
+| | `aria-valuetext` | Must specify the values on both X and Y axis. |
+
+### NumericTextBoxes
+
+The Numeric inputs must implement the NumericTextBox specification.
-The ColorGradient 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).
+[NumericTextBox accessibility specification]({%slug accessibility_numerictextbox_aspnetcore%})
+
+Here is one additional requirement for those numerics as their visible labels have only a single letter as text:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-numerictextbox>.k-input-inner` | `aria-label` | Must provide information about the numeric input purpose - the name of the chanel it is aimed at (`red chanel`, `green chanel`, `blue chanel`, or `alpha chanel`). |
## Section 508
-The component 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).
+The ColorGradient is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The ColorGradient has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The ColorGradient has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
-## WCAG 2.2
+To test the ColorGradient component, refer to the [ColorGradient Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/colorgradient).
-The ColorGradient 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.2 compliance in {{ site.product }}]({% slug overview_accessibility %}#wcag-21).
+## Keyboard Navigation
+For details on how the ColorGradient keyboard navigation works, refer to the [ColorGradient Keyboard Navigation]({%slug keynav_colorgradient_aspnetcore%}) article.
## See Also
* [Keyboard Navigation by the ColorGradient for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/keyboard-navigation)
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+* [Keyboard Navigation by the ColorGradient for {{ site.framework }}]({% slug keynav_colorgradient_aspnetcore %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/colorpalette/accessibility/overview.md b/docs-aspnet/html-helpers/editors/colorpalette/accessibility/overview.md
index 4c4301ad3df..57404bd56f4 100644
--- a/docs-aspnet/html-helpers/editors/colorpalette/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/colorpalette/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: ColorPalette Documentation - ColorPalette Accessibility
+page_title: ColorPalette Documentation | ColorPalette Accessibility
description: "Get started with the {{ site.product }} ColorPalette and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnet_colorpalette_widget
position: 1
@@ -8,26 +8,57 @@ position: 1
# ColorPalette Accessibility
-The ColorPalette is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} ColorPalette provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the {{ site.product }} ColorPalette]({% slug keynav_colorpalette_aspnet %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The ColorPalette 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-colorpalette` | `role=grid` | The focusable wrapper of the component must announce its role as a `grid`. |
+| | `aria-label` or `aria-labelledby` | The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component. |
+| | `aria-activedescendant=.k-colorpalette-tile.k-focus id` | Points to the focused cell in the table. The focused cell is changed via keyboard navigation. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-colorpalette.k-disabled` | `aria-disabled=true` | Attribute is rendered only when the ColorPalette is disabled. |
+| `.k-colorpalette-table` | `role=none/presentation` | Negates the default role of the element, as it is wrapped within a `role="grid"` element. |
+| `.k-colorpalette-table>tbody>tr` | `role=row` | Required as the semantic role of its parent `` has been removed. |
+| `.k-colorpalette-tile` | `role=gridcell` | Required as the semantic role of its parent `` has been removed. |
+| | `aria-label` or `title` | The text representation of the color value for the current cell. |
+| `.k-colorpalette-tile.k-selected` | `aria-selected=true` | Present on the currently selected cell in the component. |
## Section 508
-The Colopalette 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).
+The ColorPalette is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The ColorPalette has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The ColorPalette has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the ColorPalette component, refer to the [ColorPalette Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/colorpalette).
-## WCAG 2.2
+## Keyboard Navigation
-The ColorPalette 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.2 compliance in {{ site.product }}]({% slug overview_accessibility %}#wcag-21)
+For details on how the ColorPalette keyboard navigation works, refer to the [ColorPalette Keyboard Navigation]({%slug keynav_colorpalette_aspnet%}) article.
## See Also
-* [Keyboard Navigation by the ColorPalette (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpalette/keyboard-navigation)
-* [Keyboard Navigation by the ColorPalette]({% slug keynav_colorpalette_aspnet %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+* [Keyboard Navigation by the ColorPalette for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpalette/keyboard-navigation)
+* [Keyboard Navigation by the ColorPalette for {{ site.framework }}]({% slug keynav_colorpalette_aspnet %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/colorpicker/accessibility/overview.md b/docs-aspnet/html-helpers/editors/colorpicker/accessibility/overview.md
new file mode 100644
index 00000000000..4bb3fc3eff4
--- /dev/null
+++ b/docs-aspnet/html-helpers/editors/colorpicker/accessibility/overview.md
@@ -0,0 +1,73 @@
+---
+title: Overview
+page_title: ColorPicker Documentation | ColorPicker Accessibility
+description: "Get started with the {{ site.product }} ColorPicker and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+slug: accessibility_colorpicker_overview
+position: 1
+---
+
+# ColorPicker Accessibility
+
+Out of the box, the {{ site.product }} ColorPicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+The ColorPicker 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.
+
+## WAI-ARIA
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The ColorPicker popup contains in itself [ColorGradient]({%slug htmlhelpers_overview_colorgradient%}), [ColorPalette]({%slug overview_colorpalettehelper_aspnetcore%}), a UI to switch between them, and a button to reset its value. All the containing elements must implement their own specification apart from the ColorGradient element where some changes are required.
+
+### ColorPicker Wrapping Element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-colorpicker` | `role=combobox` | The focusable element of the component must have role `combobox` (an input with popup). |
+| | `aria-label` or `aria-labelledby` | The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component. |
+| | `aria-haspopup=dialog` | Indicates the component has a Dialog Popup. |
+| | `aria-expanded` | Announces the state of the visibility of the popup. |
+| | `aria-controls=.k-colorpicker-popup id` | Points to the popup element. Signifies that the `combobox` element controls the `dialog`. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-invalid,.ng-invalid` | `aria-invalid=true` | Attribute is rendered only when the picker is in form and announces the valid state of the component. |
+| `.k-colorpicker.k-disabled` | `aria-disabled=true` | Attribute is rendered only when the picker is disabled. |
+
+### ColorGradient in the Popup
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-colorgradient` | `role=none/undefined` | The ColorGradient element must have its role removed. |
+| | `aria-label=undefined` | The ColorGradient element must have its `aria-label` attribute removed. |
+| | `tabindex=-1/undefined` | The ColorGradient must be removed from the page tab sequence. |
+
+## Section 508
+
+The ColorPicker is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The ColorPicker has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The ColorPicker has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the ColorPicker component, refer to the [ColorPicker Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/colorpicker).
+
+## Keyboard Navigation
+
+For details on how the ColorPicker keyboard navigation works, refer to the [ColorPicker Keyboard Navigation Demo](https://demos.telerik.com/{{ site.platform }}/colorpicker/keyboard-navigation).
+
+## See Also
+
+* [Keyboard Navigation by the ColorPicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/keyboard-navigation)
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/combobox/accessibility/overview.md b/docs-aspnet/html-helpers/editors/combobox/accessibility/overview.md
index 790d13c2b70..bf590079e47 100644
--- a/docs-aspnet/html-helpers/editors/combobox/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/combobox/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: ComboBox Documentation | ComboBox Accessibility
description: "Get started with the {{ site.product }} ComboBox and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_combobox
position: 1
@@ -8,30 +8,92 @@ position: 1
# ComboBox Accessibility
-The ComboBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} ComboBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI ComboBox]({% slug keynav_aspnetcore_combobox %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The ComboBox 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-> 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 .**
->
-> 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.
+### ComboBox Wrapping Element
+
+The following table summarizes the selectors and attributes supported by the ComboBox wrapper element:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-input-inner` | `role=combobox` | Announces the presence of a combobox as an inner element of the combobox used for filtering. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `aria-haspopup=listbox` | Indicates that the component has a listbox popup. |
+| | `aria-expanded=true/false` | Announces the visibility state of the popup. |
+| | `aria-controls=.k-list-ul id` | Points to the listbox element. Signifies that the `combobox` controls the `listbox` element. |
+| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item in the popup. The focused item is changed through keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
+| | `aria-autocomplete=list` | When filtering is enabled, the attribute is rendered and the value is set to `list`. |
+| | `aria-autocomplete=both` | When both the filtering and the suggest featutres are enabled, the attribute is rendered and the value is set to `both`. |
+| | `aria-autocomplete=inline` | When the suggest feature is enabled, the attribute is rendered and the value is set to `inline`. |
+| | `readonly=readonly` or `aria-readonly=true` | The attribute is rendered only when the ComboBox is read-only. |
+| | `aria-busy=true` | The attribute is rendered only when the ComboBox is loading data. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the ComboBox is in a form, and announces the valid state of the component. |
+| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the ComboBox is disabled. |
+| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `` element or must have the `role="button"` assigned. |
+| | `aria-label` | The button element must have discernible text. |
+| | `tabindex=-1` | The button element must not be focusable. |
+
+### Popup Listbox
+
+The popup element of the ComboBox has to implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the ComboBox:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-animation-container` | `role=region` | When the component container is appended to the `` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
+| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
+| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
+| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
+| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
+| | `id` | When grouped, the list items must have an `id` attribute specified, so that the `aria-owns` attribute of their group header elements (with `role=group`) point to that ids. |
+| | `aria-describedby` | When grouped, the list items must have an `aria-describedby` attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
+| `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
+| `.k-list-group-item` | `role=group` | The group elements in the popup list must be have `role=group`. |
+| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
+| `.k-list-group-item>.k-list-item-text` | `id` | The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
+
+## Resources
+
+[WAI-ARIA Authoring Practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)
+
+[WAI-ARIA Authoring Practices: Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html)
## Section 508
-The ComboBox 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).
+The ComboBox is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The ComboBox has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The ComboBox has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the ComboBox component, refer to the [ComboBox Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/combobox).
-## WCAG 2.2
+## Keyboard Navigation
-The ComboBox 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the ComboBox keyboard navigation works, refer to the [ComboBox Keyboard Navigation]({%slug keynav_aspnetcore_combobox%}) article.
## See Also
-* [Keyboard Navigation by the ComboBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/combobox/keyboard-navigation)
-* [Keyboard Navigation by the ComboBox HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_combobox %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the ComboBox for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/combobox/keyboard-navigation)
+* [Keyboard Navigation by the ComboBox for {{ site.framework }}]({% slug keynav_aspnetcore_combobox %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/dateinput/accessibility/overview.md b/docs-aspnet/html-helpers/editors/dateinput/accessibility/overview.md
index 8b039c81125..87c144477ac 100644
--- a/docs-aspnet/html-helpers/editors/dateinput/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/dateinput/accessibility/overview.md
@@ -1,36 +1,66 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the Telerik UI DateInput for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: DateInput Documentation | DateInput Accessibility
+description: "Get started with the {{ site.product }} DateInput and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: htmlhelpers_dateinput_aspnetcore_accessibility
position: 1
---
# DateInput Accessibility
-The DateInput is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} DateInput provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI DateInput]({% slug htmlhelpers_dateinput_aspnetcore_accessibility_keyboardnavigation %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
-
-{% if site.has_cta_panels == true %}
-{% include cta-panel-introduction.html %}
-{% endif %}
+The DateInput 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-input-inner` | `role=textbox` or `nodeName=input` | The element must either be an `` element or must have `role="button"` assigned. |
+| | `aria-label` | The button needs an accessible name to be assigned to it. |
+| | `tabindex=-1` | The button element must not be focusable. |
+
+### Calendar Popup
+
+The Calendar in the Popup element of the component must implement the specification for the Calendar component.
+
+[Calendar accessibility specification]({%slug htmlhelpers_accessibility_calendar_aspnetcore%})
+
+## Resources
+
+[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
+
+[ARIA practices Date Picker Dialog Example](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html)
## Section 508
-The DatePicker is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug compliance_accessibility %}).
+The DatePicker is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The DatePicker has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The DatePicker has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the DatePicker component, refer to the [DatePicker Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/datepicker).
-## WCAG 2.2
+## Keyboard Navigation
-The DatePicker 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.2 compliance in {{ site.product }}]({% slug compliance_accessibility %})
+For details on how the DatePicker keyboard navigation works, refer to the [DatePicker Keyboard Navigation]({%slug htmlhelpers_datepicker_aspnetcore_accessibility_keyboardnavigation%}) article.
## See Also
-* [Keyboard Navigation by the DatePicker HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/kendo-ui/datepicker/keyboard-navigation)
-* [Keyboard Navigation by the DatePicker HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_datepicker_aspnetcore_accessibility_keyboardnavigation %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the DatePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/datepicker/keyboard-navigation)
+* [Keyboard Navigation by the DatePicker for {{ site.framework }}]({% slug htmlhelpers_datepicker_aspnetcore_accessibility_keyboardnavigation %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/daterangepicker/accessibility/overview.md b/docs-aspnet/html-helpers/editors/daterangepicker/accessibility/overview.md
index 09514862e6e..cd8521f8672 100644
--- a/docs-aspnet/html-helpers/editors/daterangepicker/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/daterangepicker/accessibility/overview.md
@@ -1,34 +1,80 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the Telerik UI DateRangePicker for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: DateRangePicker Documentation | DateRangePicker Accessibility
+description: "Get started with the {{ site.product }} DateRangePicker and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_daterangepicker_aspnetcore
position: 1
---
# DateRangePicker Accessibility
-The DateRangePicker is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} DateRangePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI DateRangePicker]({% slug keynav_daterangepicker_aspnetcore %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The DateRangePicker 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-To customize the `aria-label` text of the currently focused cell in the calendar, use the [`ARIATemplate`](/api/kendo.mvc.ui.fluent/daterangepickerbuilder#ariatemplatesystemstring) configuration option.
+### Input elements
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-input-inner` | `role=combobox` | The input element must follow the `combobox` specification. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
+| | `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. |
+| | `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 must only be present when a hint is set or when the input is invalid. |
+| | `aria-haspopup=grid` | Indicates the component has a Calendar Popup that implements `role="grid"`. |
+| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
+| | `aria-controls=.k-calendar-container id` | Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
+| `.k-input-inner.k-focus` | `aria-activedescendant=.k-calendar-td.k-focus id` | Points to the focused item (date/month/year) in the Calendar Popup. Must only be present when the Popup is open. |
+| | `readonly=readonly` or `aria-readonly=true` | Attribute is rendered only when the DateRangePicker is readonly. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | Attribute is rendered only when the combobox is in form and announces the valid state of the component. |
+| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DateRangePicker is disabled. |
+
+### Calendars Popup
+
+The Calendars in the Popup element of the component must implement the specification for the MultiViewCalendar component.
+
+[Calendar accessibility specification]({%slug htmlhelpers_accessibility_calendar_aspnetcore%})
+
+## Resources
+
+[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
+
+[ARIA practices Date Picker Dialog Example](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html)
## Section 508
-The DateRangePicker 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).
+The DateRangePicker is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The DateRangePicker has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The DateRangePicker has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the DateRangePicker component, refer to the [DateRangePicker Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/daterangepicker).
-## WCAG 2.2
+## Keyboard Navigation
-The DateRangePicker 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.2 compliance in {{ site.product }}]({% slug overview_accessibility %}#wcag-21).
+For details on how the DateRangePicker keyboard navigation works, refer to the [DateRangePicker Keyboard Navigation]({%slug keynav_daterangepicker_aspnetcore%}) article.
## See Also
-* [Keyboard Navigation by the DateRangePicker HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/daterangepicker/index)
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+* [Keyboard Navigation by the DateRangePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/daterangepicker/keyboard-navigation)
+* [Keyboard Navigation by the DateRangePicker for {{ site.framework }}]({% slug keynav_daterangepicker_aspnetcore %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/datetimepicker/accessibility/overview.md b/docs-aspnet/html-helpers/editors/datetimepicker/accessibility/overview.md
index 0bc6bc1ae2c..9f0c94dcb0e 100644
--- a/docs-aspnet/html-helpers/editors/datetimepicker/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/datetimepicker/accessibility/overview.md
@@ -1,34 +1,97 @@
---
title: Overview
-page_title: Accessibility
-description: "Get started with the Telerik UI DateTimePicker for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+page_title: DateTimePicker Documentation | DateTimePicker Accessibility
+description: "Get started with the {{ site.product }} DateTimePicker and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_datetimepicker_aspnetcore
position: 1
---
# DateTimePicker Accessibility
-The DateTimePicker is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} DateTimePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI DateTimePicker]({% slug keynav_datetimepicker_aspnetcore %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The DateTimePicker 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-To customize the `aria-label` text of the currently focused cell in the calendar, use the [`ARIATemplate`](/api/kendo.mvc.ui.fluent/datetimepickerbuilder#ariatemplatesystemstring) configuration option.
+### Input element
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-input-inner` | `role=combobox` | The input element must follow the `combobox` specification. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
+| | `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. |
+| | `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 must only be present when a hint is set or when the input is invalid. |
+| | `aria-haspopup=dialog` | Indicates the component has a Dialog Popup. |
+| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
+| | `aria-controls=.k-calendar-container id` | Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
+| | `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. Must only be present when the Popup is open. |
+| | `readonly=readonly` or `aria-readonly=true` | Attribute is rendered only when the DateTimePicker is readonly. |
+| | `aria-invalid=true` | Attribute is rendered only when the DateTimePicker is in form and announces the valid state of the component. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DateTimePicker is disabled. |
+| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `` element or must have `role="button"` assigned. |
+| | `aria-label` | The button needs an accessible name to be assigned to it. |
+| | `tabindex=-1` | Button element must not be focusable. |
+
+### Calendar Popup
+
+The Calendar in the Popup element of the component must implement the specification for the Calendar component.
+
+[Calendar accessibility specification]({%slug htmlhelpers_accessibility_calendar_aspnetcore%})
+
+### Popup Date/Time View Chooser
+
+The Date/Time view chooser in the Popup element of the component must implement the specification for the ButtonGroup component.
+
+[ButtonGroup accessibility specification]({%slug accessibility_aspnetcore_buttongroup%})
+
+### TimePicker Popup
+
+Time Popup implementation must follow the specification for the TimePicker component.
+
+[TimePicker accessibility specification]({%slug accessibility_timepicker_aspnetcore%})
+
+## Resources
+
+[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
+
+[WAI ARIA specification for spinbutton](https://www.w3.org/TR/wai-aria-1.2/#spinbutton)
+
+[ARIA practices Date Picker Dialog Example](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html)
## Section 508
-The DateTimePicker 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).
+The DateTimePicker is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The DateTimePicker has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The DateTimePicker has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the DateTimePicker component, refer to the [DateTimePicker Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/datetimepicker).
-## WCAG 2.2
+## Keyboard Navigation
-The DateTimePicker 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.2 compliance in {{ site.product }}]({% slug overview_accessibility %}#wcag-21).
+For details on how the DateTimePicker keyboard navigation works, refer to the [DateTimePicker Keyboard Navigation]({%slug keynav_datetimepicker_aspnetcore%}) article.
## See Also
-* [Keyboard Navigation by the DateTimePicker HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/datetimepicker/index)
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+* [Keyboard Navigation by the DateTimePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/datetimepicker/keyboard-navigation)
+* [Keyboard Navigation by the DateTimePicker for {{ site.framework }}]({% slug keynav_datetimepicker_aspnetcore %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/dropdownlist/accessibility/overview.md b/docs-aspnet/html-helpers/editors/dropdownlist/accessibility/overview.md
index 35f86a24a56..23f9d194f49 100644
--- a/docs-aspnet/html-helpers/editors/dropdownlist/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/dropdownlist/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: DropDownList Documentation | DropDownList Accessibility
description: "Get started with the {{ site.product }} DropDownList and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_dropdownlist
position: 1
@@ -8,26 +8,102 @@ position: 1
# DropDownList Accessibility
-The DropDownList is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} DropDownList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI DropDownList]({% slug keynav_aspnetcore_dropdownlist %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The DropDownList 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+### DropDownList Wrapping Element
+
+The following table summarizes the selectors and attributes supported by the DropDownList wrapper element:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-dropdownlist:not(.k-views-dropdown)` | `role=combobox` | Announces the button drop-down element. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
+| | `aria-expanded=true/false` | Announces the visibility state of the popup. |
+| | `aria-controls=.k-list-ul id` | Points to the listbox element. Signifies that the `combobox` controls the `listbox` element. |
+| | `aria-describedby=.k-input-inner id` | Announces the selected value of the drop-down. |
+| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item in the popup. The focused item is changed through keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
+| | `aria-readonly=true` | The attribute is rendered only when the DropDownList is read-only. |
+| | `aria-busy=true` | The attribute is rendered only when the DropDownList is loading data. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the DropDownList is in a form, and announces the valid state of the component. |
+| `.k-dropdownlist.k-disabled` | `aria-disabled=true` | The attribute is rendered only when the DropDownList is disabled. |
+| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `` element or must have the `role="button"` assigned. |
+| | `aria-label` | The button requires an accessible name that will be assigned to it. |
+| | `tabindex=-1` | The button element must not be focusable. |
+
+### Popup
+
+The following table summarizes the selectors and attributes supported by the DropDownList popup:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-list-filter>.k-searchbox>.k-input-inner` | `role=searchbox` | Announces the search box capability of the input. |
+| | `aria-label` | Points to the search label. |
+| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item or to an item from the popup. |
+| | `aria-autocomplete=list` | Indicates the list-filtering capabilities of the selected items. |
+| | `aria-controls=.k-list-ul id` | Points to the popup element. Builds the relationship between the input and the popup. |
+| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
+| `.k-list-ul` | `aria-live=polite/off` | Assures the live updates on the selected value of the popup. |
+
+### Popup Listbox
+
+The listbox placed in the popup element of the DropDownList has to implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the DropDownList:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-animation-container` | `role=region` | When the component container is appended to the `` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
+| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
+| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
+| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
+| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
+| | `id` | When grouped, the list items must have an `id` attribute specified, so that the `aria-owns` attribute of their group header elements (with `role=group`) point to that ids. |
+| | `aria-describedby` | When grouped, the list items must have an `aria-describedby` attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
+| `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
+| `.k-list-group-item` | `role=group` | The group elements in the popup list must be have `role=group`. |
+| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
+| `.k-list-group-item>.k-list-item-text` | `id` | The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
+
+## Resources
+
+[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
## Section 508
-The DropDownList 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).
+The DropDownList is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The DropDownList has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The DropDownList has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the DropDownList component, refer to the [DropDownList Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/dropdownlist).
-## WCAG 2.2
+## Keyboard Navigation
-The DropDownList 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the DropDownList keyboard navigation works, refer to the [DropDownList Keyboard Navigation]({%slug keynav_aspnetcore_dropdownlist%}) article.
## See Also
-* [Keyboard Navigation by the DropDownList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownlist/keyboard-navigation)
-* [Keyboard Navigation by the DropDownList HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_dropdownlist %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the DropDownList for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownlist/keyboard-navigation)
+* [Keyboard Navigation by the DropDownList for {{ site.framework }}]({% slug keynav_aspnetcore_dropdownlist %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/dropdowntree/accessibility/overview.md b/docs-aspnet/html-helpers/editors/dropdowntree/accessibility/overview.md
index 9d89d2f4ea4..ea7182097a2 100644
--- a/docs-aspnet/html-helpers/editors/dropdowntree/accessibility/overview.md
+++ b/docs-aspnet/html-helpers/editors/dropdowntree/accessibility/overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-page_title: Accessibility
+page_title: DropDownTree Documentation | DropDownTree Accessibility
description: "Get started with the {{ site.product }} DropDownTree and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_aspnetcore_dropdowntree
position: 1
@@ -8,26 +8,87 @@ position: 1
# DropDownTree Accessibility
-The DropDownTree is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+Out of the box, the {{ site.product }} DropDownTree provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-For more information, refer to:
-* [Keyboard navigation by the Telerik UI DropDownTree]({% slug keynav_aspnetcore_dropdowntree %})
-* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+The DropDownTree 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.
## WAI-ARIA
-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).
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+### DropDownTree Wrapping Element
+
+The following table summarizes the selectors and attributes supported by the DropDownTree wrapper element:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-dropdowntree` | `role=combobox` | Announces the drop-down element of the button. |
+| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `aria-haspopup=tree` | Indicates the presence of a popup with a tree navigation. |
+| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
+| | `aria-controls=.k-treeview id` | Points to the `treeview` element. Signifies that the `combobox` element controls the `treeview` one. |
+| | `aria-activedescendent=.k-treeview-item id` | Points to the focused item in the popup. The focused item is changed with the keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
+| | `aria-readonly=true` | The attribute is rendered only when the drop-down is read-only. |
+| | `aria-autocomplete=list` | The attribute is rendered and the value is set to `list` when the filtering feature is enabled. |
+| | `aria-invalid=true` | The attribute is rendered only when the drop-down is in a form and announces the valid state of the component. |
+| | `aria-busy=true` | The attribute is rendered only when the drop-down is loading data. |
+| | `tabindex=0` | The element must be focusable. |
+| `.k-dropdowntree.k-disabled` | `aria-disabled=true` | The attribute is rendered only when the drop-down is disabled. |
+| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `` element or must have `role="button"` assigned. |
+| | `aria-label` | The button requires an accessible name that will be assigned to it. |
+| | `tabindex=-1` | The `button` element must not be focusable. |
+
+### Popup Listbox
+
+The popup element of the DropDownTree has to implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the DropDownTree:
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-animation-container` | `role=region` | When the component container is appended to the `` element of the document, it requires you to assign a `landmark` role to it. Otherwise, it must be appended to an element with an appropriate `landmark` role. |
+| | `aria-label` or `aria-labelledby` | Provides a label when the container has a `region` role assigned. |
+
+### TreeView
+
+The tree that is placed in the `popup` element of the component must implement the specification for a TreeView component.
+
+[TreeView accessibility specification]({%slug accessibility_aspnetcore_treeview%})
+
+## Resources
+
+[WAI-ARIA Authoring Practices: TreeView Example](https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-navigation)
+
+[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
## Section 508
-The DropDownTree 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).
+The DropDownTree is fully compliant with the [Section 508 requirements](https://www.section508.gov/).
+
+## Testing
+
+The DropDownTree has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The DropDownTree has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+### Test Example
+
+To test the DropDownTree component, refer to the [DropDownTree Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/dropdowntree).
-## WCAG 2.2
+## Keyboard Navigation
-The DropDownTree 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.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+For details on how the DropDownTree keyboard navigation works, refer to the [DropDownTree Keyboard Navigation]({%slug keynav_aspnetcore_dropdowntree%}) article.
## See Also
-* [Keyboard Navigation by the DropDownTree HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdowntree/keyboard-navigation)
-* [Keyboard Navigation by the DropDownTree HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_dropdowntree %})
-* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
+* [Keyboard Navigation by the DropDownTree for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdowntree/keyboard-navigation)
+* [Keyboard Navigation by the DropDownTree for {{ site.framework }}]({% slug keynav_aspnetcore_dropdowntree %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})
\ No newline at end of file
diff --git a/docs-aspnet/html-helpers/editors/dropdowntree/binding/razor-page.md b/docs-aspnet/html-helpers/editors/dropdowntree/binding/razor-page.md
index be42ffe8ea0..fb65f07ee88 100644
--- a/docs-aspnet/html-helpers/editors/dropdowntree/binding/razor-page.md
+++ b/docs-aspnet/html-helpers/editors/dropdowntree/binding/razor-page.md
@@ -18,9 +18,12 @@ For the complete project, refer to the [DropDownTree in Razor Pages example](htt
## Getting Started
-In order to set up the ComboBox component bindings, you need to configure the `Read` method of its `DataSource` instance. The URL in this method should refer the name of the method in the PageModel. In this method, you can also pass additional parameters, such as filter string and antiforgery token (see `dataFunction`).
+In order to set up the DropDownTree component bindings, you need to configure the `Read` method of its `DataSource` instance. The URL in this method hedge refer the name of the method in the pagemodel. In this method, you can also pass additional parameters, such as filter string and antiforgery token (see `dataFunction`).
+
+```tab-HtmlHelper(csthml)
+ @page
+ @model IndexModel
-```tab-HtmlHelper(csthml)
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@@ -78,7 +81,7 @@ In order to set up the ComboBox component bindings, you need to configure the `R
@Html.AntiForgeryToken()
```
-1. Send the `AntiForgeryToken` with the [Read, Create, Update, Destroy] request.
+1. Send the `AntiForgeryToken` with the Read request.
```
+
### toolbar.items `Array`
The following list indicates the default tools:
@@ -317,6 +330,7 @@ The following list indicates the default tools:
* `open`
* `download`
* `print`
+* `annotations`
For DPL Processing `exportAs` tool could be configured to export a single page to `.png` or `.svg`.
@@ -455,6 +469,8 @@ Specifies the default file name used for `Download`.
### messages.toolbar `Object`
Specifies the localization messages of the toolbar.
+### messages.toolbar.contextMenu `String` *(default: "Menu")*
+
### messages.toolbar.open `String` *(default: "Open")*
### messages.toolbar.exportAs `String` *(default: "Export")*
diff --git a/docs/controls/actionsheet/accessibility/overview.md b/docs/controls/actionsheet/accessibility/overview.md
index f478f1a23e5..b2d7dc7dc45 100644
--- a/docs/controls/actionsheet/accessibility/overview.md
+++ b/docs/controls/actionsheet/accessibility/overview.md
@@ -20,7 +20,7 @@ The ActionSheet is accessible by screen readers and provides WAI-ARIA, Section 5
Out of the box, the Kendo UI for jQuery ActionSheet provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ActionSheet is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ActionSheet 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.
## WAI-ARIA
diff --git a/docs/controls/appbar/accessibility/overview.md b/docs/controls/appbar/accessibility/overview.md
index 189c3b4e568..ef4c330fe19 100644
--- a/docs/controls/appbar/accessibility/overview.md
+++ b/docs/controls/appbar/accessibility/overview.md
@@ -17,7 +17,7 @@ For more information, refer to [Accessibility in Kendo UI for jQuery].({% slug o
Out of the box, the Kendo UI for jQuery AppBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The AppBar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The AppBar 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.
## WAI-ARIA
diff --git a/docs/controls/autocomplete/accessibility/overview.md b/docs/controls/autocomplete/accessibility/overview.md
index 21d04bcc92e..7f19413dd5f 100644
--- a/docs/controls/autocomplete/accessibility/overview.md
+++ b/docs/controls/autocomplete/accessibility/overview.md
@@ -24,7 +24,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery AutoComplete provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The AutoComplete is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The AutoComplete 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.
## WAI-ARIA
diff --git a/docs/controls/avatar/accessibility/overview.md b/docs/controls/avatar/accessibility/overview.md
index 058dd65dd03..3c320221d8c 100644
--- a/docs/controls/avatar/accessibility/overview.md
+++ b/docs/controls/avatar/accessibility/overview.md
@@ -18,7 +18,7 @@ For more information, refer to [Accessibility in Kendo UI for jQuery]({% slug ov
Out of the box, the Kendo UI for jQuery Avatar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Avatar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Avatar 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.
## WAI-ARIA
diff --git a/docs/controls/bottomnavigation/accessibility/overview.md b/docs/controls/bottomnavigation/accessibility/overview.md
index 4df113ba48d..6868e10f915 100644
--- a/docs/controls/bottomnavigation/accessibility/overview.md
+++ b/docs/controls/bottomnavigation/accessibility/overview.md
@@ -19,7 +19,7 @@ The BottomNavigation is accessible by screen readers and provides WAI-ARIA, Sect
Out of the box, the Kendo UI for jQuery Bottom Navigation provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Bottom Navigation is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Bottom Navigation 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.
## WAI-ARIA
diff --git a/docs/controls/breadcrumb/accessibility/overview.md b/docs/controls/breadcrumb/accessibility/overview.md
index 4ed055ba057..412786b989a 100644
--- a/docs/controls/breadcrumb/accessibility/overview.md
+++ b/docs/controls/breadcrumb/accessibility/overview.md
@@ -19,7 +19,7 @@ The Breadcrumb is accessible by screen readers and provides WAI-ARIA, Section 50
Out of the box, the Kendo UI for jQuery Breadcrumb provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Breadcrumb is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Breadcrumb 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.
## WAI-ARIA
diff --git a/docs/controls/button/accessibility/overview.md b/docs/controls/button/accessibility/overview.md
index 8b541e5502c..ad2d0294e64 100644
--- a/docs/controls/button/accessibility/overview.md
+++ b/docs/controls/button/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery Button provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Button is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Button 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.
## WAI-ARIA
@@ -30,7 +30,6 @@ This section lists the selectors, attributes, and behavior patterns supported by
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-button` | `role=button` or `nodeName=button` | If the used element is not ``, explicitly set its `role` to `button`. |
-| | `aria-label` | If no text has been provided to an Icon Button, announces the purpose of the Button. |
## Resources
diff --git a/docs/controls/buttongroup/accessibility/overview.md b/docs/controls/buttongroup/accessibility/overview.md
index e785335cebb..6339b6acab9 100644
--- a/docs/controls/buttongroup/accessibility/overview.md
+++ b/docs/controls/buttongroup/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery ButtonGroup provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ButtonGroup is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ButtonGroup 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.
## WAI-ARIA
@@ -31,7 +31,7 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-button-group:not(.k-split-button)` | `role=group` | Sets the proper role for the group of buttons. |
| `.k-button-group.k-disabled` | `aria-disabled=true` | The attribute is rendered only when the entire button group is disabled. |
-| `.k-button-group:not(.k-split-button):not(.k-scheduler-navigation) .k-button` | `aria-pressed` | Specifies the current state of the ButtonGroup. Only the selected button within the group will have this attribute set to `true`. |
+| `.k-button-group:not(.k-split-button):not(.k-scheduler-navigation):not(.k-zoom-control) .k-button` | `aria-pressed` | Specifies the current state of the ButtonGroup. Only the selected button within the group will have this attribute set to `true`. |
## Resources
diff --git a/docs/controls/calendar/accessibility/overview.md b/docs/controls/calendar/accessibility/overview.md
index b8faab7572b..175459e75a5 100644
--- a/docs/controls/calendar/accessibility/overview.md
+++ b/docs/controls/calendar/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery Calendar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Calendar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Calendar 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.
## WAI-ARIA
diff --git a/docs/controls/captcha/accessibility/overview.md b/docs/controls/captcha/accessibility/overview.md
index 55f06d17421..adcc638e138 100644
--- a/docs/controls/captcha/accessibility/overview.md
+++ b/docs/controls/captcha/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery Captcha provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Captcha is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Captcha 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.
## WAI-ARIA
diff --git a/docs/controls/chat/accessibility/overview.md b/docs/controls/chat/accessibility/overview.md
index 8d8c8c11513..9eaeece3ad2 100644
--- a/docs/controls/chat/accessibility/overview.md
+++ b/docs/controls/chat/accessibility/overview.md
@@ -18,7 +18,7 @@ For more information, refer to [Accessibility in Kendo UI for jQuery]({% slug ov
Out of the box, the Kendo UI for jQuery Chat provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Chat is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Chat 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.
## WAI-ARIA
diff --git a/docs/controls/checkbox/accessibility/overview.md b/docs/controls/checkbox/accessibility/overview.md
index ab7be885ba6..85d8485d429 100644
--- a/docs/controls/checkbox/accessibility/overview.md
+++ b/docs/controls/checkbox/accessibility/overview.md
@@ -18,7 +18,7 @@ For more information, refer to [Accessibility in Kendo UI for jQuery]({% slug ov
Out of the box, the Kendo UI for jQuery CheckBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The CheckBox is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The CheckBox 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.
## WAI-ARIA
@@ -29,6 +29,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-checkbox` | `role=checkbox` or `type=checkbox` | Announces the `checkbox` role of the element. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name to which it will be assigned. |
+| | `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. |
+| | `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. |
| | `aria-checked=true` or `checked=checked` | Announces the checked state of the CheckBox. |
| | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the CheckBox is disabled. |
| `.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. |
diff --git a/docs/controls/chip/accessibility/overview.md b/docs/controls/chip/accessibility/overview.md
index 2bff407319b..367892e1bd2 100644
--- a/docs/controls/chip/accessibility/overview.md
+++ b/docs/controls/chip/accessibility/overview.md
@@ -18,7 +18,7 @@ The Chip is accessible by screen readers and provides WAI-ARIA, Section 508, WCA
Out of the box, the Kendo UI for jQuery Chip provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Chip is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Chip 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.
## WAI-ARIA
diff --git a/docs/controls/chiplist/accessibility/overview.md b/docs/controls/chiplist/accessibility/overview.md
index a4957b47a53..31bdb00f6a0 100644
--- a/docs/controls/chiplist/accessibility/overview.md
+++ b/docs/controls/chiplist/accessibility/overview.md
@@ -18,7 +18,7 @@ The ChipList is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery ChipList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ChipList is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ChipList 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.
## WAI-ARIA
diff --git a/docs/controls/circularprogressbar/accessibility/overview.md b/docs/controls/circularprogressbar/accessibility/overview.md
index eda6c363a5c..86fec7975b2 100644
--- a/docs/controls/circularprogressbar/accessibility/overview.md
+++ b/docs/controls/circularprogressbar/accessibility/overview.md
@@ -19,7 +19,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery CircularProgressBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The CircularProgressBar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The CircularProgressBar 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.
## WAI-ARIA
diff --git a/docs/controls/colorgradient/accessibility/overview.md b/docs/controls/colorgradient/accessibility/overview.md
index 76cdd4fbb89..fcb9774d03e 100644
--- a/docs/controls/colorgradient/accessibility/overview.md
+++ b/docs/controls/colorgradient/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery ColorGradient provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ColorGradient is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ColorGradient 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.
## WAI-ARIA
@@ -61,7 +61,7 @@ The Numeric inputs must implement the **NumericTextBox** specification.
[NumericTextBox accessibility specification]({{numerictextbox_a11y_link}})
-Here is one additional requirement for those numerics as their visible labels have only a single letter as a tex:
+Here is one additional requirement for those numerics as their visible labels have only a single letter as text:
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
diff --git a/docs/controls/colorpalette/accessibility/overview.md b/docs/controls/colorpalette/accessibility/overview.md
index 5454c8280e2..3a8ca58e156 100644
--- a/docs/controls/colorpalette/accessibility/overview.md
+++ b/docs/controls/colorpalette/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery ColorPalette provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ColorPalette is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ColorPalette 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.
## WAI-ARIA
diff --git a/docs/controls/colorpicker/accessibility/overview.md b/docs/controls/colorpicker/accessibility/overview.md
index 4398e8eac15..8a11ac34c28 100644
--- a/docs/controls/colorpicker/accessibility/overview.md
+++ b/docs/controls/colorpicker/accessibility/overview.md
@@ -19,7 +19,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery ColorPicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ColorPicker is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ColorPicker 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.
## WAI-ARIA
diff --git a/docs/controls/combobox/accessibility/overview.md b/docs/controls/combobox/accessibility/overview.md
index 6bc79f62964..b40459e5662 100644
--- a/docs/controls/combobox/accessibility/overview.md
+++ b/docs/controls/combobox/accessibility/overview.md
@@ -20,7 +20,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery ComboBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ComboBox is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ComboBox 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.
## WAI-ARIA
diff --git a/docs/controls/dateinput/accessibility/overview.md b/docs/controls/dateinput/accessibility/overview.md
index f3068f17387..20438da62f6 100644
--- a/docs/controls/dateinput/accessibility/overview.md
+++ b/docs/controls/dateinput/accessibility/overview.md
@@ -19,7 +19,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery DateInput provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The DateInput is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The DateInput 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.
## WAI-ARIA
@@ -30,6 +30,9 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=input` | The element should either be an `` element or should have `role="button"` assigned. |
| | `aria-label` | The button needs an accessible name to be assigned to it. |
-| | `tabindex=-1` | Button element should not be focusable. |
+| | `tabindex=-1` | The button element should not be focusable. |
### Calendar Popup
diff --git a/docs/controls/datetimepicker/accessibility/overview.md b/docs/controls/datetimepicker/accessibility/overview.md
index 8682a930ff4..cdbce93ea1f 100644
--- a/docs/controls/datetimepicker/accessibility/overview.md
+++ b/docs/controls/datetimepicker/accessibility/overview.md
@@ -19,7 +19,7 @@ For more information, refer to:
Out of the box, the Kendo UI for jQuery DateTimePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The DateTimePicker is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The DateTimePicker 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.
## WAI-ARIA
@@ -32,12 +32,14 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=combobox` | The input element should follow the `combobox` specification. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
+| | `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. |
+| | `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. |
| | `aria-haspopup=dialog` | Indicates the component has a Dialog Popup. |
| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
| | `aria-controls=.k-calendar-container id` | Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
| | `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. |
| | `readonly=readonly` or `aria-readonly=true` | Attribute is rendered only when the DateTimePicker is readonly. |
-| | `aria-invalid=true` | Attribute is rendered only when the combobox is in form and announces the valid state of the component. |
+| | `aria-invalid=true` | Attribute is rendered only when the DateTimePicker is in form and announces the valid state of the component. |
| | `tabindex=0` | The element should be focusable. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DateTimePicker is disabled. |
| `.k-input-button` | `role=button` or `nodeName=button` | The element should either be a `` element or should have `role="button"` assigned. |
diff --git a/docs/controls/dialog/accessibility/overview.md b/docs/controls/dialog/accessibility/overview.md
index fc5f9eb88b1..f06a3236bce 100644
--- a/docs/controls/dialog/accessibility/overview.md
+++ b/docs/controls/dialog/accessibility/overview.md
@@ -18,7 +18,7 @@ The Dialog is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Dialog provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Dialog is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Dialog 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.
## WAI-ARIA
diff --git a/docs/controls/drawer/accessibility/overview.md b/docs/controls/drawer/accessibility/overview.md
index 65f19ae7804..7691ccf8924 100644
--- a/docs/controls/drawer/accessibility/overview.md
+++ b/docs/controls/drawer/accessibility/overview.md
@@ -20,7 +20,7 @@ The Drawer is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Drawer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Drawer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Drawer 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.
## WAI-ARIA
diff --git a/docs/controls/dropdownbutton/accessibility/overview.md b/docs/controls/dropdownbutton/accessibility/overview.md
index 03b3cdbedf3..93f306987ec 100644
--- a/docs/controls/dropdownbutton/accessibility/overview.md
+++ b/docs/controls/dropdownbutton/accessibility/overview.md
@@ -20,7 +20,7 @@ The DropDownButton is accessible by screen readers and provides WAI-ARIA, Sectio
Out of the box, the Kendo UI for jQuery DropDownButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The DropDownButton is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The DropDownButton 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.
## WAI-ARIA
@@ -37,7 +37,6 @@ The following table summarizes the selectors and attributes supported by the mai
| `.k-menu-button` | `role=button` or `nodeName=button` | Omitted if the `` DOM element is used. |
| | `aria-label` | The attribute must be present when no text is initially visible in the button. |
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
-| | `aria-haspopup=menu` | Indicates the presence of a menu popup. |
| | `aria-controls=.k-menu-group id` | Points to the popup element. Builds a relationship between the button and the popup. |
| `.k-menu-button.k-disabled` | `aria-disabled=true` | Rendered only when the button is disabled and the `disabled` attribute cannot be used. Applicable to the `` or `` element.
-The `Page` select, which is present for mobile devices and smaller screens with kimited space for page links, must be a native `` element.
+The `Page` select, which is present for mobile devices and smaller screens with limited space for page links, must be a native `` element.
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
@@ -43,7 +43,6 @@ The `Page` select, which is present for mobile devices and smaller screens with
| `.k-pager-nav` | `role=button` or `nodeName=button` | Specifies the role of the element. |
| | `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. |
| | `title` | Specifies the purpose of each button. |
-| `.k-pager-numbers>.k-link` | `role=button` or `nodeName=button` | Specifies the role of the element. |
| | `aria-label` or `title` | Specifies the purpose of each link, for example, `Page 6`. |
| | `aria-current=page` | The attribute must be present on the currently selected page element. |
| `.k-pager-sizes>.k-dropdownlist` | `aria-label` | The element requires an `aria-label` to specify its purpose. |
diff --git a/docs/controls/panelbar/accessibility/overview.md b/docs/controls/panelbar/accessibility/overview.md
index c24c1470dd0..d79f93abde6 100644
--- a/docs/controls/panelbar/accessibility/overview.md
+++ b/docs/controls/panelbar/accessibility/overview.md
@@ -18,7 +18,7 @@ The PanelBar is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery PanelBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The PanelBar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The PanelBar 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.
## WAI-ARIA
diff --git a/docs/controls/pdfviewer/accessibility/overview.md b/docs/controls/pdfviewer/accessibility/overview.md
index 93be6370f9c..1962c5c313e 100644
--- a/docs/controls/pdfviewer/accessibility/overview.md
+++ b/docs/controls/pdfviewer/accessibility/overview.md
@@ -15,10 +15,10 @@ The PDFViewer is accessible by screen readers and provides WAI-ARIA, Section 508
-Out of the box, the Kendo UI for jQuery PDFViewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+Out of the box, the Kendo UI for jQuery PDF Viewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The PDFViewer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+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.
## WAI-ARIA
@@ -26,7 +26,7 @@ The PDFViewer is compliant with the [Web Content Accessibility Guidelines (WCAG)
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-The PDFViewer component contains two inner elements - a toolbar and a page container.
+The PDF Viewer component contains two inner elements - a toolbar and a page container.
[ToolBar accessibility specification]({{toolbar_a11y_link}})
@@ -42,19 +42,19 @@ The PDFViewer component contains two inner elements - a toolbar and a page conta
## Section 508
-The PDFViewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
+The PDF Viewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
## Testing
-The PDFViewer has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+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.
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
### Screen Readers
-The PDFViewer has been tested with the following screen readers and browsers combinations:
+The PDF Viewer has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
| ----------- | ---- |
diff --git a/docs/controls/popover/accessibility/overview.md b/docs/controls/popover/accessibility/overview.md
index 4e599afae6d..a5ea895a96a 100644
--- a/docs/controls/popover/accessibility/overview.md
+++ b/docs/controls/popover/accessibility/overview.md
@@ -18,7 +18,7 @@ The Popover is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery Popover provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Popover is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Popover 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.
## WAI-ARIA
diff --git a/docs/controls/progressbar/accessibility/overview.md b/docs/controls/progressbar/accessibility/overview.md
index eb986f743c1..c0c48258c89 100644
--- a/docs/controls/progressbar/accessibility/overview.md
+++ b/docs/controls/progressbar/accessibility/overview.md
@@ -18,7 +18,7 @@ The ProgressBar is accessible by screen readers and provides WAI-ARIA, Section 5
Out of the box, the Kendo UI for jQuery ProgressBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ProgressBar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ProgressBar 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.
## WAI-ARIA
diff --git a/docs/controls/radiobutton/accessibility/overview.md b/docs/controls/radiobutton/accessibility/overview.md
index 41b4f4d275c..21f2a2564c2 100644
--- a/docs/controls/radiobutton/accessibility/overview.md
+++ b/docs/controls/radiobutton/accessibility/overview.md
@@ -18,7 +18,7 @@ The RadioButton is accessible by screen readers and provides WAI-ARIA, Section 5
Out of the box, the Kendo UI for jQuery RadioButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The RadioButton is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The RadioButton 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.
## WAI-ARIA
@@ -29,6 +29,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-radio` | `type=radio` | Announces the radio type of the input. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `aria-required=true` | The attribute is rendered only when the RadioButton is in a `form` HTML element and announces the required state of the component. |
+| | `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. |
| | `checked=checked` | Announces the checked state of the radio button. |
| | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the radio input is disabled. |
| `.k-invalid,.ng-invalid` | `aria-invalid=true` | The attribute is rendered only when the radio button is in a form and announces the valid state of the component. |
diff --git a/docs/controls/radiogroup/accessibility/overview.md b/docs/controls/radiogroup/accessibility/overview.md
index ec14b2a2d2e..aab6697e92a 100644
--- a/docs/controls/radiogroup/accessibility/overview.md
+++ b/docs/controls/radiogroup/accessibility/overview.md
@@ -20,7 +20,7 @@ The RadioGroup is accessible by screen readers and provides WAI-ARIA, Section 50
Out of the box, the Kendo UI for jQuery RadioGroup provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The RadioGroup is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The RadioGroup 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.
## WAI-ARIA
diff --git a/docs/controls/rangeslider/accessibility/overview.md b/docs/controls/rangeslider/accessibility/overview.md
index 862315ccc0e..b5a7358b589 100644
--- a/docs/controls/rangeslider/accessibility/overview.md
+++ b/docs/controls/rangeslider/accessibility/overview.md
@@ -12,16 +12,20 @@ The RangeSlider is accessible by screen readers and provides WAI-ARIA, Section 5
For more information, refer to [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %}).
+
+
+
Out of the box, the Kendo UI for jQuery RangeSlider provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The RangeSlider is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+
+The RangeSlider 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.
## WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-[Slider accessibility specification]({% slug accessibility_kendoui_slider %})
+[Slider accessibility specification]({{slider_a11y_link}})
The two focusable elements of the RangeSlider must implement the specification for the **Slider** component. Here is just one clarification for the use of `aria-valuetext` attribute:
diff --git a/docs/controls/scheduler/accessibility/overview.md b/docs/controls/scheduler/accessibility/overview.md
index e459ee415ea..5ffa8c9c727 100644
--- a/docs/controls/scheduler/accessibility/overview.md
+++ b/docs/controls/scheduler/accessibility/overview.md
@@ -18,7 +18,7 @@ The Scheduler is accessible by screen readers and provides WAI-ARIA, Section 508
Out of the box, the Kendo UI for jQuery Scheduler provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Scheduler is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Scheduler 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.
## WAI-ARIA
diff --git a/docs/controls/signature/accessibility/overview.md b/docs/controls/signature/accessibility/overview.md
index 416370f1cf2..78c2f61ba22 100644
--- a/docs/controls/signature/accessibility/overview.md
+++ b/docs/controls/signature/accessibility/overview.md
@@ -18,7 +18,7 @@ The Signature is accessible by screen readers and provides WAI-ARIA, Section 508
Out of the box, the Kendo UI for jQuery Signature provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Signature is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Signature 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.
## WAI-ARIA
diff --git a/docs/controls/slider/accessibility/overview.md b/docs/controls/slider/accessibility/overview.md
index 29c1b03c558..a267e3be972 100644
--- a/docs/controls/slider/accessibility/overview.md
+++ b/docs/controls/slider/accessibility/overview.md
@@ -20,7 +20,7 @@ The Slider is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Slider provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Slider is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Slider 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.
## WAI-ARIA
@@ -47,10 +47,10 @@ This section lists the selectors, attributes, and behavior patterns supported by
### Slider Buttons
-
-When present, the Slider Buttons must implement the specification for the **Button** component.
-
-[Button accessibility specification]({{button_a11y_link}})
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.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. |
+| | `tabindex=-1` | Excludes the decorative decrease/increase buttons from the natural tab order of the page. |
## Resources
diff --git a/docs/controls/splitter/accessibility/overview.md b/docs/controls/splitter/accessibility/overview.md
index 37d9447364d..f3f131fdf4e 100644
--- a/docs/controls/splitter/accessibility/overview.md
+++ b/docs/controls/splitter/accessibility/overview.md
@@ -18,14 +18,14 @@ The Splitter is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery Splitter provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Splitter is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Splitter 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.
## WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-### Slitter Pane
+### Splitter Pane
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
@@ -40,6 +40,7 @@ This section lists the selectors, attributes, and behavior patterns supported by
| `.k-splitbar` | `role=separator` | Sets the proper role for the Splitter split-bar element. |
| | `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. |
| `.k-splitbar-horizontal` | `aria-orientation=vertical` | When a splitbar separates two panes horizontally, its aria-orientation must be explicitly set to 'vertical'. |
+| | `aria-keyshortcuts=ArrowLeft ArrowRight ArrowUp ArrowDown` | Sets the aria-keyshortcuts attribute value to announce available keyboard shortcuts. Some are omitted for brevity. |
> 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:
diff --git a/docs/controls/spreadsheet/accessibility/overview.md b/docs/controls/spreadsheet/accessibility/overview.md
index 12f8ad52b3d..3abb147b1c5 100644
--- a/docs/controls/spreadsheet/accessibility/overview.md
+++ b/docs/controls/spreadsheet/accessibility/overview.md
@@ -18,7 +18,7 @@ The Spreadsheet is accessible by screen readers and provides WAI-ARIA, Section 5
Out of the box, the Kendo UI for jQuery Spreadsheet provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Spreadsheet is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Spreadsheet 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.
## WAI-ARIA
@@ -106,9 +106,9 @@ The Sheet area must implement the spec for a Grid component. The column header c
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
-| `.k-spreadsheet-sheet-add` | `role=button` | The add new sheet element is a button. |
-| | `aria-label` or `title` | The add new sheet element must have a label as it does not have text content. |
-| | `aria-controls=.k-tabstrip-items id` | Points to the `ul` element of the TabStrip that contains all tabs. Signifies that the `button` element controls the `tablist` one. |
+| `.k-spreadsheet-sheet-add:not(button)` | `role=button` | The add new sheet element is a button. |
+| `.k-spreadsheet-sheet-add` | `aria-label` or `title` | The add new sheet element must have a label as it does not have text content. |
+| `.k-spreadsheet-sheet-add` | `aria-controls=.k-tabstrip-items id` | Points to the `ul` element of the TabStrip that contains all tabs. Signifies that the `button` element controls the `tablist` one. |
### Menu sheet button
diff --git a/docs/controls/stepper/accessibility/overview.md b/docs/controls/stepper/accessibility/overview.md
index 2546cbacf0f..269a2c4cf20 100644
--- a/docs/controls/stepper/accessibility/overview.md
+++ b/docs/controls/stepper/accessibility/overview.md
@@ -20,7 +20,7 @@ The Stepper is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery Stepper provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Stepper is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Stepper 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.
## WAI-ARIA
@@ -35,8 +35,8 @@ The Stepper component is a landmark `` element or an element with `role="na
| `.k-stepper` | `role=navigation` or `nodeName=nav` | The landmark role `navigation` must be assigned to the component. |
| `.k-step-disabled>.k-step-link` | `aria-disabled=true` | A disabled (inactive) link. |
| `.k-step-current>.k-step-link` | `aria-current=step` | The currently selected link. |
-| | `tabindex=0` | Removes the element from the page Tab sequence. Set when a tab is not selected so that only the selected tab is in the page Tab sequence. |
-| `.k-step:not(.k-step-current) .k-step-link` | `tabindex=-1` | Removes the element from the page Tab sequence. Set when a tab is not selected so that only the selected tab is in the page Tab sequence. |
+| `.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. |
+| `.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. |
No aria attributes should be applied to the Stepper as the ProgressBar serves a purely aesthetic purpose.
diff --git a/docs/controls/switch/accessibility/overview.md b/docs/controls/switch/accessibility/overview.md
index 26a536aedc1..fd1108f6f2b 100644
--- a/docs/controls/switch/accessibility/overview.md
+++ b/docs/controls/switch/accessibility/overview.md
@@ -20,7 +20,7 @@ The Switch is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Switch provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Switch is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Switch 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.
## WAI-ARIA
@@ -31,6 +31,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-switch` | `role=switch` | Announces the switch role of the element. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `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. |
+| | `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. |
| | `aria-checked` | Announces the checked state of the Switch. |
| | `tabindex=0` | The element must be focusable. |
| | `aria-invalid=true` | The attribute is rendered only when the Switch is in a form and announces the valid state of the component. |
diff --git a/docs/controls/tabstrip/accessibility/overview.md b/docs/controls/tabstrip/accessibility/overview.md
index 241c6031ea3..84ddf1d5ad0 100644
--- a/docs/controls/tabstrip/accessibility/overview.md
+++ b/docs/controls/tabstrip/accessibility/overview.md
@@ -20,7 +20,7 @@ The TabStrip is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery TabStrip provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TabStrip is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TabStrip 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.
## WAI-ARIA
@@ -32,8 +32,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| `.k-tabstrip-items` | `role=tablist` | Indicates the tablist role for the ul element of the TabStrip. |
| `.k-tabstrip.k-tabstrip-left .k-tabstrip-items,.k-tabstrip.k-tabstrip-right .k-tabstrip-items` | `aria-orientation=vertical` | Indicates the orientation of the tablist container element. The attribute is rendered only when the orientation of the component is vertical as the `tablist` role comes with default horizontal orientation. |
| `.k-tabstrip-item` | `role=tab` | The tab `li` element. |
-| | `aria-controls=.k-tabstrip-content id` | Announces the relation between the panel and tab. |
| `.k-tabstrip .k-item.k-active` | `aria-selected=true` | Announces the selected state of the tab. |
+| | `aria-controls=.k-tabstrip-content id` | Announces the relation between the panel and active tab. |
| `.k-tabstrip-content` | `role=tabpanel` | The content `div` of the tab. |
| | `aria-hidden=true` | Only if the component implements a feature to control whether the content should be persisted. |
| | `aria-labelledby=.k-tabstrip-item id` | Refers to the tab element that controls the panel. |
diff --git a/docs/controls/taskboard/accessibility/overview.md b/docs/controls/taskboard/accessibility/overview.md
index 307d8338640..af936bb04b1 100644
--- a/docs/controls/taskboard/accessibility/overview.md
+++ b/docs/controls/taskboard/accessibility/overview.md
@@ -20,7 +20,7 @@ The TaskBoard is accessible by screen readers and provides WAI-ARIA, Section 508
Out of the box, the Kendo UI for jQuery TaskBoard provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TaskBoard is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TaskBoard 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.
## WAI-ARIA
diff --git a/docs/controls/textarea/accessibility/overview.md b/docs/controls/textarea/accessibility/overview.md
index 2cecf023356..0e4e1e39841 100644
--- a/docs/controls/textarea/accessibility/overview.md
+++ b/docs/controls/textarea/accessibility/overview.md
@@ -18,7 +18,7 @@ The TextArea is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery TextArea provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TextArea is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TextArea is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](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.
## WAI-ARIA
@@ -29,6 +29,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=textarea` | Describes the role of the component. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `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. |
+| | `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. |
| | `aria-multiline=true` | Announces the multi-line behavior of the TextArea. |
| | `aria-invalid=true` | The attribute is rendered only when the TextArea is in a form and announces the valid state of the component. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the TextArea is disabled. |
diff --git a/docs/controls/textbox/accessibility/overview.md b/docs/controls/textbox/accessibility/overview.md
index b5948112f8f..5b533477e36 100644
--- a/docs/controls/textbox/accessibility/overview.md
+++ b/docs/controls/textbox/accessibility/overview.md
@@ -18,7 +18,7 @@ The TextBox is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery TextBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TextBox is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TextBox 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.
## WAI-ARIA
@@ -26,12 +26,14 @@ The TextBox is compliant with the [Web Content Accessibility Guidelines (WCAG) 2
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
-No role attribute is implemented as the `html input type="text"` element is sufficient for definining the purpose of the component.
+No role attribute is implemented as the `html input type="text"` element is sufficient for defining the purpose of the component.
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=input` | Describes the role of the component. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
+| | `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. |
+| | `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. |
| | `aria-invalid=true` | The attribute is rendered only when the TextBox is in a form and announces the valid state of the component. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the TextBox is disabled. |
diff --git a/docs/controls/tilelayout/accessibility/overview.md b/docs/controls/tilelayout/accessibility/overview.md
index 687ea7f457a..c6fff2d8cbf 100644
--- a/docs/controls/tilelayout/accessibility/overview.md
+++ b/docs/controls/tilelayout/accessibility/overview.md
@@ -20,7 +20,7 @@ The TileLayout is accessible by screen readers and provides WAI-ARIA, Section 50
Out of the box, the Kendo UI for jQuery TileLayout provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TileLayout is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TileLayout is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](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.
## WAI-ARIA
diff --git a/docs/controls/timedurationpicker/accessibility/overview.md b/docs/controls/timedurationpicker/accessibility/overview.md
index e983d875d28..ddd38b49d70 100644
--- a/docs/controls/timedurationpicker/accessibility/overview.md
+++ b/docs/controls/timedurationpicker/accessibility/overview.md
@@ -18,7 +18,7 @@ The TimeDurationPicker is accessible by screen readers and provides WAI-ARIA, Se
Out of the box, the Kendo UI for jQuery TimeDurationPicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TimeDurationPicker is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TimeDurationPicker 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.
## WAI-ARIA
diff --git a/docs/controls/timeline/accessibility/overview.md b/docs/controls/timeline/accessibility/overview.md
index ebc27133c45..70593e454f2 100644
--- a/docs/controls/timeline/accessibility/overview.md
+++ b/docs/controls/timeline/accessibility/overview.md
@@ -20,7 +20,7 @@ The Timeline is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery Timeline provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Timeline is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Timeline 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.
## WAI-ARIA
diff --git a/docs/controls/timepicker/accessibility/overview.md b/docs/controls/timepicker/accessibility/overview.md
index ca29121ffb7..97bba3e33e7 100644
--- a/docs/controls/timepicker/accessibility/overview.md
+++ b/docs/controls/timepicker/accessibility/overview.md
@@ -18,7 +18,7 @@ The TimePicker is accessible by screen readers and provides WAI-ARIA, Section 50
Out of the box, the Kendo UI for jQuery TimePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TimePicker is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TimePicker 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.
## WAI-ARIA
@@ -31,6 +31,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=combobox` | The input element should follow the `combobox` specification. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
+| | `aria-required=true` | The attribute is rendered only when the TimePicker is in a `form` HTML element and announces the required state of the component. |
+| | `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. |
| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
| | `aria-controls=.k-animation-container id` | Points to the popup element. Signifies that the `combobox` element controls the `listbox` popup. |
| | `readonly` or `aria-readonly` | Attribute is rendered only when the DatePicker is readonly. |
diff --git a/docs/controls/togglebutton/accessibility/overview.md b/docs/controls/togglebutton/accessibility/overview.md
index 293a9bd4921..a2c2a60356c 100644
--- a/docs/controls/togglebutton/accessibility/overview.md
+++ b/docs/controls/togglebutton/accessibility/overview.md
@@ -18,7 +18,7 @@ The ToggleButton is accessible by screen readers and provides WAI-ARIA, Section
Out of the box, the Kendo UI for jQuery ToggleButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ToggleButton is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ToggleButton 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.
## WAI-ARIA
diff --git a/docs/controls/toolbar/accessibility/overview.md b/docs/controls/toolbar/accessibility/overview.md
index d5fa10d27ba..120cec862eb 100644
--- a/docs/controls/toolbar/accessibility/overview.md
+++ b/docs/controls/toolbar/accessibility/overview.md
@@ -18,7 +18,7 @@ The ToolBar is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery ToolBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The ToolBar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The ToolBar 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.
## WAI-ARIA
diff --git a/docs/controls/tooltip/accessibility/overview.md b/docs/controls/tooltip/accessibility/overview.md
index 97de3afe8a1..480c02d2534 100644
--- a/docs/controls/tooltip/accessibility/overview.md
+++ b/docs/controls/tooltip/accessibility/overview.md
@@ -18,7 +18,7 @@ The Tooltip is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery Tooltip provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Tooltip is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Tooltip 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.
## WAI-ARIA
diff --git a/docs/controls/treelist/accessibility/overview.md b/docs/controls/treelist/accessibility/overview.md
index 46b472ccb6c..b716e715b5a 100644
--- a/docs/controls/treelist/accessibility/overview.md
+++ b/docs/controls/treelist/accessibility/overview.md
@@ -20,7 +20,7 @@ The TreeList is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery TreeList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TreeList is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TreeList 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.
## WAI-ARIA
@@ -70,7 +70,6 @@ The below table lists the ARIA requirements for the TreeList which are not prese
[WAI-ARIA specification for tree grid](https://www.w3.org/TR/wai-aria-1.2/#treegrid)
-
## Section 508
diff --git a/docs/controls/treeview/accessibility/overview.md b/docs/controls/treeview/accessibility/overview.md
index 2b613bffee5..6287e8ee957 100644
--- a/docs/controls/treeview/accessibility/overview.md
+++ b/docs/controls/treeview/accessibility/overview.md
@@ -18,7 +18,7 @@ The TreeView is accessible by screen readers and provides WAI-ARIA, Section 508,
Out of the box, the Kendo UI for jQuery TreeView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The TreeView is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The TreeView 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.
## WAI-ARIA
@@ -40,7 +40,7 @@ If the tree supports the load-more functionality, the **Load More** button is re
| | `aria-setsize` | Announces the total count of the items at this level. Enables the user to understand the position of the navigation, for example, item 3 of 14. Must be added only when the load-more functionality of the tree is enabled and there are still nodes belonging to the group that are not loaded (rendered) yet. |
| | `aria-expanded=true/false` | Announces the expanded state of the node. The value is `true` when expanded, and `false` when collapsed. |
| | `aria-checked=true/false` | Rendered only when checkboxes are enabled. Announces the checked state of the node. If the checkbox is indeterminate, the value is `mixed`. |
-| `.k-treeview-item:has(.k-selected)` | `aria-selected=true` | Rendered only when selection is enabled. Announces the selected state of the node. |
+| `.k-treeview-item:has(> span > .k-selected, > div > .k-selected) ` | `aria-selected=true` | Rendered only when selection is enabled. Announces the selected state of the node. |
| `.k-checkbox` | `role=none/presentation` | Added to the wrapper element of the checkbox to prevent duplicated information announced to the user. The checked state is controlled by `aria-checked`. |
| | `aria-hidden=true` | Added to the checkbox element to prevent duplicated information announced to the user. The checked state is controlled by `aria-checked`. |
diff --git a/docs/controls/upload/accessibility/overview.md b/docs/controls/upload/accessibility/overview.md
index f8ba293e1a1..ba3030cbf86 100644
--- a/docs/controls/upload/accessibility/overview.md
+++ b/docs/controls/upload/accessibility/overview.md
@@ -20,25 +20,30 @@ The Upload is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Upload provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Upload is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Upload is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](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.
## WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+The Upload selected files list implements roving tabindex navigation. Meaning that only one file has tabindex=0.
+
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
-| `.k-upload` | `role=application` | Indicates that the role of the upload is `application`. The component implements single tab stop navigation strategy. Thus, the role is required to support arrow navigation. |
-| `.k-upload .k-upload-button` | `tabindex=0` | Assures that the button element inside the upload is the focusable element. |
-| | `aria-disabled=true/false` | Announces the disabled state of the upload button. |
-| `.k-upload input` | `tabindex=-1` | Assures that the input element inside the upload is not focusable element. |
+| `.k-upload .k-upload-button` | `aria-disabled=true/false` | Announces the disabled state of the upload button. |
+| | `aria-expanded=true/false` | Indicates whether the controlled list of files is present/visible |
+| | `aria-controls=.k-upload-files id` | Creates the relationship between the button and the list of selected files when the list is present. Remove the attribute when list is not present. |
+| `.k-upload input` | `tabindex=-1` | Assures that the input element inside the upload is not focusable. |
| | `aria-hidden=true` | The input needs to be hidden from the readers. |
+| `.k-upload-files` | `role=list` | Explicitly sets the UL role to list because of https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns |
+| | `id` | Unique and deterministic id linked to the button aria-controls attribute. |
+| `.k-upload-files .k-file` | `role=listitem` | Explicitly sets the LI role to listitem because of https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role#best_practices (note 2). |
+| | `tabindex=0/-1` | The element should be focusable. Value should be changed dynamically based on the roving tabindex navigation. |
| `.k-upload .k-file .k-file-validation-message` | `aria-live=polite` | Announces the change in the upload status of the file. |
-| `.k-upload .k-upload-actions .k-upload-action` | `aria-hidden=true.` | The list file action buttons must be hidden from the readers. |
+| `.k-upload .k-upload-actions .k-upload-action` | `aria-hidden=true` | The list file action buttons must be hidden from the readers. |
| | `tabindex=-1` | Assures that the list file action buttons are not focusable elements. |
-| `.k-upload .k-actions .k-button` | `role=button` or `nodeName=button` | Announces the purpose of the action button. |
-| | `tabindex=0` | The action buttons are focusable through arrow navigation and tabbing through them. |
## Resources
diff --git a/docs/controls/window/accessibility/overview.md b/docs/controls/window/accessibility/overview.md
index 24f62bcfbd1..fd0c0439585 100644
--- a/docs/controls/window/accessibility/overview.md
+++ b/docs/controls/window/accessibility/overview.md
@@ -20,7 +20,7 @@ The Window is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Window provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Window is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Window 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.
## WAI-ARIA
diff --git a/docs/controls/wizard/accessibility/overview.md b/docs/controls/wizard/accessibility/overview.md
index 8c9f322aab3..338c505cf20 100644
--- a/docs/controls/wizard/accessibility/overview.md
+++ b/docs/controls/wizard/accessibility/overview.md
@@ -20,7 +20,7 @@ The Wizard is accessible by screen readers and provides WAI-ARIA, Section 508, W
Out of the box, the Kendo UI for jQuery Wizard provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
-The Wizard is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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.
+The Wizard 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.
## WAI-ARIA
diff --git a/src/colorpicker/colorselector.js b/src/colorpicker/colorselector.js
index 820ad95605d..c924aa4ea06 100644
--- a/src/colorpicker/colorselector.js
+++ b/src/colorpicker/colorselector.js
@@ -138,8 +138,11 @@ import "../kendo.color.js";
},
_releaseInnerFocus: function() {
this._tabKeyTrap.removeTrap();
- this.wrapper.attr("tabindex", this._tabIndex);
- this._innerTabindex(-1);
+
+ if (this.wrapper) {
+ this.wrapper.attr("tabindex", this._tabIndex);
+ this._innerTabindex(-1);
+ }
},
_select: function(color, nohooks) {
var prev = this._value;
diff --git a/src/kendo.menu.js b/src/kendo.menu.js
index 36d5f904eea..1b39ba15cf2 100644
--- a/src/kendo.menu.js
+++ b/src/kendo.menu.js
@@ -1075,7 +1075,6 @@ export const __meta__ = {
if (touch || allPointers || kendo.support.mouseAndTouchPresent) {
li.removeClass(HOVERSTATE);
- that._removeHoverItem();
}
} else {
e.preventDefault();
diff --git a/typescript/kendo.all.d.ts b/typescript/kendo.all.d.ts
index 1e4c9cc73c9..0e0e7ccfc57 100644
--- a/typescript/kendo.all.d.ts
+++ b/typescript/kendo.all.d.ts
@@ -8794,6 +8794,7 @@ declare namespace kendo.ui {
interface PDFViewerToolbar {
items?: PDFViewerToolbarItem[] | undefined;
+ contextMenu?: boolean | undefined;
}
interface PDFViewerView {