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
<li> <a href="/document-processing/pdf/smart-pdf-viewer/blazor/how-to/dockerImage-hosting-guide">Docker Image Hosting Guide for Blazor Web App</a></li>
1690
+
<li> <a href="/document-processing/pdf/smart-pdf-viewer/blazor/deployment/dockerImage-hosting-guide">Docker Image Hosting Guide for Blazor Web App</a></li>
<li> <a href="/document-processing/pdf/smart-pdf-viewer/blazor/how-to/user-token-with-custom-ai-service">User Token with Custom AI service</a></li>
1684
-
<li> <a href="/document-processing/pdf/smart-pdf-viewer/blazor/how-to/refer-SfSmartPdfViewer-script-in-application">Refer the SfSmartPdfViewer script file in application</a></li>
1707
+
<li> <a href="/document-processing/pdf/smart-pdf-viewer/blazor/faqs/how-to-use-user-token-with-custom-ai-service">How to use user token with Custom AI service</a></li>
1708
+
<li> <a href="/document-processing/pdf/smart-pdf-viewer/blazor/faqs/how-to-refer-sfsmartpdfviewer-script-in-application">How to refer the SfSmartPdfViewer script file in application</a></li>
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/Blazor/accessibility.md
+30-34Lines changed: 30 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,25 @@
1
1
---
2
2
layout: post
3
3
title: Accessibility in Blazor Spreadsheet Component | Syncfusion
4
-
description: Checkout and learn here all about accessibility in Syncfusion Blazor Spreadsheet componentand much more.
4
+
description: Learn about accessibility support in the Syncfusion Blazor Spreadsheet component, including WCAG 2.2, Section 508, keyboard shortcuts, and WAI-ARIA attributes.
5
5
platform: document-processing
6
6
control: Spreadsheet
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor Spreadsheet
11
11
12
-
The Syncfusion Blazor Spreadsheet 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.
13
-
14
-
The accessibility compliance for the Spreadsheet is outlined below.
12
+
The Syncfusion Blazor Spreadsheet follows 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](https://www.w3.org/TR/wai-aria/#roles) roles that are commonly used to evaluate accessibility.
13
+
<style>
14
+
.post.post-contentimg {
15
+
display: inline-block;
16
+
margin: 0.5em0;
17
+
}
18
+
</style>
19
+
The accessibility compliance for the Spreadsheet component is outlined below.
20
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
21
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
22
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
15
23
16
24
| Accessibility Criteria | Compatibility |
17
25
| -- | -- |
@@ -24,39 +32,27 @@ The accessibility compliance for the Spreadsheet is outlined below.
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
34
-
35
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
36
-
37
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
38
-
39
35
## WAI-ARIA attributes
40
-
The Syncfusion Blazor Spreadsheet followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet:
36
+
The Syncfusion Blazor Spreadsheet follows WAI-ARIA patterns to meet accessibility standards. The following ARIA attributes are used in the Spreadsheet component:
41
37
42
38
| Attributes | Purpose |
43
39
|---------------|-------------|
44
40
|`role=textbox`| Identifies an element as an input field that allows text entry.|
45
-
|`role=button`|To represent the element that acts as a button in the component. |
41
+
|`role=button`|Identifies an element that functions as a button. |
46
42
|`role=combobox`| Identifies a component that combines a text input with a popup listbox or tree. |
47
43
|`role=menu`| Defines a container for a collection of choices or commands presented in a contextual or dropdown format. |
48
-
|`role=alert`| Designates an element that displays im portant, time-sensitive information. |
44
+
|`role=alert`| Designates an element that displays important, time-sensitive information. |
49
45
|`aria-label`| This attribute describes the accessible name for the interactive elements. |
50
-
|`aria-expanded`|This attribute describes the control (for example, dropdown) is expanded or collapsed. |
46
+
|`aria-expanded`|Indicates whether a collapsible element (e.g., a dropdown) is currently expanded or collapsed. |
51
47
|`aria-live`| Defines a region as "live", meaning its content updates dynamically. Values include "off", "polite" (waits until idle), or "assertive" (announces immediately). |
52
-
|`aria-rowindex`| Defines row index of the row with respect to the total number of rows within the Spreadsheet. |
53
-
|`aria-colindex`| Defines the column index of the column with respect to the total number of columns within the Spreadsheet. |
48
+
|`aria-rowindex`| Defines the row index of a row with respect to the total number of rows in the Spreadsheet. |
49
+
|`aria-colindex`| Defines the column index of a column with respect to the total number of columns in the Spreadsheet. |
54
50
|`aria-multiline`| Indicates whether a textbox accepts multiple lines of input or only a single line. |
55
51
56
52
57
53
## Keyboard shortcuts
58
54
59
-
The Syncfusion Blazor Spreadsheet followed keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet.
55
+
The Syncfusion Blazor Spreadsheet follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet.
60
56
61
57
<b>Clipboard</b>
62
58
@@ -86,27 +82,27 @@ The Syncfusion Blazor Spreadsheet followed keyboard interaction guidelines, maki
86
82
|-----|----- | -----|
87
83
| <kbd>Page Up</kbd> / <kbd>Page Down</kbd> | <kbd>Fn</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd> |Scrolls up or down one screen at a time.|
88
84
| <kbd>Arrow keys</kbd> | <kbd>Arrow keys</kbd> | Navigates between adjacent cells in the direction of the arrow key.|
89
-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Moves the selection to the cell below.|
90
-
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Moves the selection to the cell above.|
91
-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the selection to the cell on the right.|
92
-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the selection to the cell on the left.|
85
+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Moves the active cell down one row.|
86
+
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Moves the active cell up one row.|
87
+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the active cell right one column.|
88
+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the active cell left one column.|
93
89
94
90
<b>Editing</b>
95
91
96
92
| Windows | MAC | Actions |
97
93
|-----|----- | -----|
98
-
| <kbd>F2</kbd> | <kbd>F2</kbd> |Begin typing in the selected cell.|
99
-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> |Finish typing in the current cell and move to the one below.|
100
-
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> |Finish typing in the current cell and move to the one above.|
101
-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Finish typing in the current cell and move to the one on the right. |
102
-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Finish typing in the current cell and move to the one on the left.|
103
-
| <kbd>Escape</kbd> | <kbd>Esc</kbd> |Cancel editing and return to the original value in the cell.|
94
+
| <kbd>F2</kbd> | <kbd>F2</kbd> |Enters edit mode for the selected cell.|
95
+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> |Confirms the edit and moves the active cell down one row.|
96
+
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> |Confirms the edit and moves the active cell up one row.|
97
+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Confirms the edit and moves the active cell right one column. |
98
+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Confirms the edit and moves the active cell left one column.|
99
+
| <kbd>Escape</kbd> | <kbd>Esc</kbd> |Cancels the edit and restores the cell's original value.|
104
100
105
101
<b>Clear</b>
106
102
107
103
| Windows | MAC | Actions |
108
104
|-----|----- | -----|
109
-
| <kbd>Delete</kbd> | <kbd>Delete</kbd> |Clear contents of the selected cells.|
105
+
| <kbd>Delete</kbd> | <kbd>Delete</kbd> |Clears the contents of the selected cells.|
0 commit comments