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
title: Accessibility in Blazor File Upload Component | Syncfusion
4
-
description: Checkout and learn here all about accessibility in Syncfusion Blazor File Upload componentand more.
4
+
description: Learn about accessibility features in the Syncfusion Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards.
5
5
platform: Blazor
6
6
control: File Upload
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor File Upload Component
11
11
12
-
The [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) component adheres to accepted 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) commonly used to evaluate accessibility. The component provides ARIA-compliant structures for buttons and status updates to ensure compatibility with screen readers and assistive technologies.
12
+
The Syncfusion [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It offers built-in ARIA accessibility support, making it compatible with screen readers and other assistive technologies.
13
13
14
-
The accessibility compliance for the Blazor Uploader component is outlined below.
14
+
The accessibility compliance for the Blazor File Upload component is outlined below:
@@ -30,31 +30,32 @@ The accessibility compliance for the Blazor Uploader component is outlined below
30
30
margin: 0.5em0;
31
31
}
32
32
</style>
33
+
33
34
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
34
35
35
36
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not fully meet the requirement.</div>
36
37
37
38
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
38
39
39
-
## Keyboard interaction
40
+
## Keyboard Navigation
40
41
41
42
The Blazor Uploader component includes complete ARIA support for operation with screen readers and other assistive technologies. Focus moves predictably through interactive elements such as the browse button, file list items, and action buttons (remove, retry, and clear). Status updates (for example, upload progress and error messages) are exposed to assistive technologies.
42
43
43
44
The following are the standard keys that work in the Uploader component:
44
45
45
46
| Windows | Mac | Actions |
46
47
| --- | --- | --- |
47
-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Move focus to the next focusable element. |
48
-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Move focus to the previous focusable element. |
49
-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> |Invoke the action of the focused button or control. |
50
-
| <kbd>Esc</kbd> | <kbd>Esc</kbd> |Close only the file browser dialog and cancel an in-progress upload when a file is being dropped. |
48
+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Moves focus to the next focusable element. |
49
+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Moves focus to the previous focusable element. |
50
+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> |Triggers the action associated with the focused button element. |
51
+
| <kbd>Esc</kbd> | <kbd>Esc</kbd> |Closes the file selection dialog. If a file drop is in progress, it cancels the upload. |
51
52
52
-
## Ensuring accessibility
53
+
## Ensuring Accessibility
53
54
54
-
The Blazor Uploader component's accessibility levels are validated using the[axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. The component supports ARIA attributes, roles, and live region announcements for status changes to improve the experience for screen reader users. Text labels, button tooltips, and status messages can be localized to support accessibility across languages and regions.
55
+
The Blazor File Upload component's accessibility levels are ensured through an[axe-core](https://www.npmjs.com/package/axe-core)software tool during automated testing.
55
56
56
-
The accessibility compliance of the Uploader component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the Uploader component with accessibility tools.
57
+
The accessibility compliance of the File Upload component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the component with accessibility tools.
57
58
58
-
## See also
59
+
## See Also
59
60
60
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> components](../common/accessibility)
61
+
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Components](../common/accessibility)
title: Localization in Blazor File Upload Component | Syncfusion
4
-
description: Checkout and learn here all about Localization in Syncfusion Blazor File Upload component and much more.
4
+
description: Learn how to translate labels and tooltips in the Syncfusion Blazor File Upload component to different cultures.
5
5
platform: Blazor
6
6
control: File Upload
7
7
documentation: ug
8
8
---
9
9
10
10
# Localization in Blazor File Upload Component
11
11
12
-
[Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component supports localization so that built‑in UI text (such as button labels, tooltips, and status/error messages) is displayed in the user’s preferred language. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<supstyle="font-size:70%">®</sup> Blazor components.
12
+
The Syncfusion Blazor File Upload component can be localized to display static text, such as button labels and tooltips, in different languages. This is achieved by adding a resource file (`.resx`) for each culture and referencing it in your application.
13
+
14
+
The following UI elements of the File Upload component can be localized:
15
+
16
+
***Browse button text:** The label for the file selection button.
17
+
***Drop area hint:** The "Or drop files here" message.
18
+
***File status messages:** Text indicating success, failure, or upload progress.
19
+
***Action button tooltips:** Tooltips for buttons like "Clear" and "Upload."
20
+
21
+
To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic.
0 commit comments