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: docs/ff-concepts/localization-accessibility/accessibility.md
+5-7Lines changed: 5 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,13 +18,11 @@ Here are some examples of how accessibility can help users with disabilities:
18
18
-**Keyboard Navigation for Physical Impairments**: Users unable to use touchscreens can navigate the app effectively with keyboard controls.
19
19
-**Haptic Feedback**: Tactile responses help users with visual or motor impairments understand when interactions are successful.
20
20
21
-
## Adding Accessibility
22
-
23
21
In FlutterFlow, you can enhance the accessibility of your app by incorporating various accessibility features, such as semantic labels, keyboard navigation, haptic feedback, responsive fonts, and proper color contrast.
24
22
25
23
Here are some key accessibility features you can use:
26
24
27
-
###Semantic Label
25
+
## Semantic Label
28
26
29
27
You can use **Semantic Labels** to provide custom descriptions, hints, or to emphasize the importance of specific parts of the widget tree. This ensures that screen reader users receive clear and meaningful information about each widget more effectively.
30
28
@@ -73,25 +71,25 @@ After you add semantic labels, enable **TalkBack** on Android or **VoiceOver** o
73
71
74
72
Learn more about [enabling screen reader on your device](https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility#screen-readers).
75
73
76
-
###Keyboard Navigation
74
+
## Keyboard Navigation
77
75
78
76
You can use the [On Shortcut Press](../../resources/ui/pages/page-lifecycle.md#on-shortcut-press-action-trigger) action trigger to bind keyboard shortcuts to specific actions. This makes it easier for users with disabilities to navigate your app, especially in web and desktop environments.
79
77
80
78
It enhances accessibility by allowing users to interact without relying solely on a mouse or touchscreen, making the experience more inclusive and efficient.
81
79
82
-
###Haptic Feedback
80
+
## Haptic Feedback
83
81
84
82
Using [Haptic Feedback](../alerts-notification/haptic-feedback.md), you can vibrate the user's device, which is particularly helpful for users with visual or cognitive impairments. It provides a tactile response to indicate that an action has been completed.
85
83
86
84
For example, vibrating the user's device when successfully submitting a form.
87
85
88
-
###Responsive Fonts
86
+
## Responsive Fonts
89
87
90
88
When developing an app, it's important to consider the different platforms on which it will run. Text may appear smaller on devices with higher screen resolution, such as tablets, web, or desktops, which can negatively impact accessibility for users with visual impairments.
91
89
92
90
[Adding responsive text](../design-system/design-system.md#adding-responsive-text-styles) that adjusts font size based on the platform helps make content more readable, improving accessibility for users who need larger or more legible text.
93
91
94
-
###Color Contrast
92
+
## Color Contrast
95
93
96
94
Use sufficient color contrast to make text and interactive elements readable for users with visual impairments or color blindness. This helps ensure that content is easily distinguishable, even for users with limited vision. Learn more about using various ways to [add colors](../design-system/design-system.md#colors) in your FlutterFlow app.
You can also add or update translations for individual text directly inside the properties panel. To do so, select the widget (e.g., Text, TextField, etc.), go to the properties panel, and click on the Globe icon. This will open a new panel.
113
113
@@ -172,11 +172,8 @@ These options are accessible through **Set from Variable > Internationalization*
Localization isn't just about translating strings. It also involves adapting dates, numbers, and currencies to the user's locale.
178
-
179
-
### Dates
176
+
## Localizing Dates
180
177
181
178
To ensure your app displays dates in formats familiar to users from different regions, you can use the predefined **DateTime Format Options** while displaying dates.
182
179
@@ -195,15 +192,15 @@ For custom locale-specific date formats, you can also [**create your own pattern
195
192
196
193
:::
197
194
198
-
###Numbers
195
+
##Localizing Numbers
199
196
200
197
Different regions use different symbols for decimal and thousand separators. For example, the U.S. uses a period for decimals and a comma for thousands, while many European countries use the opposite.
201
198
202
199
To localize the numbers, set the [**Number Format Options**](../../resources/ui/widgets/basic-widgets/text.md#formatting-numbers) to **Decimal** and then set the **Decimal Type** to **Automatic**.
Currency symbols and their placement vary by locale. For example, in the U.S., the dollar sign appears before the amount (`$1,000.00`), whereas in countries like France, the currency symbol is placed after the amount (e.g., `1 000,50 €`).
0 commit comments