From 17c91906edf8625dfb283faa031ddac56e1712c2 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 12 Dec 2024 19:44:02 +0200 Subject: [PATCH] docs(common): Accessibility section revamp --- accessibility/accessibility-swatch.md | 41 ---- accessibility/compliance.md | 159 ++++++++++++--- accessibility/keyboard-navigation.md | 131 ------------- accessibility/overview.md | 112 +++++++++-- accessibility/wcag-section-508-wai-aria.md | 182 ------------------ .../accessibility/wai-aria-support.md | 96 +++++++++ .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../button/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../chart/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 11 +- .../chip/accessibility/wai-aria-support.md | 67 +++++++ .../accessibility/wai-aria-support.md | 75 ++++++++ .../accessibility/wai-aria-support.md | 13 +- .../accessibility/wai-aria-support.md | 14 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 14 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 12 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 12 +- .../accessibility/wai-aria-support.md | 12 +- .../accessibility/wai-aria-support.md | 16 +- .../dialog/accessibility/wai-aria-support.md | 11 +- .../drawer/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 84 ++++++++ .../accessibility/wai-aria-support.md | 11 +- .../editor/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 109 +++++++++++ .../filter/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 14 +- components/gantt/accessibility/overview.md | 2 +- .../gantt/accessibility/wai-aria-support.md | 17 +- components/grid/accessibility/overview.md | 2 +- .../grid/accessibility/wai-aria-support.md | 16 +- components/grid/overview.md | 2 +- .../listbox/accessibility/wai-aria-support.md | 86 +++++++++ .../accessibility/wai-aria-support.md | 11 +- .../accessibility/wai-aria-support.md | 11 +- .../menu/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 62 ++++++ .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 11 +- .../accessibility/wai-aria-support.md | 10 +- .../pager/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 13 +- .../accessibility/wai-aria-support.md | 154 +++++++++++++++ .../popover/accessibility/wai-aria-support.md | 76 ++++++++ .../accessibility/wai-aria-support.md | 11 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 12 +- .../sankey/accessibility/wai-aria-support.md | 78 ++++++++ .../accessibility/wai-aria-support.md | 12 +- .../accessibility/wai-aria-support.md | 11 +- .../slider/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- components/splitter/accessibility/overview.md | 2 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 168 ++++++++++++++++ .../stepper/accessibility/wai-aria-support.md | 10 +- .../switch/accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 11 +- .../textbox/accessibility/wai-aria-support.md | 11 +- .../tilelayout/accessibility/overview.md | 2 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../accessibility/wai-aria-support.md | 10 +- .../toolbar/accessibility/wai-aria-support.md | 10 +- .../tooltip/accessibility/wai-aria-support.md | 11 +- components/treelist/accessibility/overview.md | 2 +- .../accessibility/wai-aria-support.md | 14 +- components/treelist/overview.md | 2 +- components/treeview/accessibility/overview.md | 2 +- .../accessibility/wai-aria-support.md | 10 +- .../upload/accessibility/wai-aria-support.md | 79 ++++++++ components/window/accessibility/overview.md | 2 +- .../window/accessibility/wai-aria-support.md | 12 +- .../wizard/accessibility/wai-aria-support.md | 10 +- src-a11y/configs/aiprompt.aria.yml | 15 ++ src-a11y/configs/autocomplete.aria.yml | 8 +- src-a11y/configs/breadcrumb.aria.yml | 8 +- src-a11y/configs/button.aria.yml | 8 +- src-a11y/configs/buttongroup.aria.yml | 8 +- src-a11y/configs/calendar.aria.yml | 8 +- src-a11y/configs/carousel.aria.yml | 8 +- src-a11y/configs/chart.aria.yml | 8 +- src-a11y/configs/checkbox.aria.yml | 9 +- src-a11y/configs/chip.aria.yml | 14 ++ src-a11y/configs/chiplist.aria.yml | 14 ++ src-a11y/configs/chunkprogressbar.aria.yml | 9 +- src-a11y/configs/colorgradient.aria.yml | 8 +- src-a11y/configs/colorpalette.aria.yml | 8 +- src-a11y/configs/colorpicker.aria.yml | 12 +- src-a11y/configs/combobox.aria.yml | 8 +- src-a11y/configs/contextmenu.aria.yml | 8 +- src-a11y/configs/dateinput.aria.yml | 8 +- src-a11y/configs/datepicker.aria.yml | 8 +- src-a11y/configs/daterangepicker.aria.yml | 8 +- src-a11y/configs/datetimepicker.aria.yml | 8 +- src-a11y/configs/dialog.aria.yml | 9 +- src-a11y/configs/drawer.aria.yml | 8 +- src-a11y/configs/dropdownbutton.aria.yml | 14 ++ src-a11y/configs/dropdownlist.aria.yml | 8 +- src-a11y/configs/editor.aria.yml | 8 +- src-a11y/configs/filemanager.aria.yml | 15 ++ src-a11y/configs/filter.aria.yml | 8 +- src-a11y/configs/flatcolorpicker.aria.yml | 12 +- src-a11y/configs/gantt.aria.yml | 9 +- src-a11y/configs/grid.aria.yml | 8 +- src-a11y/configs/listbox.aria.yml | 14 ++ src-a11y/configs/listview.aria.yml | 9 +- src-a11y/configs/maskedtextbox.aria.yml | 9 +- src-a11y/configs/menu.aria.yml | 8 +- src-a11y/configs/multicolumncombobox.aria.yml | 14 ++ src-a11y/configs/multiselect.aria.yml | 8 +- src-a11y/configs/notification.aria.yml | 9 +- src-a11y/configs/numerictextbox.aria.yml | 8 +- src-a11y/configs/pager.aria.yml | 8 +- src-a11y/configs/pdfviewer.aria.yml | 9 +- src-a11y/configs/pivotgrid.aria.yml | 15 ++ src-a11y/configs/popover.aria.yml | 15 ++ src-a11y/configs/progressbar.aria.yml | 9 +- src-a11y/configs/radiogroup.aria.yml | 8 +- src-a11y/configs/rangeslider.aria.yml | 8 +- src-a11y/configs/sankey.aria.yml | 15 ++ src-a11y/configs/scheduler.aria.yml | 8 +- src-a11y/configs/signature.aria.yml | 9 +- src-a11y/configs/slider.aria.yml | 8 +- src-a11y/configs/splitbutton.aria.yml | 8 +- src-a11y/configs/splitter.aria.yml | 8 +- src-a11y/configs/spreadsheet.aria.yml | 15 ++ src-a11y/configs/stepper.aria.yml | 8 +- src-a11y/configs/switch.aria.yml | 8 +- src-a11y/configs/tabstrip.aria.yml | 8 +- src-a11y/configs/textarea.aria.yml | 9 +- src-a11y/configs/textbox.aria.yml | 9 +- src-a11y/configs/tilelayout.aria.yml | 8 +- src-a11y/configs/timepicker.aria.yml | 8 +- src-a11y/configs/togglebutton.aria.yml | 8 +- src-a11y/configs/toolbar.aria.yml | 8 +- src-a11y/configs/tooltip.aria.yml | 9 +- src-a11y/configs/treelist.aria.yml | 8 +- src-a11y/configs/treeview.aria.yml | 8 +- src-a11y/configs/upload.aria.yml | 14 ++ src-a11y/configs/window.aria.yml | 8 +- src-a11y/configs/wizard.aria.yml | 8 +- 150 files changed, 2230 insertions(+), 814 deletions(-) delete mode 100644 accessibility/accessibility-swatch.md delete mode 100644 accessibility/keyboard-navigation.md delete mode 100644 accessibility/wcag-section-508-wai-aria.md create mode 100644 components/aiprompt/accessibility/wai-aria-support.md create mode 100644 components/chip/accessibility/wai-aria-support.md create mode 100644 components/chiplist/accessibility/wai-aria-support.md create mode 100644 components/dropdownbutton/accessibility/wai-aria-support.md create mode 100644 components/filemanager/accessibility/wai-aria-support.md create mode 100644 components/listbox/accessibility/wai-aria-support.md create mode 100644 components/multicolumncombobox/accessibility/wai-aria-support.md create mode 100644 components/pivotgrid/accessibility/wai-aria-support.md create mode 100644 components/popover/accessibility/wai-aria-support.md create mode 100644 components/sankey/accessibility/wai-aria-support.md create mode 100644 components/spreadsheet/accessibility/wai-aria-support.md create mode 100644 components/upload/accessibility/wai-aria-support.md create mode 100644 src-a11y/configs/aiprompt.aria.yml create mode 100644 src-a11y/configs/chip.aria.yml create mode 100644 src-a11y/configs/chiplist.aria.yml create mode 100644 src-a11y/configs/dropdownbutton.aria.yml create mode 100644 src-a11y/configs/filemanager.aria.yml create mode 100644 src-a11y/configs/listbox.aria.yml create mode 100644 src-a11y/configs/multicolumncombobox.aria.yml create mode 100644 src-a11y/configs/pivotgrid.aria.yml create mode 100644 src-a11y/configs/popover.aria.yml create mode 100644 src-a11y/configs/sankey.aria.yml create mode 100644 src-a11y/configs/spreadsheet.aria.yml create mode 100644 src-a11y/configs/upload.aria.yml diff --git a/accessibility/accessibility-swatch.md b/accessibility/accessibility-swatch.md deleted file mode 100644 index 63d65e8131..0000000000 --- a/accessibility/accessibility-swatch.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Ocean Blue Accessibility Swatch -page_title: Default Ocean Blue Accessibility Swatch -description: Learn about the Default Ocean Blue Accessibility Swatch in the Telerik UI for Blazor suite. This is a theme color variation with enhanced accessibility that complies with accessibility standards. -slug: themes-accessibility-swatch -tags: telerik, blazor, accessibility, theme, swatch -published: True -position: 7 ---- - -# Ocean Blue Accessibility Swatch - -The [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) sections [1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) define contrast ratios for accessibility compliance. The *Default Ocean Blue A11y* [theme swatch]({%slug themes-overview%}#basics) in Telerik UI for Blazor conforms to WCAG Level AA, which requires contrast ratios of at least: - -* 4.5:1 for normal text -* 3:1 for large text - - -## Testing the Accessibility Swatch - -To preview and test the Default Ocean Blue A11y swatch, visit the [Telerik UI for Blazor live demos](https://demos.telerik.com/blazor-ui/grid/overview). Enable the swatch from the **Change Theme** dropdown above any of the examples. - -The Default Ocean Blue A11y swatch is built on top of the Default Ocean Blue swatch. The main difference is that the Ocean Blue A11y swatch has high-contrast focus indicators to comply with WCAG requirements. - - -## Using the Accessibility Swatch - -You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-overview%}#swatch) starting from the following component and theme versions: - -* [Telerik UI for Blazor version 4.0.1](https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-4-0-1) -* [Themes version 6.0.3](https://github.com/telerik/kendo-themes/releases/tag/v6.0.3) - -Check section [Theme Version Compatibility]({%slug themes-overview%}#compatibility-and-maintenance) for more information about how to align Telerik UI for Blazor versions with theme versions. - -> An existing limitation is that the ColorPalette component fails WCAG success criterion 1.4.11. "Non-text contrast for the focus indicator on its items". - - -## See Also - -* [Accessibility Overview]({%slug accessibility-overview%}) -* [Component Accessibility Compliance]({%slug accessibility-standards%}#accessibility-compliance-components-table) diff --git a/accessibility/compliance.md b/accessibility/compliance.md index cd8e9edce6..bb5c605e21 100644 --- a/accessibility/compliance.md +++ b/accessibility/compliance.md @@ -5,35 +5,144 @@ description: Compliance with the accessibility standards and requirements in the slug: accessibility-compliance tags: telerik,blazor,accessibility,standards,compliance published: True -position: 4 +position: 10 +previous_url: /accessibility/wcag-section-508-wai-aria --- # Accessibility Standards Compliance -This article lists the compliance with the various accessibility standards that the Telerik UI for Blazor components provide. - -For details on the keyboard support, see the [Keyboard Navigation]({%slug accessibility-keyboard-navigation%}) article. - -All components implement the required WAI-ARIA attributes without the need for any extra configuration. - -Due to the complexity of some of the components in the suite, we sometimes run into scenarios not covered by the WAI-ARIA specification. In those cases, we tap into the web development accessibility know-how of the rest of the Progress organization, including feedback from accessibility-minded users, for expertise and feedback based on 10 years of creating web component libraries. This knowledge-sharing across internal teams and clients helps us ensure that UI for Blazor can reach a certain level of accessibility compliance even with its most advanced components. - -This article will be updated with details on the Section 508 and WCAG 2.2 compatibility levels. - - - - - - - - -The Telerik UI for Blazor components are highly extensible and customizable. This means that, depending on the level of customization applied, you may be introducing rendering that is not accessible. Therefore, it is recommended that you test any modifications and templates you create to ensure the components still meet the desired level of accessibility standards. Additionally, be mindful of components working with custom input (images, text, HTML content, and so on) and make sure your content is accessible, too. - - +This article lists the accessibility compliance of the Telerik UI for Blazor components. + +## Accessibility Conformance Report + +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. + +## Compliance Table + +The table below specifies the level of WCAG 2.2 compliance of each Telerik component for Blazor. + +* The *Keyboard Navigation* column links to component-specific online demos or keyboard shortcut lists. For general information on how the keyboard support works, see the [Keyboard Navigation]({%slug accessibility-overview%}#keyboard-navigation) section. +* The *Accessibility Documentation* column links to component-specific details and information about WAI-ARIA attributes. +* For information about **Section 508** of the US Rehabilitation Act, the **European Accessibility Act** in the EU, or any other national accessibility legislation, see section [Legal and Technical Compliance]({%slug accessibility-overview%}#legal-and-technical-compliance). + +Also check the [notes below the table](#accessibility-compliance-notes). + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Component | WCAG 2.2 | Keyboard Navigation | Accessibility Documentation | +| --- | --- | --- | --- | +| AIPrompt | AA | [Enhanced](https://demos.telerik.com/blazor-ui/aiprompt/overview) | [Documentation]({%slug aiprompt-wai-aria-support%}) | +| AppBar | N/A | N/A | N/A | +| ArcGauge | AA | N/A | N/A | +| AutoComplete | AA | [Enhanced](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation) | [Documentation]({%slug autocomplete-wai-aria-support%}) | +| Avatar | AA | N/A | N/A | +| Badge | N/A | N/A | N/A | +| Barcode | N/A | N/A | N/A | +| Breadcrumb | AAA | [Enhanced](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation) | [Documentation]({%slug breadcrumb-wai-aria-support%}) | +| 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 | +| 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%}) | +| Chip | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chip/keyboard-navigation) | [Documentation]({%slug chip-wai-aria-support%}) | +| ChipList | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chiplist/keyboard-navigation) | [Documentation]({%slug chiplist-wai-aria-support%}) | +| ChunkProgressBar | AA | N/A | [Documentation]({%slug chunkprogressbar-wai-aria-support%}) | +| CircularGauge | N/A | N/A | N/A | +| ColorGradient | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) | [Documentation]({%slug colorgradient-wai-aria-support%}) | +| ColorPalette | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation) | [Documentation]({%slug colorpalette-wai-aria-support%}) | +| ColorPicker | AA | [Enhanced](https://demos.telerik.com/blazor-ui/colorpicker/overview)
Also see [ColorGradient](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) and [ColorPalette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation). | [Documentation]({%slug colorpicker-wai-aria-support%}) | +| ComboBox | AA | [Enhanced](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation) | [Documentation]({%slug combobox-wai-aria-support%}) | +| ContextMenu | AA | [Enhanced](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation) | [Documentation]({%slug contextmenu-wai-aria-support%}) | +| DateInput | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation) | [Documentation]({%slug dateinput-wai-aria-support%}) | +| DatePicker | AA | [Enhanced](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation) | [Documentation]({%slug datepicker-wai-aria-support%}) | +| DateRangePicker | AA | [Enhanced](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation) | [Documentation]({%slug daterangepicker-wai-aria-support%}) | +| DateTimePicker | AA | [Enhanced](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation) | [Documentation]({%slug datetimepicker-wai-aria-support%}) | +| Dialog | AA | [Enhanced](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation) | [Documentation]({%slug dialog-wai-aria-support%}) | +| Drawer | AA | [Enhanced](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation) | [Documentation]({%slug drawer-wai-aria-support%}) | +| DropDownButton | AA | [Enhanced](https://demos.telerik.com/blazor-ui/dropdownbutton/keyboard-navigation) | [Documentation]({%slug dropdownbutton-wai-aria-support%}) | +| 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%}) | +| 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 | +| 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 | +| LinearGauge | AA | N/A | N/A | +| ListBox | AA | [Enhanced](https://demos.telerik.com/blazor-ui/listbox/keyboard-navigation) | [Documentation]({%slug listbox-wai-aria-support%}) | +| ListView | AAA | [Enhanced](https://demos.telerik.com/blazor-ui/listview/keyboard-navigation) | [Documentation]({%slug listview-wai-aria-support%}) | +| Loader | N/A | N/A | N/A | +| LoaderContainer | N/A | N/A | N/A | +| Map | N/A | [Enhanced](https://demos.telerik.com/blazor-ui/map/overview) | N/A | +| MaskedTextbox | AA | [Standard](https://demos.telerik.com/blazor-ui/maskedtextbox/overview) | [Documentation]({%slug maskedtextbox-wai-aria-support%}) | +| MediaQuery | N/A | N/A | N/A | +| Menu | AA | [Enhanced](https://demos.telerik.com/blazor-ui/menu/keyboard-navigation) | [Documentation]({%slug menu-wai-aria-support%}) | +| MultiColumnComboBox | N/A | [Enhanced](https://demos.telerik.com/blazor-ui/multicolumncombobox/keyboard-navigation) | [Documentation]({%slug multicolumncombobox-wai-aria-support%}) | +| MultiSelect | AA | [Enhanced](https://demos.telerik.com/blazor-ui/multiselect/keyboard-navigation) | [Documentation]({%slug multiselect-wai-aria-support%}) | +| 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 | +| 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%}) | +| Popover | AA | [Standard](https://demos.telerik.com/blazor-ui/popover/overview) | [Documentation]({%slug popover-wai-aria-support%}) | +| Popup | AA | N/A | N/A | +| QRCode | N/A | N/A | N/A | +| 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 | +| 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 | +| 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%}) | +| Spreadsheet | AA | [Enhanced](https://demos.telerik.com/blazor-ui/spreadsheet/overview) | [Documentation]({%slug spreadsheet-wai-aria-support%}) | +| StackLayout | N/A | N/A | N/A | +| Stepper | AA | [Enhanced](https://demos.telerik.com/blazor-ui/stepper/keyboard-navigation) | [Documentation]({%slug stepper-wai-aria-support%}) | +| StockChart | AA | [Enhanced](https://demos.telerik.com/blazor-ui/stockchart/overview) | N/A | +| SvgIcon | N/A | N/A | N/A | +| Switch | AA | [Enhanced](https://demos.telerik.com/blazor-ui/switch/keyboard-navigation) | [Documentation]({%slug switch-wai-aria-support%}) | +| 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%}) | +| 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%}) | +| 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%}) | +| ValidationMessage | AA | N/A | TBA | +| ValidationTooltip | AA | N/A | TBA | +| ValidationSummary | AA | N/A | TBA | +| Window | AA | [Enhanced](https://demos.telerik.com/blazor-ui/window/keyboard-navigation) | [Documentation]({%slug window-wai-aria-support%}) | +| Wizard | AA | [Enhanced](https://demos.telerik.com/blazor-ui/wizard/keyboard-navigation) | [Documentation]({%slug wizard-wai-aria-support%}) | + +## Accessibility Compliance Notes + +The information in the compliance table above is subject to the following considerations: + +* All components implement the required WAI-ARIA attributes without the need for any extra configuration. Some components may provide parameters that render additional optional WAI-ARIA attributes, for example, `aria-label` or `aria-describedby`. +* The compliance levels are achievable with the [*Default Ocean Blue A11y* theme swatch]({%slug accessibility-overview%}#color-contrast) or any other [custom theme swatch]({%slug themes-customize%}) that provides the minimum required color contrast. +* The accessibility and compliance of some components may depend on the enabled features. In such cases, the compliance table information is based on the default component configuration. +* Component templates introduce custom markup that may not be accessible. Test any modifications to ensure the web content still meets the desired level of accessibility compliance. Be mindful of components that work with user input such as images, text, or HTML content. +* Due to the complexity of some components, there are scenarios that are not covered by the WAI-ARIA specification. ## See Also - * [Accessibility Overview]({%slug accessibility-overview%}) - * [Globalization Overview]({%slug globalization-overview%}) +* [Accessibility Overview]({%slug accessibility-overview%}) +* [Globalization Overview]({%slug globalization-overview%}) diff --git a/accessibility/keyboard-navigation.md b/accessibility/keyboard-navigation.md deleted file mode 100644 index c8fee231c9..0000000000 --- a/accessibility/keyboard-navigation.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Keyboard Navigation -page_title: Keyboard Navigation -description: Support for keyboard navigation in the Telerik UI for Blazor suite and components. -slug: accessibility-keyboard-navigation -tags: telerik,blazor,accessibility,keyboard,navigation,support -published: True -position: 2 ---- - -# Keyboard Navigation - -The Telerik UI for Blazor components support keyboard navigation and the end users can use the keyboard to walk through them and invoke actions such as clicking buttons, paging the Grid, and so on. - -## How it Works - -Generally, to focus a component, use the `Tab` key as the keyboard support of the page follows the normal flow of the content. Once inside a component, you can use specific keyboard shortcuts to trigger specific actions such as using the `Arrow` keys to focus different cells in the Grid, or the `Enter` key to click a button. - -Normally, users can use the keyboard to navigate only to HTML links, buttons, and form controls. The Telerik UI for Blazor library has gone to the next level and the components it delivers are focusable. In this way, even though the components represent complex structures, users can interact with them too. - -The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, the focus has to follow the visual horizontal and vertical flow of the page. For example, left-to-right and top-to-bottom, header first followed by the main and, then, page navigation. - -Most of the components in the library represent a single `Tab` stop. Once users reach and focus a component, they can leave it with a single tab. If the component is more complex, users can walk though its inside elements with the `Arrow` keys, for example, Grid cells, Menu items, Toolbar buttons. Some complex components can accommodate multiple other components. For example, the Grid can host a Toolbar and a Pager. In this case, you can tab to move the focus from one nested component to another. - -## Types of Keyboard Support - -The Telerik UI for Blazor components may provide enhanced, standard, or no keyboard support. - -* *Standard keyboard support* implies similar keyboard navigation capabilities as standard HTML elements. For example, the Button components support `Enter` and `Space` for clicking them. All components with standard keyboard support are reachable through the `Tab` key and provide focus styles. -* *Enhanced keyboard support* builds on top of the standard key combinations and provides additional built-in shortcuts for improved flexibility and user experience. -* The components with no keyboard support serve a purely visualization purpose, are just content containers, provide no interaction, or provide only mouse and touch interaction by design. - -## Right-to-Left Support - -When the [right-to-left direction is enabled]({%slug rtl-support%}), the keyboard shortcuts for the components that support keyboard navigation remain unchanged except for the `Left arrow` and `Right arrow` keys—their functionality is reversed to follow the right-to-left direction. - - -## Keyboard Support per Component - -The following table lists the available Telerik UI for Blazor components with the type of keyboard support they provide. To see the combinations in action, click the desired component to see its keyboard navigation demo. - -| Component | Keyboard Navigation | Notes | -| --- | --- | --- | -| ArcGauge | - | | -| [AutoComplete](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation) | **Enhanced** | | -| [Breadcrumb](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation) | **Enhanced** | | -| [Button](https://demos.telerik.com/blazor-ui/button/keyboard-navigation) | Standard | | -| [ButtonGroup](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation) | Standard | | -| [Calendar](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation) | **Enhanced** | | -| [Carousel](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation) | **Enhanced** | | -| [Chart](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation) | **Enhanced** | | -| [CheckBox](https://demos.telerik.com/blazor-ui/checkbox/overview) | Standard | | -| [Chip](https://demos.telerik.com/blazor-ui/chip/keyboard-navigation) | **Enhanced** | | -| [ChipList](https://demos.telerik.com/blazor-ui/chiplist/keyboard-navigation) | **Enhanced** | | -| CircularGauge | - | | -| [ColorGradient](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) | **Enhanced** | | -| [ColorPalette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation) | **Enhanced** | | -| [ColorPicker](https://demos.telerik.com/blazor-ui/colorpicker/overview) | **Enhanced** | See also the [ColorGradient](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) and [ColorPalette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation). | -| [ComboBox](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation) | **Enhanced** | | -| [ContextMenu](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation) | **Enhanced** | | -| [DateInput](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation) | **Enhanced** | | -| [DatePicker](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation) | **Enhanced** | | -| [DateRangePicker](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation) | **Enhanced** | | -| [DateTimePicker](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation) | **Enhanced** | | -| [Dialog](https://demos.telerik.com/blazor-ui/dialog/overview) | **Enhanced** | Tab to reach and use its buttons. The Dialog restricts the focus within itself during tabbing. | -| [Drawer](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation) | **Enhanced** | | -| [DropDownButton](https://demos.telerik.com/blazor-ui/dropdownbutton/keyboard-navigation) | **Enhanced** | | -| [DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation) | **Enhanced** | | -| DropZone | - | | -| [Editor](https://demos.telerik.com/blazor-ui/editor/keyboard-navigation) | **Enhanced** | | -| [FileManager](https://demos.telerik.com/blazor-ui/filemanager/overview) | **Enhanced** | Tab to focus the different nested components. Keyboard navigation for the file list is not available yet. | -| [FileSelect](https://demos.telerik.com/blazor-ui/fileselect/keyboard-navigation) | **Enhanced** | | -| [Filter](https://demos.telerik.com/blazor-ui/filter/keyboard-navigation) | **Enhanced** | | -| [FlatColorPicker](https://demos.telerik.com/blazor-ui/flatcolorpicker/overview) | **Enhanced** | Tab to focus the different nested components. See also the [ColorGradient](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) and [ColorPalette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation). | -| FloatingLabel | - | | -| [Form](https://demos.telerik.com/blazor-ui/form/overview) | Standard | | -| [Gantt](https://demos.telerik.com/blazor-ui/gantt/overview) | **Enhanced** | Keyboard navigation is available for the nested [TreeList](https://demos.telerik.com/blazor-ui/treelist/keyboard-navigation). | -| [Grid](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) | **Enhanced** | Set `Navigable="true"` | -| GridLayout | - | | -| Icons | - | | -| LinearGauge | - | | -| [ListView](https://demos.telerik.com/blazor-ui/listview/keyboard-navigation) | **Enhanced** | | The built-in [Pager component provides keyboard navigation](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation). | -| Loader | - | | -| LoaderContainer | - | | -| [Map](https://demos.telerik.com/blazor-ui/map/overview) | **Enhanced** | | -| [MaskedTextBox](https://demos.telerik.com/blazor-ui/maskedtextbox/overview) | Standard | | -| MediaQuery | - | | -| [Menu](https://demos.telerik.com/blazor-ui/menu/keyboard-navigation) | **Enhanced** | | -| [MultiColumnComboBox](https://demos.telerik.com/blazor-ui/multicolumncombobox/keyboard-navigation) | **Enhanced** | | -| [MultiSelect](https://demos.telerik.com/blazor-ui/multiselect/keyboard-navigation) | **Enhanced** | | -| Notification | - | | -| [NumericTextBox](https://demos.telerik.com/blazor-ui/numerictextbox/keyboard-navigation) | **Enhanced** | | -| [Pager](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation) | **Enhanced** | | -| [PanelBar](https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation) | **Enhanced** | | -| [PdfViewer](https://demos.telerik.com/blazor-ui/pdfviewer/overview) | **Enhanced** | Tab to focus the different components in the toolbar. The built-in [Pager provides keyboard navigation](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation). | -| PivotGrid | - | Not Supported
(upcoming support) | -| ProgressBar | - | | -| QRCode | - | | -| RadialGauge | - | | -| [RadioGroup](https://demos.telerik.com/blazor-ui/radiogroup/keyboard-navigation) | Standard | | -| [RangeSlider](https://demos.telerik.com/blazor-ui/rangeslider/keyboard-navigation) | **Enhanced** | | -| [Scheduler](https://demos.telerik.com/blazor-ui/scheduler/keyboard-navigation) | **Enhanced** | | -| Signature | - | | -| Skeleton | - | | -| [Slider](https://demos.telerik.com/blazor-ui/slider/keyboard-navigation) | **Enhanced** | | -| [SplitButton](https://demos.telerik.com/blazor-ui/splitbutton/keyboard-navigation) | **Enhanced** | | -| [Splitter](https://demos.telerik.com/blazor-ui/splitter/keyboard-navigation) | **Enhanced** | | -| StackLayout | - | | -| [Stepper](https://demos.telerik.com/blazor-ui/stepper/keyboard-navigation) | **Enhanced** | | -| StockChart | - | | -| [Switch](https://demos.telerik.com/blazor-ui/switch/keyboard-navigation) | **Enhanced** | | -| [TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/keyboard-navigation) | **Enhanced** | | -| [TextArea](https://demos.telerik.com/blazor-ui/textarea/overview) | Standard | | -| [TextBox](https://demos.telerik.com/blazor-ui/textbox/overview) | Standard | | -| TileLayout | - | | -| [TimePicker](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation) | **Enhanced** | | -| [ToggleButton](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation) | **Enhanced** | | -| [ToolBar](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation) | **Enhanced** | | -| Tooltip | - | | -| [TreeList](https://demos.telerik.com/blazor-ui/treelist/keyboard-navigation) | **Enhanced** | | Set `Navigable="true"` | -| [TreeView](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation) | **Enhanced** | | -| [Upload](https://demos.telerik.com/blazor-ui/upload/keyboard-navigation) | **Enhanced** | | -| Validation | - | | -| [Window](https://demos.telerik.com/blazor-ui/window/keyboard-navigation) | **Enhanced** | | -| [Wizard](https://demos.telerik.com/blazor-ui/wizard/keyboard-navigation) | **Enhanced** | | - -## See Also - -* [Accessibility Overview]({%slug accessibility-overview%}) -* [Globalization Overview]({%slug globalization-overview%}) -* [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) diff --git a/accessibility/overview.md b/accessibility/overview.md index 702ed4ee13..cfda31df07 100644 --- a/accessibility/overview.md +++ b/accessibility/overview.md @@ -5,26 +5,114 @@ description: Accessibility features in the Telerik UI for Blazor suite. slug: accessibility-overview tags: telerik,blazor,accessibility,overview published: True -position: 0 +position: 1 +previous_url: /accessibility/keyboard-navigation,/accessibility/accessibility-swatch --- # Blazor Accessibility Overview -Websites and applications are accessible when they provide full control over their features by enabling users with disabilities to access their content through assistive technologies or keyboard navigation. +Web applications are accessible when they provide control over their features to users with physical or situational disabilities. These disabilities can include various categories, for example, user who are: -Accessibility consists of several aspects: +* Unable to perceive content visually or auditory. +* Unable to use a mouse or a keyboard for any reason. +* Consuming electronic content through assistive technologies. -* [The WCAG, Section 508 and WAI-ARIA standards]({%slug accessibility-standards%}) -* [Keyboard Navigation]({%slug accessibility-keyboard-navigation%}) -* [Globalization]({%slug globalization-overview%}) +>tip Accessibility compliance is a strategic and ongoing commitment for Telerik UI for Blazor. -### Voluntary Product Accessibility Template +## Legal and Technical Compliance -A [Voluntary Product Accessibility Template (VPAT®)](https://www.section508.gov/sell/vpat/) is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet (conform to) the Revised 508 Standards for IT accessibility. +Accessibility compliance can be considered from a legal and technical perspective, but these ultimately merge. Different countries have different regulations about web content accessibility compliance, for example: -> You can review and download the latest version of the Telerik UI for Blazor VPAT document [here](./assets/BlazorVPAT.doc). +* Section 508 of the US Rehabilitation Act +* The EU European Accessibility Act -## See Also +The national regulations normally share the following characteristics: - * [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) - * [Default Ocean Blue Accessibility Swatch]({%slug themes-accessibility-swatch%}) +* The legal requirements boil down to common technical standards such as a specific version of [WCAG](#web-context-accessibility-guidelines). +* The national legislations are slower to adopt newer accessibility standards, compared to Telerik UI for Blazor. + +As a result, Telerik UI for Blazor does not review or aim to comply with specific national accessibility legislations. The components [target compliance with the latest official standard WCAG 2.2]({%slug accessibility-compliance%}#compliance-table), which is enough to claim compliance with national legal requirements. + +From technical point of view, Telerik UI for Blazor achieves accessibility through the following features: + +* [Compliance with WCAG success criteria](#web-context-accessibility-guidelines) +* [WAI-ARIA attributes](#wai-aria) +* [Keyboard navigation](#keyboard-navigation) +* [Color contrast](#color-contrast) +* [Best practices in component development and testing](#development-practices) + +## Web Context Accessibility Guidelines + +Web Context Accessibility Guidelines (WCAG) is an international standard that specifies how to make web content more accessible to people with disabilities. The guidelines are organized under four principles: perceivable, operable, understandable, and robust. + +Telerik UI for Blazor targets WCAG version 2.2. + +## WAI-ARIA + +WAI-ARIA provides a framework for adding HTML attributes to identify features for user interaction, how they relate to each other, and their current state. The WAI-ARIA standard defines HTML element roles and states, which help with dynamic content and advanced user interface controls. + +Telerik UI for Blazor targets WAI-ARIA version 1.2. The [Compliance Table]({%slug accessibility-compliance%}#compliance-table) provides links to documentation articles, which describe the WAI-ARIA attributes of each applicable component. + +## Keyboard Navigation + +Normally, users can use the keyboard only to focus and navigate to HTML links, buttons, and form inputs. Telerik UI for Blazor has gone to the next level and provides focusable and navigable components, even though they represent complex structures. Users can use the keyboard to invoke actions such as opening DropDownLists, sorting Grid columns, resizing Splitter panes, and so on. Keyboard accessibility is part of WCAG. + +The keyboard support follows the normal flow of the web page content. Use the `Tab` key to focus a component and then use specific keyboard shortcuts to trigger specific actions. For example, use the arrow keys to move across cells in the Grid or hit `Enter` to invoke a button click. + +Most components represent a single tab stop. Once users reach and focus a component, they can leave it with a single `Tab` key press. If the component is more complex, users can walk through its inner elements with the arrow keys, for example, Grid cells, Menu items, Toolbar buttons. Some complex components can accommodate multiple other components. For example, the Grid can host a Toolbar and a Pager. In this case, tab to move the focus from one nested component to another. + +### Types of Keyboard Support + +The Telerik UI for Blazor components may provide enhanced, standard, or no keyboard support. See the [compliance table]({%slug accessibility-compliance%}#compliance-table) for component-specific information. + +* *Standard keyboard support* implies similar keyboard navigation capabilities as standard HTML elements. For example, the Button components support `Enter` and `Space` for triggering clicks. All components with standard keyboard support are reachable through the `Tab` key and provide focus styles. +* *Enhanced keyboard support* builds on top of the standard key combinations and provides additional built-in shortcuts for improved flexibility and user experience. +* Components with no keyboard support may serve a purely visual purpose, or be containers with no available interaction. + +### Right-to-Left Support + +When using [right-to-left text direction]({%slug rtl-support%}), the keyboard shortcuts for the components remain unchanged. The left and right arrow keys reverse their behavior to be consistent with the RTL mode. + +## Color Contrast + +WCAG sections 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) define contrast ratios for accessibility compliance. The built-in [*Default Ocean Blue A11y* theme swatch](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/swatches/#ocean-blue-accessibility-swatch) in Telerik UI for Blazor conforms to WCAG Level AA, except success criterion 1.4.11 Non-text Contrast in the ColorPalette component. + +You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-overview%}#swatch) starting from the following component and theme versions: + +* [Telerik UI for Blazor version 4.0.1](https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-4-0-1) +* [Themes version 6.0.3](https://github.com/telerik/kendo-themes/releases/tag/v6.0.3). Check section [Theme Version Compatibility]({%slug themes-overview%}#compatibility-and-maintenance) on how to align Telerik UI for Blazor versions with theme versions. + +## Development Practices + +When implementing a Telerik Blazor component, the team: + +* Benefits from the know-how of dedicated accessibility professionals at Progress Software. +* Follows the WCAG standard and WAI-ARIA specification to lay the right foundation for the component accessibility. +* Implements automated unit tests to guarantee accessible and semantically correct rendering. +* Localizes messages for labels, titles, and other elements. +* Manually tests the component with regard to its keyboard navigation and usage with screen readers. + +### Screen Readers + +There are a lot of existing screen readers, for example: + +* Apple VoiceOver +* JAWS +* Microsoft Narrator +* NVDA +* and many others + +Each of them provides a different level of interoperability with the different web browsers, and some combinations may handle dynamic web content more effectively. Telerik UI for Blazor aims to comply with official accessibility standards and is not able to provide built-in fixes for missing features or non-standard behaviors in assistive technologies. + +Telerik UI for Blazor components are tested in the following environments: + +| Browser | Screen Reader | +| --- | --- | +| Chrome | JAWS | +| Microsoft Edge | JAWS | +| Firefox | NVDA | + +## Next Steps + +* [Review Telerik UI for Blazor Accessibility Compliance Table]({%slug accessibility-compliance%}#compliance-table) +* [Download Telerik UI for Blazor Accessibility Conformance Report (ACR)]({%slug accessibility-compliance%}#accessibility-conformance-report) diff --git a/accessibility/wcag-section-508-wai-aria.md b/accessibility/wcag-section-508-wai-aria.md deleted file mode 100644 index 033b09edba..0000000000 --- a/accessibility/wcag-section-508-wai-aria.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: WCAG, Section 508, WAI-ARIA -page_title: WCAG, Section 508, WAI-ARIA -description: Accessibility standards - WCAG, Section 508, WAI-ARIA. -slug: accessibility-standards -tags: telerik,blazor,accessibility,standards -published: True -position: 1 ---- - -# WCAG, Section 508, WAI-ARIA - -There are several standards, policies and principles that govern how accessible applications and components are created. This article offers an overview of them. For a list of the accessibility compliance levels support provided by the Telerik UI for Blazor components see the [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) article. - -In this article you will find information on the general topics of accessibility: - - -* [Standards and Policies](#standards-and-policies) - * [Section 508](#section-508) - * [W3C Web Content Accessibility Guidelines (WCAG) 2.2](#w3c-web-content-accessibility-guidelines-wcag-2-2) -* [Technical Specifications](#technical-specifications) - * [WAI-ARIA](#wai-aria) - * [Keyboard Navigation](#keyboard-navigation) -* [Accessibility Compliance Components Table](#accessibility-compliance-components-table) - - -## Standards and Policies - -Accessible websites and applications normally comply with some or all of the following standards: - -* [Section 508](#section-508) -* [W3C Web Content Accessibility Guidelines (WCAG) 2.2](#w3c-web-content-accessibility-guidelines-wcag-2-2) - -### Section 508 - -Since 1998, Section 508 is part of the [U.S. Rehabilitation Act of 1973](https://en.wikipedia.org/wiki/Rehabilitation_Act_of_1973). Section 508 represents a set of accessibility standards which were defined by the U.S. General Services Administration (GSA) and which initially applied to Federal agencies only with the aim to ensure that their electronic and information technology is accessible to people with disabilities. - -[In 2017, Section 508 was reorganized](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/overview-of-the-final-rule) to meet and reflect recent communication technology innovations and nowadays the Section 508 guidelines impact not only all U.S. Federal agencies, but also affect any company which does business with a Federal agency. Such companies include vendors, private contractors, financial industry, healthcare and legal organizations, and partners of those agencies which operate in the United States or abroad. - -For more information, refer to: - -* [Rehabilitation Act of 1973 Section 508 (Latest Amendment)](https://www.access-board.gov/the-board/laws/rehabilitation-act-of-1973#508) -* [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) - - -### W3C Web Content Accessibility Guidelines (WCAG) 2.2 - -The Web Content Accessibility Guidelines (WCAG) which are set by the World Wide Web Consortium (W3C) define recommendations for making web content accessible to people with physical and cognitive disabilities. WCAG defines accessibility principles with their respective success criteria. Depending on the implemented success criteria by a web application, the WCAG provide the A, `AA`, and AAA levels of accessibility conformance. - -For more information, refer to: - -* [WCAG 2 Quick Reference Guide](https://www.w3.org/WAI/WCAG21/quickref/) -* [WCAG 2.2 Guidelines](https://www.w3.org/TR/WCAG22) -* [Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements) -* [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) - - -## Technical Specifications - -* [WAI-ARIA](#wai-aria) -* [Keyboard navigation](#keyboard-navigation) - -### WAI-ARIA - -WAI-ARIA is a set of technical specifications which were developed by the W3C and which provide the semantics for the assistive technologies to access and interpret web content and web applications. The WAI-ARIA recommendations (standards) divide the semantics into roles and into states and properties which those roles support. For example, a [`checkbox` role](https://www.w3.org/TR/wai-aria-1.1/#checkbox) supports the [`aria-checked`](https://www.w3.org/TR/wai-aria-1.1/#aria-checked) state which indicates whether a checkbox, radio button, or a similar UI element is checked. - -The WAI-ARIA framework targets web developers who create web applications by using AJAX, scripting, and other rich application techniques. - -For more information, refer to: - -* [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria-1.1/) -* [WAI-ARIA Role Definitions](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) -* [WAI-ARIA State and Property Definitions](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) -* [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) - -### Keyboard Navigation - -By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page. For example, left to right and top to bottom, header first followed by the main and then the page navigation. - -[Keyboard accessibility](https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible) is a category under the [WCAG Operable principle](https://www.w3.org/WAI/WCAG21/quickref/#principle2). - -In WCAG 2.2, the keyboard accessible category provides the following success criteria: - -* [Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) -* [No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) -* [Keyboard (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#keyboard-no-exception) -* [Character Key Shortcuts](https://www.w3.org/WAI/WCAG21/quickref/#character-key-shortcuts) - -See the [Keyboard Support in Telerik UI for Blazor]({%slug accessibility-keyboard-navigation%}) article for more details on using the Telerik components with the keyboard. - -> The described level of compliance in the table below is achievable with the [**Ocean Blue Sass Swatch**]({%slug themes-accessibility-swatch%}) and the **Default Ocean Blue A11Y**. - -### Accessibility Compliance Components Table -The following table lists the Section 508 and WCAG 2 compliance levels of support for the Blazor UI components. - -|Component |508|WCAG 2.2| Accessibility Example | Accessibility Documentation | -|:--- |:---|:---|:---|:--- -|`AutoComplete`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation) | [Documentation]({%slug autocomplete-wai-aria-support%}) | -|`Barcodes`|`No`|`n/a`| `n/a` | `n/a` | -|`Breadcrumb`|`Yes`|`AAA`| [Demo](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation) | [Documentation]({%slug breadcrumb-wai-aria-support%}) | -|`Button`|`Yes`|`AAA`| [Demo](https://demos.telerik.com/blazor-ui/button/keyboard-navigation) | [Documentation]({%slug button-wai-aria-support%}) | -|`ButtonGroup`|`Yes`|`AAA`| [Demo](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation) | [Documentation]({%slug buttongroup-wai-aria-support%}) | -|`Calendar`|`Yes`|`AAA`| [Demo](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation) | [Documentation]({%slug calendar-wai-aria-support%}) | -|`Card`|`No`|`n/a`| `n/a` | `n/a` | -|`Carousel`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation) | [Documentation]({%slug carousel-wai-aria-support%}) | -|`Charts`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation) | Documentation | -|`CheckBox`|`Yes`|`AA`| `n/a` | [Documentation]({%slug checkbox-wai-aria-support%}) | -|`ChunkProgressBar`|`Yes`|`AA`| `n/a` | [Documentation]({%slug chunkprogressbar-wai-aria-support%}) | -|`ColorGradient`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) | [Documentation]({%slug colorgradient-wai-aria-support%}) | -|`ColorPalette`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation) | [Documentation]({%slug colorpalette-wai-aria-support%}) | -|`ColorPicker`|`Yes`|`AA`| `n/a` | [Documentation]({%slug colorpicker-wai-aria-support%}) | -|`ComboBox`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation) | [Documentation]({%slug combobox-wai-aria-support%}) | -|`Context Menu`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation) | [Documentation]({%slug contextmenu-wai-aria-support%}) | -|`Date Input`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation) | [Documentation]({%slug dateinput-wai-aria-support%}) | -|`Date Picker`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation) | [Documentation]({%slug datepicker-wai-aria-support%}) | -|`DateRange Picker`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation) | [Documentation]({%slug daterangepicker-wai-aria-support%}) | -|`DateTime Picker`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation) | [Documentation]({%slug datetimepicker-wai-aria-support%}) | -|`Dialog`|`Yes`|`AA`| `n/a` | [Documentation]({%slug dialog-wai-aria-support%}) | -|`Drawer`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation) | [Documentation]({%slug drawer-wai-aria-support%}) | -|`DropDownList`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation) | [Documentation]({%slug dropdownlist-wai-aria-support%}) | -|`Editor`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/editor/keyboard-navigation) | [Documentation]({%slug editor-wai-aria-support%}) | -|`FileManager`|`No`|`n/a`| `n/a` | `n/a` | -|`FileSelect`|`No`|`n/a`| `n/a` | `n/a` | -|`Filter`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/filter/keyboard-navigation) | [Documentation]({%slug filter-wai-aria-support%}) | -|`FlatColorPicker`|`Yes`|`AA`| `n/a` | [Documentation]({%slug flatcolorpicker-wai-aria-support%}) | -|`FloatingLabel`|`No`|`n/a`| `n/a` | `n/a` | -|`Form`|`No`|`n/a`| `n/a` | `n/a` | -|`Gantt`|`Yes`|`AA`| `n/a` | [Documentation]({%slug gantt-wai-aria-support%}) | -|`Gauges`|`No`|`n/a`| `n/a` | `n/a` | -|`Grid`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) | [Documentation]({%slug grid-wai-aria-support%}) | -|`Grid Layout`|`No`|`n/a`| `n/a` | `n/a` | -|`ListView`|`Yes`|`AAA`| [Demo](https://demos.telerik.com/blazor-ui/listview/keyboard-navigation) | [Documentation]({%slug listview-wai-aria-support%}) | -|`Loader`|`No`|`n/a`| `n/a` | `n/a` | -|`LoaderContainer`|`No`|`n/a`| `n/a` | `n/a` | -|`Map`|`No`|`n/a`| `n/a` | `n/a` | -|`MaskedTextbox`|`Yes`|`AA`| `n/a` | [Documentation]({%slug maskedtextbox-wai-aria-support%}) | -|`MediaQuery`|`No`|`n/a`| `n/a` | `n/a` | -|`Menu`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/menu/keyboard-navigation) | [Documentation]({%slug menu-wai-aria-support%}) | -|`MultiColumnComboBox`|`No`|`n/a`| `n/a` | `n/a` | -|`MultiSelect`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/multiselect/keyboard-navigation) | [Documentation]({%slug multiselect-wai-aria-support%}) | -|`Notification`|`Yes`|`AA`| `n/a` | [Documentation]({%slug notification-wai-aria-support%}) | -|`NumericTextbox`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/numericTextbox/keyboard-navigation) | [Documentation]({%slug numerictextbox-wai-aria-support%}) | -|`Pager`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation) | [Documentation]({%slug pager-wai-aria-support%}) | -|`PanelBar`|`No`|`n/a`| `n/a` | `n/a` | -|`PDF Viewer`|`No`|`n/a`| `n/a` | `n/a` | -|`ProgressBar`|`Yes`|`AA`| `n/a` | [Documentation]({%slug progressbar-wai-aria-support%}) | -|`RadioGroup`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/radiogroup/keyboard-navigation) | [Documentation]({%slug radiogroup-wai-aria-support%}) | -|`Range Slider`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/rangeslider/keyboard-navigation) | [Documentation]({%slug rangeslider-wai-aria-support%}) | -|`Scheduler`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/scheduler/keyboard-navigation) | [Documentation]({%slug scheduler-wai-aria-support%}) | -|`Signature`|`Yes`|`AA`| `n/a` | [Documentation]({%slug signature-wai-aria-support%}) | -|`Skeleton`|`No`|`n/a`| `n/a` | `n/a` | -|`Slider`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/slider/keyboard-navigation) | [Documentation]({%slug slider-wai-aria-support%}) | -|`SplitButton`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/splitbutton/keyboard-navigation) | [Documentation]({%slug splitbutton-wai-aria-support%}) | -|`Splitter`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/splitter/keyboard-navigation) | [Documentation]({%slug splitter-wai-aria-support%}) | -|`Stack Layout`|`No`|`n/a`| `n/a` | `n/a` | -|`Stepper`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/stepper/keyboard-navigation) | [Documentation]({%slug stepper-wai-aria-support%}) | -|`Stock Chart`|`No`|`n/a`| `n/a` | `n/a` | -|`Switch`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/switch/keyboard-navigation) | [Documentation]({%slug switch-wai-aria-support%}) | -|`TabStrip`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/tabstrip/keyboard-navigation) | [Documentation]({%slug tabstrip-wai-aria-support%}) | -|`TextArea`|`Yes`|`AAA`| `n/a` | [Documentation]({%slug textarea-wai-aria-support%}) | -|`TextBox`|`Yes`|`AA`| `n/a` | [Documentation]({%slug textbox-wai-aria-support%}) | -|`TileLayout`|`Yes`|`AAA`| `n/a` | [Documentation]({%slug tilelayout-wai-aria-support%}) | -|`TimePicker`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation) | [Documentation]({%slug timepicker-wai-aria-support%}) | -|`ToggleButton`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation) | [Documentation]({%slug togglebutton-wai-aria-support%}) | -|`ToolBar`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation) | [Documentation]({%slug toolbar-wai-aria-support%}) | -|`Tooltip`|`Yes`|`AA`| `n/a` | [Documentation]({%slug tooltip-wai-aria-support%}) | -|`TreeList`|`No`|`n/a`| `n/a` | `n/a` | -|`TreeView`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation) | [Documentation]({%slug treeview-wai-aria-support%}) | -|`Upload`|`No`|`n/a`| `n/a` | `n/a` | -|`Window`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/window/keyboard-navigation) | [Documentation]({%slug window-wai-aria-support%}) | -|`Wizard`|`Yes`|`AA`| [Demo](https://demos.telerik.com/blazor-ui/wizard/keyboard-navigation) | [Documentation]({%slug wizard-wai-aria-support%}) | - -## See Also - - * [GSA Government-Wide Section 508 Accessibility Program](https://www.section508.gov/) - * [WCAG 2 Quick Reference Guide](https://www.w3.org/WAI/WCAG21/quickref/) - * [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/) - * [WCAG Keyboard Accessible Category](https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible) - * [Telerik UI for Blazor Accessibility Overview]({%slug accessibility-overview%}) - * [Telerik UI for Blazor Globalization Overview]({%slug globalization-overview%}) - * [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%}) - diff --git a/components/aiprompt/accessibility/wai-aria-support.md b/components/aiprompt/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..6a644878d3 --- /dev/null +++ b/components/aiprompt/accessibility/wai-aria-support.md @@ -0,0 +1,96 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor AIPrompt Documentation | AIPrompt Accessibility +description: "Get started with the Telerik UI for Blazor AIPrompt and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: aiprompt-wai-aria-support +position: 50 +--- + +# Blazor AIPrompt Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor AI Prompt provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The AI Prompt 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. + +### AI Prompt + + +The AI Prompt component is a composite one and integrates the accessibility of the Toolbar, TextArea, Card List container + +### TextArea Component + +[TextArea accessibility specification]({{textarea_a11y_link}}) + +### Prompt Suggestion Component + + +The Prompt suggestion list implements roving tabindex navigation. Meaning that only one suggestion has tabindex=0. The display of the suggestion list is controlled by the expand button. + +| Selector | Attribute | Usage | +| -------- | --------- | ----- | +| `.k-prompt-expander .k-button` | `aria-controls=.k-prompt-expander-content id` | Points to the controlled element based on the given `id`. | +| | `aria-expanded=true/false` | Indicates the expanded state of the prompt expander content. | +| `.k-prompt-expander .k-prompt-expander-content` | `role=list` | Indicates that the suggestion container element is a list. | +| `.k-prompt-expander .k-prompt-suggestion` | `role=listitem` | Indicates that the suggestion element is a listitem. | +| | `tabindex=0/-1` | The element should be focusable. | + +### Toolbar Component + +[ToolBar accessibility specification]({{toolbar_a11y_link}}) + +### Card List Container + +[CardList accessibility specification]({{cardlist_a11y_link}}) + +### Card Component + +[Card accessibility specification]({{card_a11y_link}}) + +### More Actions View - PanelBar Component + +[PanelBar accessibility specification]({{panelbar_a11y_link}}) + +## Section 508 + + +The AI Prompt is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The AI Prompt 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 AI Prompt 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 AIPrompt Demos](https://demos.telerik.com/blazor-ui/aiprompt/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/autocomplete/accessibility/wai-aria-support.md b/components/autocomplete/accessibility/wai-aria-support.md index 08700b0ee0..dd447c40a5 100644 --- a/components/autocomplete/accessibility/wai-aria-support.md +++ b/components/autocomplete/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -95,8 +95,10 @@ The AutoComplete has been tested with the following screen readers and browsers +## Keyboard Navigation + +For details on how the AutoComplete keyboard navigation works, refer to the [Blazor AutoComplete Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation). + ## See Also -* [Blazor AutoComplete Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/breadcrumb/accessibility/wai-aria-support.md b/components/breadcrumb/accessibility/wai-aria-support.md index d691336aad..5a6dab878c 100644 --- a/components/breadcrumb/accessibility/wai-aria-support.md +++ b/components/breadcrumb/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -63,8 +63,10 @@ The Breadcrumb has been tested with the following screen readers and browsers co +## Keyboard Navigation + +For details on how the Breadcrumb keyboard navigation works, refer to the [Blazor Breadcrumb Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation). + ## See Also -* [Blazor Breadcrumb Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/breadcrumb/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/button/accessibility/wai-aria-support.md b/components/button/accessibility/wai-aria-support.md index 61a7d11682..42b4eaa7cd 100644 --- a/components/button/accessibility/wai-aria-support.md +++ b/components/button/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -56,8 +56,10 @@ The Button has been tested with the following screen readers and browsers combin +## Keyboard Navigation + +For details on how the Button keyboard navigation works, refer to the [Blazor Button Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/button/keyboard-navigation). + ## See Also -* [Blazor Button Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/button/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/buttongroup/accessibility/wai-aria-support.md b/components/buttongroup/accessibility/wai-aria-support.md index 557f42b0e4..eb46ed0373 100644 --- a/components/buttongroup/accessibility/wai-aria-support.md +++ b/components/buttongroup/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -60,8 +60,10 @@ The ButtonGroup has been tested with the following screen readers and browsers c +## Keyboard Navigation + +For details on how the ButtonGroup keyboard navigation works, refer to the [Blazor ButtonGroup Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation). + ## See Also -* [Blazor ButtonGroup Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/calendar/accessibility/wai-aria-support.md b/components/calendar/accessibility/wai-aria-support.md index 87f6a00ea9..9134029968 100644 --- a/components/calendar/accessibility/wai-aria-support.md +++ b/components/calendar/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -89,8 +89,10 @@ The Calendar has been tested with the following screen readers and browsers comb +## Keyboard Navigation + +For details on how the Calendar keyboard navigation works, refer to the [Blazor Calendar Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation). + ## See Also -* [Blazor Calendar Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/carousel/accessibility/wai-aria-support.md b/components/carousel/accessibility/wai-aria-support.md index db6765b4c1..cc7728dd13 100644 --- a/components/carousel/accessibility/wai-aria-support.md +++ b/components/carousel/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor Carousel provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -The Carousel 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]({%slug accessibility-keyboard-navigation%}) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. +The Carousel 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 @@ -69,8 +69,10 @@ The Carousel has been tested with the following screen readers and browsers comb +## Keyboard Navigation + +For details on how the Carousel keyboard navigation works, refer to the [Blazor Carousel Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation). + ## See Also -* [Blazor Carousel Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/chart/accessibility/wai-aria-support.md b/components/chart/accessibility/wai-aria-support.md index a02777b4af..78f3cb1210 100644 --- a/components/chart/accessibility/wai-aria-support.md +++ b/components/chart/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor Chart provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -The Chart 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]({%slug accessibility-keyboard-navigation%}) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. +The Chart 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 @@ -68,8 +68,10 @@ The Chart has been tested with the following screen readers and browsers combina +## Keyboard Navigation + +For details on how the Chart keyboard navigation works, refer to the [Blazor Chart Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation). + ## See Also -* [Blazor Chart Overview (Demo)](https://demos.telerik.com/blazor-ui/chart/overview) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/checkbox/accessibility/wai-aria-support.md b/components/checkbox/accessibility/wai-aria-support.md index c18c00c625..f8149e8089 100644 --- a/components/checkbox/accessibility/wai-aria-support.md +++ b/components/checkbox/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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]({%slug accessibility-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 @@ -62,8 +62,11 @@ The CheckBox has been tested with the following screen readers and browsers comb +## 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 CheckBox Overview (Demo)](https://demos.telerik.com/blazor-ui/checkbox/overview) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Blazor CheckBox Demos](https://demos.telerik.com/blazor-ui/checkbox/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/chip/accessibility/wai-aria-support.md b/components/chip/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..2104ae194f --- /dev/null +++ b/components/chip/accessibility/wai-aria-support.md @@ -0,0 +1,67 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor Chip Documentation | Chip Accessibility +description: "Get started with the Telerik UI for Blazor Chip and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: chip-wai-aria-support +position: 50 +--- + +# Blazor Chip Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor 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 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 | +| -------- | --------- | ----- | +| `*:not(.k-chip-list) > .k-chip` | `role=button` | Announces that a chip is an optional inner component within the Chip list. | +| `*:not(.k-chip-list) > .k-chip.k-selected` | `aria-pressed=true` | Announces that the Chip has been selected. | +| `*:not(.k-chip-list) > .k-chip:not(.k-selected)` | `aria-pressed=false` | Announces that the Chip has not benn selected. | + +## Resources + +[WAI-ARIA Authoring Practices: Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) + +## Section 508 + + +The Chip is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The Chip 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 Chip 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 Chip keyboard navigation works, refer to the [Blazor Chip Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/chip/keyboard-navigation). + +## See Also + +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/chiplist/accessibility/wai-aria-support.md b/components/chiplist/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..e8aac3d594 --- /dev/null +++ b/components/chiplist/accessibility/wai-aria-support.md @@ -0,0 +1,75 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor ChipList Documentation | ChipList Accessibility +description: "Get started with the Telerik UI for Blazor ChipList and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: chiplist-wai-aria-support +position: 50 +--- + +# Blazor ChipList Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor 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 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-chip-list` | `role=listbox` | Announces the list role of the chip list. | +| | `aria-label` or `aria-labelledby` | Adds label to the ChipList element. ListBox element requires an accessible name attached to it. | +| | `aria-orientation=horizontal` | Specifies the horizontal orientation of the chiplist that gives context about the navigation shortcuts. | +| | `aria-multiselectable=true` | Announces the multiple selection ability of the chiplist. Only when the selection mode is set to multiple. | +| `.k-chip` | `role=option` | Announces the chip is an option inner component of the chip list. | +| `.k-chip.k-selected` | `aria-selected=true` | Announces the chip is selected. | +| `.k-chip:not(.k-selected)` | `aria-selected=false` | Announces the chip is not selected. | +| `.k-chip:has(.k-i-x-circle),.k-chip:has(.k-svg-i-x-circle)` | `aria-keyshortcuts=Enter Delete` | Announces the Delete action along with the default Enter key used for selection/click action. | + + +When selection is disabled in the ChipList, it should not have its role set to `listbox`. Instead, the attribute should either be omitted, or its value should be set to `none`. In that case the `role` of the Chip elements should remain `button` as per the Chip component specification. + +## Resources + +[ARIA practices list pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) + +## Section 508 + + +The ChipList is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The ChipList 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 ChipList 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 ChipList keyboard navigation works, refer to the [Blazor ChipList Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/chiplist/keyboard-navigation). + +## See Also + +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/chunkprogressbar/accessibility/wai-aria-support.md b/components/chunkprogressbar/accessibility/wai-aria-support.md index 74e409b56c..611f60af26 100644 --- a/components/chunkprogressbar/accessibility/wai-aria-support.md +++ b/components/chunkprogressbar/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor ChunkProgressBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -The ChunkProgressBar 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]({%slug accessibility-keyboard-navigation%}) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. +The ChunkProgressBar 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 @@ This section lists the selectors, attributes, and behavior patterns supported by The ChunkProgressBar follows the specification for the ProgressBar component. -[ProgressBar accessibility specification](slug://progressbar-wai-aria-support) +[ProgressBar accessibility specification]({{progressbar_a11y_link}}) ## Resources @@ -59,8 +59,11 @@ The ChunkProgressBar has been tested with the following screen readers and brows +## 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 ChunkProgressBar Overview (Demo)](https://demos.telerik.com/blazor-ui/chunkprogressbar/overview) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Blazor ChunkProgressBar Demos](https://demos.telerik.com/blazor-ui/chunkprogressbar/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/colorgradient/accessibility/wai-aria-support.md b/components/colorgradient/accessibility/wai-aria-support.md index a7d074d643..19613b4734 100644 --- a/components/colorgradient/accessibility/wai-aria-support.md +++ b/components/colorgradient/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -38,7 +38,7 @@ This section lists the selectors, attributes, and behavior patterns supported by All the `k-draghandle` elements implement the **Slider** specification. -[Slider accessibility specification](slug://slider-wai-aria-support) +[Slider accessibility specification]({{slider_a11y_link}}) Apart from that the HSV draghandle must also cover the following additional requirements: @@ -54,7 +54,7 @@ Apart from that the HSV draghandle must also cover the following additional requ The Numeric inputs must implement the **NumericTextBox** specification. -[NumericTextBox accessibility specification](slug://numerictextbox-wai-aria-support) +[NumericTextBox accessibility specification]({{numerictextbox_a11y_link}}) Here is one additional requirement for those numerics as their visible labels have only a single letter as text: @@ -88,8 +88,10 @@ The ColorGradient has been tested with the following screen readers and browsers +## Keyboard Navigation + +For details on how the ColorGradient keyboard navigation works, refer to the [Blazor ColorGradient Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation). + ## See Also -* [Blazor ColorGradient Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/colorpalette/accessibility/wai-aria-support.md b/components/colorpalette/accessibility/wai-aria-support.md index a33e63c1a7..4d1c2f31f4 100644 --- a/components/colorpalette/accessibility/wai-aria-support.md +++ b/components/colorpalette/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -61,8 +61,10 @@ The ColorPalette has been tested with the following screen readers and browsers +## Keyboard Navigation + +For details on how the ColorPalette keyboard navigation works, refer to the [Blazor ColorPalette Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation). + ## See Also -* [Blazor ColorPalette Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/colorpicker/accessibility/wai-aria-support.md b/components/colorpicker/accessibility/wai-aria-support.md index 3e30b348d4..42ea7f4e62 100644 --- a/components/colorpicker/accessibility/wai-aria-support.md +++ b/components/colorpicker/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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]({%slug accessibility-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 @@ -72,8 +72,14 @@ The ColorPicker has been tested with the following screen readers and browsers c +## Keyboard Navigation + +For details on how the ColorPicker keyboard navigation works, refer to: + +* [Blazor ColorGradient Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/colorgradient/keyboard-navigation) +* [Blazor ColorPalette Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation) + ## See Also -* [Blazor ColorPicker Overview (Demo)](https://demos.telerik.com/blazor-ui/colorpicker/overview) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Blazor ColorPicker Demos](https://demos.telerik.com/blazor-ui/colorpicker/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/combobox/accessibility/wai-aria-support.md b/components/combobox/accessibility/wai-aria-support.md index 28a3c5a525..ec2034cf40 100644 --- a/components/combobox/accessibility/wai-aria-support.md +++ b/components/combobox/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -98,8 +98,10 @@ The ComboBox has been tested with the following screen readers and browsers comb +## Keyboard Navigation + +For details on how the ComboBox keyboard navigation works, refer to the [Blazor ComboBox Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation). + ## See Also -* [Blazor ComboBox Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/contextmenu/accessibility/wai-aria-support.md b/components/contextmenu/accessibility/wai-aria-support.md index 90a663b739..cc8b818a6b 100644 --- a/components/contextmenu/accessibility/wai-aria-support.md +++ b/components/contextmenu/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor ContextMenu provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -The ContextMenu 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]({%slug accessibility-keyboard-navigation%}) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. +The ContextMenu 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,7 @@ This section lists the selectors, attributes, and behavior patterns supported by Apart from the above, the ContextMenu element should implement the specification for a vertical **Menu** component. -[Menu accessibility specification](slug://menu-wai-aria-support) +[Menu accessibility specification]({{menu_a11y_link}}) ## Resources @@ -61,8 +61,10 @@ The ContextMenu has been tested with the following screen readers and browsers c +## Keyboard Navigation + +For details on how the ContextMenu keyboard navigation works, refer to the [Blazor ContextMenu Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation). + ## See Also -* [Blazor ContextMenu Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/dateinput/accessibility/wai-aria-support.md b/components/dateinput/accessibility/wai-aria-support.md index c127c8856a..826fc7baab 100644 --- a/components/dateinput/accessibility/wai-aria-support.md +++ b/components/dateinput/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -63,8 +63,10 @@ The DateInput has been tested with the following screen readers and browsers com +## Keyboard Navigation + +For details on how the DateInput keyboard navigation works, refer to the [Blazor DateInput Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation). + ## See Also -* [Blazor DateInput Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/datepicker/accessibility/wai-aria-support.md b/components/datepicker/accessibility/wai-aria-support.md index 9f194ff55c..6558e983a6 100644 --- a/components/datepicker/accessibility/wai-aria-support.md +++ b/components/datepicker/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor DatePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -The DatePicker 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]({%slug accessibility-keyboard-navigation%}) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. +The DatePicker 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 @@ -48,7 +48,7 @@ This section lists the selectors, attributes, and behavior patterns supported by The Calendar in the Popup element of the component should implement the specification for the **Calendar** component. -[Calendar accessibility specification](slug://calendar-wai-aria-support) +[Calendar accessibility specification]({{calendar_a11y_link}}) ## Resources @@ -81,8 +81,10 @@ The DatePicker has been tested with the following screen readers and browsers co +## Keyboard Navigation + +For details on how the DatePicker keyboard navigation works, refer to the [Blazor DatePicker Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation). + ## See Also -* [Blazor DatePicker Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/daterangepicker/accessibility/wai-aria-support.md b/components/daterangepicker/accessibility/wai-aria-support.md index d6b3f29f4e..4e030c02bb 100644 --- a/components/daterangepicker/accessibility/wai-aria-support.md +++ b/components/daterangepicker/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor DateRangePicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. -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]({%slug accessibility-keyboard-navigation%}) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. +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 @@ -45,7 +45,7 @@ This section lists the selectors, attributes, and behavior patterns supported by The Calendars in the Popup element of the component should implement the specification for the **MultiViewCalendar** component. -[Calendar accessibility specification](slug://calendar-wai-aria-support) +[Calendar accessibility specification]({{calendar_a11y_link}}) ## Resources @@ -78,8 +78,10 @@ The DateRangePicker has been tested with the following screen readers and browse +## Keyboard Navigation + +For details on how the DateRangePicker keyboard navigation works, refer to the [Blazor DateRangePicker Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation). + ## See Also -* [Blazor DateRangePicker Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/datetimepicker/accessibility/wai-aria-support.md b/components/datetimepicker/accessibility/wai-aria-support.md index 2b446aa0a3..d164345739 100644 --- a/components/datetimepicker/accessibility/wai-aria-support.md +++ b/components/datetimepicker/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -48,21 +48,21 @@ This section lists the selectors, attributes, and behavior patterns supported by The Calendar in the Popup element of the component should implement the specification for the **Calendar** component. -[Calendar accessibility specification](slug://calendar-wai-aria-support) +[Calendar accessibility specification]({{calendar_a11y_link}}) ### Popup Date/Time View Chooser The Date/Time view chooser in the Popup element of the component should implement the specification for the **ButtonGroup** component. -[ButtonGroup accessibility specification](slug://buttongroup-wai-aria-support) +[ButtonGroup accessibility specification]({{buttongroup_a11y_link}}) ### TimePicker Popup Time Popup implementation should follow the specification for the TimePicker component. -[TimePicker accessibility specification](slug://timepicker-wai-aria-support) +[TimePicker accessibility specification]({{timepicker_a11y_link}}) ## Resources @@ -97,8 +97,10 @@ The DateTimePicker has been tested with the following screen readers and browser +## Keyboard Navigation + +For details on how the DateTimePicker keyboard navigation works, refer to the [Blazor DateTimePicker Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation). + ## See Also -* [Blazor DateTimePicker Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/dialog/accessibility/wai-aria-support.md b/components/dialog/accessibility/wai-aria-support.md index 300312c2c6..784ed70711 100644 --- a/components/dialog/accessibility/wai-aria-support.md +++ b/components/dialog/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -67,8 +67,11 @@ The Dialog has been tested with the following screen readers and browsers combin +## 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 Dialog Overview (Demo)](https://demos.telerik.com/blazor-ui/dialog/overview) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Blazor Dialog Demos](https://demos.telerik.com/blazor-ui/dialog/overview) +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/drawer/accessibility/wai-aria-support.md b/components/drawer/accessibility/wai-aria-support.md index 367570aa12..fe9b09a939 100644 --- a/components/drawer/accessibility/wai-aria-support.md +++ b/components/drawer/accessibility/wai-aria-support.md @@ -16,7 +16,7 @@ position: 50 Out of the box, the Telerik UI for Blazor 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 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]({%slug accessibility-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 @@ -59,8 +59,10 @@ The Drawer has been tested with the following screen readers and browsers combin +## Keyboard Navigation + +For details on how the Drawer keyboard navigation works, refer to the [Blazor Drawer Accessibility and Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation). + ## See Also -* [Blazor Drawer Accessibility and Keyboard Navigation (Demo)](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation) -* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %}) -* [Accessibility Theme]({% slug themes-accessibility-swatch %}) \ No newline at end of file +* [Accessibility in Telerik UI for Blazor]({%slug accessibility-overview%}) \ No newline at end of file diff --git a/components/dropdownbutton/accessibility/wai-aria-support.md b/components/dropdownbutton/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..e2dc1a458a --- /dev/null +++ b/components/dropdownbutton/accessibility/wai-aria-support.md @@ -0,0 +1,84 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor DropDownButton Documentation | DropDownButton Accessibility +description: "Get started with the Telerik UI for Blazor DropDownButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: dropdownbutton-wai-aria-support +position: 50 +--- + +# Blazor DropDownButton Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor 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 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. + +### Main Button Element + + +The following table summarizes the selectors and attributes supported by the main `button` element of the DropDownButton: + +| Selector | Attribute | Usage | +| -------- | --------- | ----- | +| `.k-menu-button` | `role=button` or `nodeName=button` | Omitted if the `