Set accessibility label
On Android, you can use the contentDescription attribute to set an accessibility label.
You can also pass any kind of Span for greater control over pronunciation. For example, you can set a language by using LocaleSpan.
If another element is used to display the label, you can link the label by using the labelFor) attribute.
kotlin
// Set accessibility label
element.contentDescription = "Appt"
// Set accessibility label in Dutch language
val locale = Locale.forLanguageTag("nl-NL")
val localeSpan = LocaleSpan(locale)
val string = SpannableString("Appt")
string.setSpan(localeSpan, 0, string.length, Spanned.SPAN_INCLUSIVE_INCLUSIVE)
element.contentDescription = localeSpan
// Link visual label to field
textView.setLabelFor(R.id.editText)In Jetpack Compose, you can use the contentDescription.contentDescription()) or text.text()) properties to set an accessibility label. ContentDescription is used for more visual elements, like icons and images. Text is used for text elements.
You can pass any kind of AnnotatedString for greater control over pronunciation.
kotlin
// set contentDescription
Box(modifier = Modifier.semantics {
contentDescription = "Appt"
}) {
// Box content...
}
// set text
Box(modifier = Modifier.semantics {
text = AnnotatedString("Appt")
}) {
// Box content...
}On iOS, you can use the accessibilityLabel property to set an accessibility label.
You can also use the attributedAccessibilityLabel property for greater control over pronunciation. For example, spell out each character with .accessibilitySpeechPunctuation or set a language using .accessibilitySpeechLanguage.
The accessibility label should be as short as possible, while still being intuitive. When long labels cannot be avoided, you should use accessibilityUserInputLabels to provide alternative labels. The primary label is first in the array, optionally followed by alternative labels in descending order of importance.
If another element is used to display the label, you can link the label by setting isAccessibilityElement to false and setting accessibilityLabel to the value of the label.
swift
// Set accessibility label
element.accessibilityLabel = "Appt"
// Set accessibility label with Dutch speech engine
element.attributedAccessibilityLabel = NSAttributedString(
string: "Appt",
attributes: [.accessibilitySpeechLanguage: "nl-NL"]
)
// Set accessibility label for controls
element.accessibilityUserInputLabels = ["Appt", "Alternative"]
// Link visual label
label.isAccessibilityElement = false
element.accessibilityLabel = label.textIn SwiftUI, the accessibilityLabel(_:)-5f0zj) view modifier is used to assign an accessibility label to a view. It's essential to keep the accessibility label concise yet meaningful for optimal usability.
swift
Image("appt_logo")
.accessibilityLabel("Appt logo")swift
let attributeContainer = AttributeContainer([
.accessibilitySpeechPunctuation: true,
.accessibilitySpeechLanguage: "en_US"
])
// Initialize `AttributedString` with the desired text and the `AttributeContainer`
let attributedString = AttributedString("Appt", attributes: attributeContainer)
Text(attributedString)swift
Link(destination: URL(string: "https://appt.org/en/")!, label: {
Text("Appt.org")
})
// Primary and alternative labels in descending order of importance
.accessibilityInputLabels([
"Appt website",
"Appt"
])In Flutter, the semanticsLabel property is used as accessibility name.
You can also use the attributedLabel property for greater control over pronunciation. For example, spell out each character with SpellOutStringAttribute or set a language using LocaleStringAttribute.
For even more control, you can use the Semantics widget. For example, if you want to ignore the semantics of underlaying widgets, you can set the excludeSemantics attribute to true.
dart
Control(
semanticsLabel: 'Appt'
)
Semantics(
label: 'Appt',
attributedLabel: AttributedString('Appt', attributes: [
SpellOutStringAttribute(range: const TextRange(start: 0, end: 3))
]),
excludeSemantics: true;
);In React Native, you can set an accessibility label by using the accessibilityLabel prop.
jsx
<Control
accessibilityLabel="Appt" />In MAUI, you can set an accessibility label by using the SemanticProperties.Description property.
xml
<Control
SemanticProperties.Description="Appt" />xml
<Image
Source="appt.png"
SemanticProperties.Description="{Binding Source={x:Reference Welcome}, Path=Text}"
HeightRequest="200"
HorizontalOptions="Center" />
<Label
x:Name="Welcome"
AutomationProperties.IsInAccessibleTree="False"
Text="Welcome to Appt"
FontSize="18"
HorizontalOptions="Center" />xml
<Label
x:Name="Welcome"
AutomationProperties.IsInAccessibleTree="False"
SemanticProperties.Description="Welcome to Appt (will be sproken)"
Text="Welcome to Appt"
FontSize="18"
HorizontalOptions="Center" />In Xamarin Forms, you can set an accessibility label by using the AutomationProperties.Name property.
If another element is used to display the label, the AutomationProperties.LabeledBy property be used to link a label. Unfortunately, LabeledBy only works on Android.
As an alternative, you can link a label by setting IsInAccessibleTree to false and setting AutomationProperties.Name the value of the label.
xml
<Control
AutomationProperties.Name="Appt" />Disable accessibility focus
On Android, you can use the setImportantForAccessibility) method to set whether assistive technologies can focus on an element. You can also set this property directly in XML by using the android:importantForAccessibility property.
kotlin
view.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NOxml
<View
android:importantForAccessibility="no" />In Jetpack Compose, you can use the contentDescription.contentDescription()) to hide an element (like an image) from assistive technologies. Set the contentDescription property to null, the assistive technology will then look for the text.text()) property inside the semantics.semantics(kotlin.Boolean,kotlin.Function1)) block modifier, so make sure that isn't set.
If Composable doesn't expose the contentDescription property, you can use the hideFromAccessibility.hideFromAccessibility()) property inside the semantics.semantics(kotlin.Boolean,kotlin.Function1)) block modifier, to hide an element from assistive techonologies.
If, on the contrary, you want to make a certain element focusable, use the focusable modifier. By design, some Composables are focusable, such as a Button or a Composable with the clickable modifier attached to it.
kotlin
// Set contentDescription to null
Image(
painter = /* your painter */,
contentDescription = null,
)
// Hide element for assistive techonologies
Text(
text = "",
modifier = Modifier.semantics {
hideFromAccessibility()
}
)
// Make element focusable
Box(modifier = Modifier.focusable()) {
// Box content...
}On iOS, you can use the isAccessibilityElement property to indicate whether assistive technologies can focus on an element.
swift
element.isAccessibilityElement = falseIn SwiftUI, you can use the accessibilityHidden) modifier to hide or expose an element from assistive technologies.
swift
Image(systemName: "envelope")
.accessibilityHidden(true)On Flutter, the focusable property of SemanticsProperties can be used to indicate whether assistive technologies can focus on an element.
dart
Semantics(
focusable: false,
child: Widget();
);In React Native, the accessible property indicates whether assistive technologies can focus on an element.
jsx
<View accessible />In MAUI, the IsInAccessibleTree property indicates whether assistive technologies can focus on an element.
Also, the ExcludedWithChildren property determines if an element and its children can be focused by assistive technologies.
xml
<Image
AutomationProperties.IsInAccessibleTree="false" />
<StackLayout AutomationProperties.ExcludedWithChildren="true">
...
</StackLayout>In Xamarin, the IsInAccessibleTree property indicates whether assistive technologies can focus on an element.
xml
<Image
AutomationProperties.IsInAccessibleTree="False" />