diff --git a/accessibility/assets/BlazorVPAT.doc b/accessibility/assets/blazorvpat.doc similarity index 100% rename from accessibility/assets/BlazorVPAT.doc rename to accessibility/assets/blazorvpat.doc diff --git a/accessibility/compliance.md b/accessibility/compliance.md index bb5c605e21..24e03eded1 100644 --- a/accessibility/compliance.md +++ b/accessibility/compliance.md @@ -17,7 +17,7 @@ This article lists the accessibility compliance of the Telerik UI for Blazor com The [Accessibility Conformance Report (ACR)](https://www.section508.gov/sell/acr/) is a document that explains how information and communication technology products such as software, hardware, electronic content, and support documentation conform to leading global accessibility standards. Telerik UI for Blazor provides an ACR through the Voluntary Product Accessibility Template (VPAT®). ->tip Download the latest version of the Telerik UI for Blazor Accessibility Conformance Report. +>tip Download the latest version of the Telerik UI for Blazor Accessibility Conformance Report. ## Compliance Table @@ -44,7 +44,7 @@ Also check the [notes below the table](#accessibility-compliance-notes). | Button | AAA | [Standard](https://demos.telerik.com/blazor-ui/button/keyboard-navigation) | [Documentation]({%slug button-wai-aria-support%}) | | ButtonGroup | AAA | [Standard](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation) | [Documentation]({%slug buttongroup-wai-aria-support%}) | | Calendar | AAA | [Enhanced](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation) | [Documentation]({%slug calendar-wai-aria-support%}) | -| Card | N/A | N/A | N/A | +| Card | AA | N/A | [Documentation]({%slug card-wai-aria-support%}) | | Carousel | AA | [Enhanced](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation) | [Documentation]({%slug carousel-wai-aria-support%}) | | Chart | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation) | [Documentation]({%slug chart-wai-aria-support %}) | | CheckBox | AA | [Standard](https://demos.telerik.com/blazor-ui/checkbox/overview) | [Documentation]({%slug checkbox-wai-aria-support%}) | @@ -67,13 +67,13 @@ Also check the [notes below the table](#accessibility-compliance-notes). | DropDownList | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation) | [Documentation]({%slug dropdownlist-wai-aria-support%}) | | DropZone | N/A | N/A | N/A | | Editor | AA | [Enhanced](https://demos.telerik.com/blazor-ui/editor/keyboard-navigation) | [Documentation]({%slug editor-wai-aria-support%}) | -| FileManager | AA |[Enhanced](https://demos.telerik.com/blazor-ui/filemanager/overview) | [Documentation]({%slug filemanager-wai-aria-support%}) | +| FileManager | AA |[Enhanced](https://demos.telerik.com/blazor-ui/filemanager/overview)
Also see [Grid](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation), [ListView](https://demos.telerik.com/blazor-ui/listview/keyboard-navigation), [Splitter](https://demos.telerik.com/blazor-ui/splitter/keyboard-navigation), [ToolBar](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation), [TreeView](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation) | [Documentation]({%slug filemanager-wai-aria-support%}) | | FileSelect | N/A | [Enhanced](https://demos.telerik.com/blazor-ui/fileselect/keyboard-navigation) | TBA | | Filter | AA | [Enhanced](https://demos.telerik.com/blazor-ui/filter/keyboard-navigation) | [Documentation]({%slug filter-wai-aria-support%}) | | FlatColorPicker | AA | [Enhanced](https://demos.telerik.com/blazor-ui/flatcolorpicker/overview) | [Documentation]({%slug flatcolorpicker-wai-aria-support%}) | | FloatingLabel | N/A | N/A | N/A | | FontIcon | N/A | N/A | N/A | -| Form | AA | [Standard](https://demos.telerik.com/blazor-ui/form/overview) | N/A | +| Form | AA | [Standard](https://demos.telerik.com/blazor-ui/form/overview) | [Documentation]({%slug form-wai-aria-support%}) | | Gantt | AA | [Enhanced](https://demos.telerik.com/blazor-ui/gantt/keyboard-navigation) | [Documentation]({%slug gantt-wai-aria-support%}) | | Grid | AA | [Enhanced](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) | [Documentation]({%slug grid-wai-aria-support%}) | | GridLayout | N/A | N/A | N/A | @@ -91,7 +91,7 @@ Also check the [notes below the table](#accessibility-compliance-notes). | Notification | AA | N/A | [Documentation]({%slug notification-wai-aria-support%}) | | NumericTextbox | AA | [Enhanced](https://demos.telerik.com/blazor-ui/numerictextbox/keyboard-navigation) | [Documentation]({%slug numerictextbox-wai-aria-support%}) | | Pager | AA | [Enhanced](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation) | [Documentation]({%slug pager-wai-aria-support%}) | -| PanelBar | AA | [Enhanced](https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation) | N/A | +| PanelBar | AA | [Enhanced](https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation) | [Documentation]({%slug panelbar-wai-aria-support%}) | | PdfViewer | AA | [Enhanced](https://demos.telerik.com/blazor-ui/pdfviewer/overview) | [Documentation]({%slug pdfviewer-wai-aria-support%}) | | PivotGrid | AA | [Enhanced](https://demos.telerik.com/blazor-ui/pivotgrid/overview) | [Documentation]({%slug pivotgrid-wai-aria-support%}) | | ProgressBar | AA | N/A | [Documentation]({%slug progressbar-wai-aria-support%}) | @@ -101,11 +101,11 @@ Also check the [notes below the table](#accessibility-compliance-notes). | RadialGauge | AA | N/A | N/A | | RadioGroup | AA | [Standard](https://demos.telerik.com/blazor-ui/radiogroup/keyboard-navigation) | [Documentation]({%slug radiogroup-wai-aria-support%}) | | RangeSlider | AA | [Enhanced](https://demos.telerik.com/blazor-ui/rangeslider/keyboard-navigation) | [Documentation]({%slug rangeslider-wai-aria-support%}) | -| Rating | AA | N/A | N/A | +| Rating | AA | [Enhanced](https://demos.telerik.com/blazor-ui/rating/keyboard-navigation) | [Documentation]({%slug rating-wai-aria-support%}) | | Sankey | AA | [Enhanced](https://demos.telerik.com/blazor-ui/sankey/overview) | [Documentation]({%slug sankey-wai-aria-support%}) | | Scheduler | AA | [Enhanced](https://demos.telerik.com/blazor-ui/scheduler/keyboard-navigation) | [Documentation]({%slug scheduler-wai-aria-support%}) | -| Signature | AA | N/A | [Documentation]({%slug signature-wai-aria-support%}) | -| Skeleton | N/A | N/A | N/A | +| Signature | AA | [Enhanced](https://demos.telerik.com/blazor-ui/signature/overview) | [Documentation]({%slug signature-wai-aria-support%}) | +| Skeleton | AAA | N/A | [Documentation]({%slug skeleton-wai-aria-support%}) | | Slider | AA | [Enhanced](https://demos.telerik.com/blazor-ui/slider/keyboard-navigation) | [Documentation]({%slug slider-wai-aria-support%}) | | SplitButton | AA | [Enhanced](https://demos.telerik.com/blazor-ui/splitbutton/keyboard-navigation) | [Documentation]({%slug splitbutton-wai-aria-support%}) | | Splitter | AA | [Enhanced](https://demos.telerik.com/blazor-ui/splitter/keyboard-navigation) | [Documentation]({%slug splitter-wai-aria-support%}) | @@ -118,14 +118,14 @@ Also check the [notes below the table](#accessibility-compliance-notes). | TabStrip | AA | [Enhanced](https://demos.telerik.com/blazor-ui/tabstrip/keyboard-navigation) | [Documentation]({%slug tabstrip-wai-aria-support%}) | | TextArea | AAA | [Standard](https://demos.telerik.com/blazor-ui/textarea/overview) | [Documentation]({%slug textarea-wai-aria-support%}) | | TextBox | AA | [Standard](https://demos.telerik.com/blazor-ui/textbox/overview) | [Documentation]({%slug textbox-wai-aria-support%}) | -| TileLayout | AAA | N/A | [Documentation]({%slug tilelayout-wai-aria-support%}) | +| TileLayout | AAA | [Enhanced](https://demos.telerik.com/blazor-ui/tilelayout/overview) | [Documentation]({%slug tilelayout-wai-aria-support%}) | | TimePicker | AA | [Enhanced](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation) | [Documentation]({%slug timepicker-wai-aria-support%}) | | ToggleButton | AA | [Enhanced](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation) | [Documentation]({%slug togglebutton-wai-aria-support%}) | | ToolBar | AA | [Enhanced](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation) | [Documentation]({%slug toolbar-wai-aria-support%}) | -| Tooltip | AA | N/A | [Documentation]({%slug tooltip-wai-aria-support%}) | -| TreeList | N/A | [Enhanced](https://demos.telerik.com/blazor-ui/treelist/keyboard-navigation) | [Documentation]({%slug treelist-wai-aria-support%}) | +| Tooltip | AA | [Enhanced](https://demos.telerik.com/blazor-ui/tooltip/overview) | [Documentation]({%slug tooltip-wai-aria-support%}) | +| TreeList | AA | [Enhanced](https://demos.telerik.com/blazor-ui/treelist/keyboard-navigation) | [Documentation]({%slug treelist-wai-aria-support%}) | | TreeView | AA | [Enhanced](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation) | [Documentation]({%slug treeview-wai-aria-support%}) | -| Upload | N/A | [Enhanced](https://demos.telerik.com/blazor-ui/upload/keyboard-navigation) | [Documentation]({%slug upload-wai-aria-support%}) | +| Upload | AAA | [Enhanced](https://demos.telerik.com/blazor-ui/upload/keyboard-navigation) | [Documentation]({%slug upload-wai-aria-support%}) | | ValidationMessage | AA | N/A | TBA | | ValidationTooltip | AA | N/A | TBA | | ValidationSummary | AA | N/A | TBA | diff --git a/components/card/accessibility/wai-aria-support.md b/components/card/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..2418183050 --- /dev/null +++ b/components/card/accessibility/wai-aria-support.md @@ -0,0 +1,70 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor Card Documentation | Card Accessibility +description: "Get started with the Telerik UI for Blazor Card and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: card-wai-aria-support +position: 50 +--- + +# Blazor Card Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor Card provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The Card 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. + +### Card Component + + +The Card component is a UI container with styles for organized content. It does not have WAI ARIA and keyboard navigation unless used in a Card List. + +| Selector | Attribute | Usage | +| -------- | --------- | ----- | +| `.k-card-list .k-card` | `role=listitem` | When the card is located in a list, it should accept the listitem role. | +| | `tabindex=0` | The card component is focusable. By enabling navigatable setting in the card component, it is focusable and all inner elements are not until Enter key is pressed. | +| | `aria-describedby=.k-card-title id` | Associate the card to the title element when going through the cards. | +| | `aria-keyshortcuts=Enter` | Announces the bound Enter key for the Card component that will enable the navigation inside the card. | + +## Section 508 + + +The Card is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The Card 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 Card 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 keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. + +## See Also + +* [Blazor Card Demos](https://demos.telerik.com/blazor-ui/card/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/form/accessibility/wai-aria-support.md b/components/form/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..67f05fa78e --- /dev/null +++ b/components/form/accessibility/wai-aria-support.md @@ -0,0 +1,72 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor Form Documentation | Form Accessibility +description: "Get started with the Telerik UI for Blazor Form and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: form-wai-aria-support +position: 50 +--- + +# Blazor Form Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor Form provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The Form 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. + +### Form Component + + +The Form component provides a structured way to collect user inputs. It is designed to ensure accessibility and usability for all users, including those with disabilities. + +| Selector | Attribute | Usage | +| -------- | --------- | ----- | +| `.k-form` | `role=form` or `nodeName=form` | Omitted if the `
` DOM element is used. | + +### Input elements + + +The Form field input element of the component should indicate if it is required and announce any hints or error messages. + +## Section 508 + + +The Form is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The Form 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 Form 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 keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. + +## See Also + +* [Blazor Form Demos](https://demos.telerik.com/blazor-ui/form/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/panelbar/accessibility/wai-aria-support.md b/components/panelbar/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..aba3fff52a --- /dev/null +++ b/components/panelbar/accessibility/wai-aria-support.md @@ -0,0 +1,71 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor PanelBar Documentation | PanelBar Accessibility +description: "Get started with the Telerik UI for Blazor PanelBar and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: panelbar-wai-aria-support +position: 50 +--- + +# Blazor PanelBar Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor 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 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-panelbar` | `role=tree` | The root element of the PanelBar has role `tree`. | +| | `aria-activedescendant=.k-item id` | Points to the currently focused item in the PanelBar. | +| `.k-panelbar-group` | `role=group` | The `ul` element that wraps child nodes. | +| `[aria-expanded='false']>.k-panelbar-group` | `aria-hidden=true` | Hides the `group` element from assistive technologies when its parent is not expanded. | +| `.k-item` | `role=treeitem` | The `li` element rendered for a PanelBar item. | +| | `aria-expanded=true/false` | Announces the expanded state of the item (if expandable). It is `true` when expanded, and `false` when collapsed. | +| | `aria-selected=true/false` | Announces the selected state of the item. | + +## Resources + +[ARIA practices Navigation Treeview Example](https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-navigation.html) + +## Section 508 + + +The PanelBar is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The PanelBar 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 PanelBar 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 PanelBar keyboard navigation works, refer to the [Blazor PanelBar Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation). + +## See Also + +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/rating/accessibility/wai-aria-support.md b/components/rating/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..ac02b30597 --- /dev/null +++ b/components/rating/accessibility/wai-aria-support.md @@ -0,0 +1,70 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor Rating Documentation | Rating Accessibility +description: "Get started with the Telerik UI for Blazor Rating and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: rating-wai-aria-support +position: 50 +--- + +# Blazor Rating Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor Rating provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The Rating 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-rating` | `role=slider` | Announces the `slider` role of the Rating element. | +| | `aria-label` or `aria-labelledby` or `title` | The Rating needs an accessible name to be assigned to it. | +| | `tabindex=0` | The element must be focusable. | +| | `aria-valuenow` | Specifies the currently selected value in the Rating. | +| | `aria-valuemin` | Specifies the minimum available value in the Rating. | +| | `aria-valuemax` | Specifies the maximum available value in the Rating. | + +## Resources + +[WAI-ARIA specification for slider](https://www.w3.org/TR/wai-aria-1.2/#slider) + +## Section 508 + + +The Rating is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The Rating 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 Rating 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 Rating keyboard navigation works, refer to the [Blazor Rating Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/rating/keyboard-navigation). + +## See Also + +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/skeleton/accessibility/wai-aria-support.md b/components/skeleton/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..41c2d7a83d --- /dev/null +++ b/components/skeleton/accessibility/wai-aria-support.md @@ -0,0 +1,65 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor Skeleton Documentation | Skeleton Accessibility +description: "Get started with the Telerik UI for Blazor Skeleton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: skeleton-wai-aria-support +position: 50 +--- + +# Blazor Skeleton Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor Skeleton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The Skeleton 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 Skeleton component does not have accessibility on its own as it is only visual indicator and should be integrated within an element that refers to the loading state. When integrated on a page, you might: + + + - use `aria-busy` attribute to illustrate that the focusable element is loading + - use `role="alert"` to announce the loading + +## Section 508 + + +The Skeleton is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The Skeleton 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 Skeleton 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 keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. + +## See Also + +* [Blazor Skeleton Demos](https://demos.telerik.com/blazor-ui/skeleton/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/tilelayout/accessibility/wai-aria-support.md b/components/tilelayout/accessibility/wai-aria-support.md index 8021d0bf70..7c536a66df 100644 --- a/components/tilelayout/accessibility/wai-aria-support.md +++ b/components/tilelayout/accessibility/wai-aria-support.md @@ -61,8 +61,9 @@ The TileLayout has been tested with the following screen readers and browsers co ## Keyboard Navigation -For details on how the TileLayout keyboard navigation works, refer to the [Blazor TileLayout Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/tilelayout/keyboard-navigation). +For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. ## See Also +* [Blazor TileLayout Demos](https://demos.telerik.com/blazor-ui/tilelayout/overview) * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/src-a11y/configs/card.aria.yml b/src-a11y/configs/card.aria.yml new file mode 100644 index 0000000000..318900f1c2 --- /dev/null +++ b/src-a11y/configs/card.aria.yml @@ -0,0 +1,15 @@ +title: Wai-Aria Support +component: Card +from: /aria/card_aria.md +dest: ../components/card/accessibility/wai-aria-support.md +slug: card-wai-aria-support +position: 50 +after: | + ## Keyboard Navigation + + For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. + + ## See Also + + * [Blazor Card Demos](https://demos.telerik.com/blazor-ui/card/overview) + * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) diff --git a/src-a11y/configs/form.aria.yml b/src-a11y/configs/form.aria.yml new file mode 100644 index 0000000000..1754025fe7 --- /dev/null +++ b/src-a11y/configs/form.aria.yml @@ -0,0 +1,15 @@ +title: Wai-Aria Support +component: Form +from: /aria/form_aria.md +dest: ../components/form/accessibility/wai-aria-support.md +slug: form-wai-aria-support +position: 50 +after: | + ## Keyboard Navigation + + For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. + + ## See Also + + * [Blazor Form Demos](https://demos.telerik.com/blazor-ui/form/overview) + * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) diff --git a/src-a11y/configs/panelbar.aria.yml b/src-a11y/configs/panelbar.aria.yml new file mode 100644 index 0000000000..05559e725c --- /dev/null +++ b/src-a11y/configs/panelbar.aria.yml @@ -0,0 +1,14 @@ +title: Wai-Aria Support +component: PanelBar +from: /aria/panelbar_aria.md +dest: ../components/panelbar/accessibility/wai-aria-support.md +slug: panelbar-wai-aria-support +position: 50 +after: | + ## Keyboard Navigation + + For details on how the PanelBar keyboard navigation works, refer to the [Blazor PanelBar Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation). + + ## See Also + + * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) diff --git a/src-a11y/configs/rating.aria.yml b/src-a11y/configs/rating.aria.yml new file mode 100644 index 0000000000..f3fb28a282 --- /dev/null +++ b/src-a11y/configs/rating.aria.yml @@ -0,0 +1,14 @@ +title: Wai-Aria Support +component: Rating +from: /aria/rating_aria.md +dest: ../components/rating/accessibility/wai-aria-support.md +slug: rating-wai-aria-support +position: 50 +after: | + ## Keyboard Navigation + + For details on how the Rating keyboard navigation works, refer to the [Blazor Rating Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/rating/keyboard-navigation). + + ## See Also + + * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) diff --git a/src-a11y/configs/skeleton.aria.yml b/src-a11y/configs/skeleton.aria.yml new file mode 100644 index 0000000000..35b17539ef --- /dev/null +++ b/src-a11y/configs/skeleton.aria.yml @@ -0,0 +1,15 @@ +title: Wai-Aria Support +component: Skeleton +from: /aria/skeleton_aria.md +dest: ../components/skeleton/accessibility/wai-aria-support.md +slug: skeleton-wai-aria-support +position: 50 +after: | + ## Keyboard Navigation + + For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. + + ## See Also + + * [Blazor Skeleton Demos](https://demos.telerik.com/blazor-ui/skeleton/overview) + * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) diff --git a/src-a11y/configs/tilelayout.aria.yml b/src-a11y/configs/tilelayout.aria.yml index c15392a60c..2b23f0ccad 100644 --- a/src-a11y/configs/tilelayout.aria.yml +++ b/src-a11y/configs/tilelayout.aria.yml @@ -7,8 +7,9 @@ position: 50 after: | ## Keyboard Navigation - For details on how the TileLayout keyboard navigation works, refer to the [Blazor TileLayout Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/tilelayout/keyboard-navigation). + For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview]({%slug accessibility-overview%}#keyboard-navigation) article. ## See Also + * [Blazor TileLayout Demos](https://demos.telerik.com/blazor-ui/tilelayout/overview) * [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%})