You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/chart/accessibility.md
+20-23Lines changed: 20 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
1
---
2
2
layout: post
3
3
title: Accessibility in Blazor Charts Component | Syncfusion
4
-
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Charts component and more.
4
+
description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Charts component.
5
5
platform: Blazor
6
6
control: Chart
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor Chart Component
11
11
12
-
The Blazor Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/)standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles)that are commonly used to evaluate accessibility.
12
+
Syncfusion Blazor Chart components comply with accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles)to ensure inclusive user experiences.
13
13
14
-
The accessibility compliance for the Blazor Chart component is outlined below.
14
+
## Accessibility Compliance Overview
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -37,19 +37,9 @@ The accessibility compliance for the Blazor Chart component is outlined below.
37
37
38
38
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
39
39
40
-
## WAI-ARIA attributes
40
+
## WAI-ARIA Attributes
41
41
42
-
WAI-ARIA(Accessibility Initiative - Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with AJAX, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
43
-
44
-
Element |Default description
45
-
-----|-----
46
-
Datalabel |Reads the Point y value.
47
-
Legend |Click to show or hide the series.
48
-
Axis Title |Reads the axis title.
49
-
Chart Title |Reads the chart title.
50
-
Series Points |Reads the Point x: Point y value.
51
-
52
-
The Blazor Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Chart component:
42
+
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) increases the accessibility of web pages and UI components. The Blazor Chart component uses the following ARIA roles and attributes:
53
43
54
44
* img (role)
55
45
* button (role)
@@ -58,9 +48,17 @@ The Blazor Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/a
58
48
* aria-hidden (attribute)
59
49
* aria-pressed (attribute)
60
50
61
-
## Keyboard navigation
51
+
| Element | Description |
52
+
|---------|-------------|
53
+
| Data label | Reads the Point y value. |
54
+
| Legend | Click to show or hide the series. |
55
+
| Axis Title | Reads the axis title. |
56
+
| Chart Title | Reads the chart title. |
57
+
| Series Points | Reads the Point x: Point y value. |
62
58
63
-
The Blazor Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Chart component.
59
+
## Keyboard Navigation
60
+
61
+
Syncfusion Blazor Charts support keyboard navigation for users relying on assistive technologies. The following keyboard shortcuts are available:
64
62
65
63
| Windows | Mac | Description |
66
64
|-----|-----|---|
@@ -69,8 +67,8 @@ The Blazor Chart component followed the [keyboard interaction](https://www.w3.or
69
67
|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the chart.|
70
68
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point right side from the selected point.|
71
69
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point.|
72
-
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the focus to the next series in our Chart component.|
73
-
| <kbd>→</kbd> | <kbd>→</kbd> | Moves the focus to the previous series in our Chart component.|
70
+
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the focus to the next series in the Chart component.|
71
+
| <kbd>→</kbd> | <kbd>→</kbd> | Moves the focus to the previous series in the Chart component.|
74
72
|<kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Selects the data point in the series|
75
73
| <kbd>↓</kbd> , <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend.|
76
74
| <kbd>↑</kbd> , <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend.|
@@ -82,15 +80,14 @@ The Blazor Chart component followed the [keyboard interaction](https://www.w3.or
82
80
|<kbd>R</kbd> | <kbd>R</kbd> | Reset the zoomed chart.|
83
81
|<kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Chart.|
84
82
85
-
## Ensuring accessibility
83
+
## Ensuring Accessibility
86
84
87
-
The Blazor Chart component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright)with playwright tests.
85
+
Accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright)and Playwright tests.
88
86
89
-
The accessibility compliance of the Blazor Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/chart)in a new window to evaluate the accessibility of the Blazor Chart component with accessibility tools.
87
+
Evaluate accessibility in the [Blazor Chart accessibility sample](https://blazor.syncfusion.com/accessibility/chart)using accessibility tools.
90
88
91
89
## See also
92
90
93
91
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
94
92
95
93
*[Accessibility Customization in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](./advanced-accessibility-configuration.md)
Copy file name to clipboardExpand all lines: blazor/chart/adaptive-layout.md
+11-12Lines changed: 11 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
---
2
2
layout: post
3
3
title: Adaptive Layout in Blazor Charts Component | Syncfusion
4
-
description: Checkout and learn here all about Adaptive Layout in Syncfusion Blazor Charts component and much more.
4
+
description: Check out and learn how to configure and utilize Adaptive Layout in Syncfusion Blazor Charts component.
5
5
platform: Blazor
6
6
control: Chart
7
7
documentation: ug
8
8
---
9
9
10
10
# Adaptive Layout in Blazor Charts Component
11
11
12
-
When viewing the chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion<supstyle="font-size:70%">®</sup> Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, axis titles, axis labels, data labels, chart title, and more.
12
+
Adaptive layout in Blazor Charts ensures optimal display of chart elements on mobile devices and screens with limited space. By enabling the `EnableAdaptiveRendering` property, the chart automatically adjusts to container size changes, maintaining clear alignment and visibility for elements such as legend, axis titles, axis labels, data labels, chart title, and more.
13
13
14
14
```cshtml
15
15
@@ -78,24 +78,23 @@ When viewing the chart on a mobile device, some elements may not be displayed pr
78
78
79
79
80
80
81
-
The table below outlines the behavior of various chart elements under specific conditions determined by the chart's height and width:
82
-
81
+
The table below outlines the behavior of chart elements based on chart height and width:
| Axes | <kbd>Height <= 200</kbd> / <kbd>Width <= 200</kbd> |Horizontal/Vertical axis titles and scrollbars are disabled |
89
-
| Axes Label | <kbd>Height < 100</kbd> / <kbd>Width < 100</kbd> <br> <kbd>Height < 200</kbd> / <kbd>Width < 200</kbd> <br> <kbd>Height <= 400</kbd> / <kbd>Width <= 400</kbd> |Horizontal/Vertical axis labels are disabled <br><br> Axis labels move inside the chart <br><br> Axis numeric labels are formatted with M, K and B |
90
-
| Legend | <kbd>Height < 300</kbd> / <kbd>Width < 300</kbd> |Moves the bottom or top legend to the right if the width is greater than 200px; otherwise, it is disabled / Moves the right or left legend to the bottom if the height is greater than 200px; otherwise, it is disabled |
91
-
| Marker | <kbd>Height < 200</kbd> / <kbd>Width < 200</kbd> | Marker is disabled in the chart |
| Datalabel <br> (Column and Bar Chart Types)|| Datalabel rotates based on rectangle size. If it exceeds the available size, it is hidden|
92
+
| Datalabel <br> (Column and Bar Chart Types)|| Datalabel rotates based on rectangle size; hidden if it exceeds available size |
94
93
95
94
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
0 commit comments