From 1dc765ec7ec6e899b1f198f5c2738fa2336d4404 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Tue, 8 Apr 2025 16:41:27 +0530 Subject: [PATCH 1/3] Semantic Focus Configuration and Enterprise Settings --- .../accessibility.md | 48 ++++++++++++++++++- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/docs/ff-concepts/localization-accessibility/accessibility.md b/docs/ff-concepts/localization-accessibility/accessibility.md index 6753528e..b747b6c3 100644 --- a/docs/ff-concepts/localization-accessibility/accessibility.md +++ b/docs/ff-concepts/localization-accessibility/accessibility.md @@ -24,10 +24,12 @@ Here are some key accessibility features you can use: ## Semantic Label -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. +**Semantic Labels** enhance your app’s accessibility and SEO by providing meaningful context about widgets for screen readers and search engines. These descriptions are especially helpful for users relying on assistive technologies. For example, in an e-commerce app, you can add a semantic label to an '*Add to Bag*' button with a message like '*Add the selected item to cart*', which helps users better understand the button's action. +You can also dynamically set semantic labels using variables or expressions. This allows the label to change based on the app context, so screen readers announce exactly what’s on the screen instead of generic terms like "image" or "button." For example, a product image can read out the product name (e.g., "Red Running Shoes" pulled from Firestore) instead of just saying "image." + To add a semantic label for any widget, select the widget, move to the properties panel (right side), tap the document icon inside the **Accessibility & Semantic Label** section, add the message, and click **Save**. @@ -37,7 +39,7 @@ To add a semantic label for any widget, select the widget, move to the propertie height: 0, width: '100%'}}>