Skip to content

Commit 94fa019

Browse files
committed
address review comments
1 parent 2722586 commit 94fa019

File tree

2 files changed

+10
-15
lines changed

2 files changed

+10
-15
lines changed

docs/ff-concepts/localization-accessibility/accessibility.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,11 @@ Here are some examples of how accessibility can help users with disabilities:
1818
- **Keyboard Navigation for Physical Impairments**: Users unable to use touchscreens can navigate the app effectively with keyboard controls.
1919
- **Haptic Feedback**: Tactile responses help users with visual or motor impairments understand when interactions are successful.
2020

21-
## Adding Accessibility
22-
2321
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.
2422

2523
Here are some key accessibility features you can use:
2624

27-
### Semantic Label
25+
## Semantic Label
2826

2927
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.
3028

@@ -73,25 +71,25 @@ After you add semantic labels, enable **TalkBack** on Android or **VoiceOver** o
7371

7472
Learn more about [enabling screen reader on your device](https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility#screen-readers).
7573

76-
### Keyboard Navigation
74+
## Keyboard Navigation
7775

7876
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.
7977

8078
It enhances accessibility by allowing users to interact without relying solely on a mouse or touchscreen, making the experience more inclusive and efficient.
8179

82-
### Haptic Feedback
80+
## Haptic Feedback
8381

8482
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.
8583

8684
For example, vibrating the user's device when successfully submitting a form.
8785

88-
### Responsive Fonts
86+
## Responsive Fonts
8987

9088
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.
9189

9290
[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.
9391

94-
### Color Contrast
92+
## Color Contrast
9593

9694
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.
9795

docs/ff-concepts/localization-accessibility/localization.md

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ Note that this action affects only the app's language and does not modify the de
9797

9898
There are two ways you can manage the app text translation:
9999

100-
### Inside Language Settings
100+
**Inside Language Settings**
101101

102102
The Language Settings page lists all of your app's text, grouped by page, making it easy to manage translations in bulk.
103103

@@ -107,7 +107,7 @@ To use Google Translate for new or existing text, click **Translate Page.**
107107

108108
![manage-translation-in-language-settings.avif](imgs/manage-translation-in-language-settings.avif)
109109

110-
### Inside Properties Panel
110+
**Inside Properties Panel**
111111

112112
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.
113113

@@ -172,11 +172,8 @@ These options are accessible through **Set from Variable > Internationalization*
172172

173173
![retrieve-lang-data.png](imgs/retrieve-lang-data.png)
174174

175-
## Formatting Dates, Numbers, and Currency
176175

177-
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
180177

181178
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.
182179

@@ -195,15 +192,15 @@ For custom locale-specific date formats, you can also [**create your own pattern
195192

196193
:::
197194

198-
### Numbers
195+
## Localizing Numbers
199196

200197
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.
201198

202199
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**.
203200

204201
![localize-numbers.avif](imgs/localize-numbers.avif)
205202

206-
### Currency
203+
## Localizing Currency
207204

208205
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 €`).
209206

0 commit comments

Comments
 (0)