Skip to content

Commit bc5a112

Browse files
authored
983306: Re-structing the Accessibility and Localization section of File uploader.
1 parent 5e01a06 commit bc5a112

File tree

2 files changed

+27
-17
lines changed

2 files changed

+27
-17
lines changed
Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
22
layout: post
33
title: Accessibility in Blazor File Upload Component | Syncfusion
4-
description: Checkout and learn here all about accessibility in Syncfusion Blazor File Upload component and 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.
55
platform: Blazor
66
control: File Upload
77
documentation: ug
88
---
99

1010
# Accessibility in Blazor File Upload Component
1111

12-
The [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) 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+
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.
1313

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:
1515

1616
| Accessibility Criteria | Compatibility |
1717
| -- | -- |
1818
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
1919
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
2020
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21-
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22-
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21+
| [Right-To-Left (RTL) Support](../common/accessibility#right-to-left-rtl-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22+
| [Color Contrast Support](../common/accessibility#color-contrast-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
2323
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
2424
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
2525
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
@@ -30,31 +30,32 @@ The accessibility compliance for the Blazor Uploader component is outlined below
3030
margin: 0.5em 0;
3131
}
3232
</style>
33+
3334
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
3435

3536
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
3637

3738
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
3839

39-
## Keyboard interaction
40+
## Keyboard Navigation
4041

4142
The Blazor Uploader component characterized with complete ARIA accessibility support that helps to be accessible by on-screen readers and other assistive technology devices.
4243

4344
The following are the standard keys that works on uploader component:
4445

4546
| Windows | Mac | Actions |
4647
| --- | --- | --- |
47-
| <kbd>Tab</kbd> | <kbd>Tab</kbd| Move focus to next element. |
48-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd| Move focus to previous element. |
49-
| <kbd>Enter</kbd> | <kbd>Enter</kbd| Triggers corresponding action to button element. |
50-
| <kbd>Esc</kbd> | <kbd>Esc</kbd| Close the file browser dialog alone and cancels the upload on drop the file. |
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. |
5152

52-
## Ensuring accessibility
53+
## Ensuring Accessibility
5354

54-
The Blazor Uploader component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
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.
5556

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.
5758

58-
## See also
59+
## See Also
5960

60-
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)
61+
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Components](../common/accessibility)

blazor/file-upload/localization.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
---
22
layout: post
33
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.
55
platform: Blazor
66
control: File Upload
77
documentation: ug
88
---
99

1010
# Localization in Blazor File Upload Component
1111

12-
[Blazor FileUpload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</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

Comments
 (0)