diff --git a/components/splitter/accessibility/overview.md b/components/splitter/accessibility/overview.md index 5421bf0e6..87211b3ce 100644 --- a/components/splitter/accessibility/overview.md +++ b/components/splitter/accessibility/overview.md @@ -9,13 +9,13 @@ position: 0 # Accessibility Overview -The UI for Blazor Splitter component is [WCAG 2.2 AA](https://www.w3.org/TR/WCAG22) and [Section 508](https://www.section508.gov) compliant. The component also follows the [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing the keyboard navigation for its component [role](https://www.w3.org/TR/wai-aria/#roles), and is tested against the popular screen readers. +The UI for Blazor Splitter component is WCAG 2.2 AA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role, and is tested against the popular screen readers. # Blazor Splitter Accessibility Example -WCAG 2.2 introduces the ["Dragging Movements"](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements) criterion as an important part of the Operable principle. Its primary goal is to guarantee that any feature reliant on drag actions offers an alternative method that can be executed with a single click, enhancing user accessibility. +WCAG 2.2 introduces the "Dragging Movements" criterion as an important part of the Operable principle. Its primary goal is to guarantee that any feature reliant on drag actions offers an alternative method that can be executed with a single click, enhancing user accessibility. -In our illustrative example below, we've showcased the pane resize action, achievable through our [Context Menu]({%slug contextmenu-overview%}). Our goal is to offer a versatile API that allows users to trigger all functions programmatically or externally, meeting diverse accessibility requirements for any applications. +The illustrative example below shows the tile resize action, achievable through the [Context Menu]({%slug contextmenu-overview%}). Telerik UI for Blazor to offer a versatile API that allows users to trigger all functions programmatically or externally, meeting diverse accessibility requirements for any applications. The following example demonstrates the [accessibility compliance of the Splitter component]({%slug splitter-wai-aria-support%}). The described level of compliance is achievable with the [Ocean Blue A11y Accessibility Swatch]({%slug themes-accessibility-swatch%}). @@ -86,8 +86,8 @@ The following example demonstrates the [accessibility compliance of the Splitter - Resize - Cancel + Resize + Cancel diff --git a/components/tilelayout/accessibility/overview.md b/components/tilelayout/accessibility/overview.md new file mode 100644 index 000000000..cffbdbb9d --- /dev/null +++ b/components/tilelayout/accessibility/overview.md @@ -0,0 +1,203 @@ +--- +title: Accessibility Overview +page_title: Telerik UI for Blazor TileLayout Documentation | TileLayout Accessibility Overview +description: "Get started with the Telerik UI for Blazor TileLayout and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag,tilelayout +slug: tilelayout-accessibility-overview +position: 0 +--- + +# Accessibility Overview + +The UI for Blazor TileLayout component is WCAG 2.2 AA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role, and is tested against the popular screen readers. + +# Blazor TileLayout Accessibility Example + +WCAG 2.2 introduces the "Dragging Movements" criterion as an important part of the Operable principle. Its primary goal is to guarantee that any feature reliant on drag actions offers an alternative method that can be executed with a single click, enhancing user accessibility. + +The illustrative example below shows the tile resize action, achievable through the [DropDown Button]({%slug dropdownbutton-overview%}). Telerik UI for Blazor aims to offer a versatile API that allows users to trigger all functions programmatically or externally, meeting diverse accessibility requirements for any applications. + +The following example demonstrates the [accessibility compliance of the TileLayout component]({%slug tilelayout-wai-aria-support%}). The described level of compliance is achievable with the [Ocean Blue A11y Accessibility Swatch]({%slug themes-accessibility-swatch%}). + +>caption TileLayout accessibility compliance example + +````CSHTML +@*Evaluate the example with Axe Core or other accessibility tools*@ + + + + + + @foreach (var item in TileItems) + { + + +
+
@item.HeaderContent
+ + + + Resize tile + + + + +
+ + + @(new MarkupString($"{item.Content}")) + + + } + + + + + + Resize Tile to: + +
+
+ + + + + + column(s) +
+ and +
+ + + + + + row(s) +
+
+ + + Resize + Cancel + + + + + +@code { + private bool Visible { get; set; } + private TileModel CurrentTile { get; set; } + + private List ColSpanOptions = new List() { 1, 2 }; + private List RowSpanOptions = new List() { 1, 2 }; + + private int SelectedColSpan { get; set; } + private int SelectedRowSpan { get; set; } + + private void ApplyResize() + { + CurrentTile.ColSpan = SelectedColSpan; + CurrentTile.RowSpan = SelectedRowSpan; + + Visible = false; + } + + private void HandleTileResize(TileModel selectedTile) + { + Visible = true; + + CurrentTile = selectedTile; + } + + private List TileItems = new List + { + new TileModel + { + RowSpan = 1, + ColSpan = 1, + HeaderContent = "Sales Overview", + Content = "Total Sales: $1,234,567
Growth Rate: 12%" + }, + new TileModel + { + RowSpan = 1, + ColSpan = 1, + HeaderContent = "Upcoming Events", + Content = "
  • June 15, 2024 - Product Launch
  • July 20, 2024 - Annual Meeting
  • August 5, 2024 - Networking Event
" + }, + new TileModel + { + RowSpan = 1, + ColSpan = 1, + HeaderContent = "Market Analysis", + Content = "The current market shows a significant increase in demand for sustainable products." + }, + new TileModel + { + RowSpan = 1, + ColSpan = 1, + HeaderContent = "Project Management", + Content = "Project A: 80% Complete
Project B: 60% Complete" + } + }; + + public class TileModel + { + public int RowSpan { get; set; } + public int ColSpan { get; set; } + public string HeaderContent { get; set; } + public string Content { get; set; } + } +} +```` + +## See also + * [Live demo: TileLayout Resizing](https://demos.telerik.com/blazor-ui/tilelayout/resizing) \ No newline at end of file