Add descriptive headings
In Jetpack Compose, headers can be marked as heading.heading()).
kotlin
Text(
text = "Heading text",
modifier = Modifier.clearAndSetSemantics {
heading()
}
)In SwiftUI, headers can be created with Text views and supplied with a String value.
It is recommended to set the font style to .headline and add the .isHeader trait to improve navigation when using assistive technologies.
swift
Text("Appt Settings")
// Sets the font style
.font(.headline)
// Adds the header trait for accessibility
.accessibilityAddTraits(.isHeader)In Flutter, headers created with Text can be changed with the unnamed data property.
dart
Semantics(
header: true,
child: Text('Descriptive header')
);In React Native, headers created by using Text can be changed by using a state hook.
jsx
<Text accessibilityRole="header">
Descriptive header
</Text>In MAUI, there heading levels is a built-in feature that can be used to mark headings.
Usage (C#)
csharp
var headerLabel = new Label
{
Text = "Hello"
};
SemanticProperties.SetHeadingLevel(headerLabel, SemanticHeadingLevel.Level1);xml
<Label
SemanticProperties.HeadingLevel="Level1"
Text="Hello" />Add descriptive labels
In Jetpack Compose, interface labels can be created with the Text) Composable. The displayed text can be changed with the text parameter.
kotlin
Text(text = "Descriptive label")In SwiftUI, labels can be created with Text view and supplied with a String value.
swift
Text("Documents")swift
Label("Documents", systemImage: "folder")In Flutter, labels created with Text can be changed with the unnamed data property.
dart
Text('Descriptive label')In React Native, labels created by using Text can be changed by using a state hook.
jsx
<Text>Descriptive label</Text>