Support content skipping
On Android, skipping content is mostly relevant to TalkBack users. TalkBack includes a local context menu which allows users to jump to the following content types:
- Headings - Links - Controls - Text - Paragraphs - Lines - Characters - Words
Jumping to headings and links is used most often.
Provide appropriate accessibility markup to your content by using ViewCompat and AccessibilityNodeInfoCompat.
kotlin
// Mark headings
ViewCompat.setAccessibilityHeading(heading, true)
// Mark links
ViewCompat.enableAccessibleClickableSpanSupport(link)In Jetpack Compose, skipping content is mostly relevant to TalkBack users. TalkBack includes a local context menu which allows users to jump to the following content types:
- Headings - Links - Controls - Text - Paragraphs - Lines - Characters - Words
Jumping to headings and links is used most often.
Provide appropriate accessibility markup to your content by using either semantics.semantics(kotlin.Boolean,kotlin.Function1)) or other methods, depending on the situation.
kotlin
// Mark headings
Text(
text = "Heading text",
modifier = Modifier.clearAndSetSemantics {
heading()
}
)
// Mark links
val textWithLink = buildAnnotatedString {
append("Learn more about ")
// adding clickable url
withLink(
LinkAnnotation.Url(
url = "https://appt.org",
// adding style for the url
styles = TextLinkStyles(
style = SpanStyle(textDecoration = TextDecoration.Underline, color = Color.Blue)
)
)
) {
append("Appt")
}
}
Text(textWithLink)On iOS, skipping content is mostly relevant to VoiceOver users. VoiceOver includes a rotor which allows users to jump to the following content types:
- Headers - Links - Form Controls - Containers - Text - Lines - Characters - Words
Jumping to headers and links is used most often.
Provide appropriate accessibility markup to your content by using accessibilityTraits.
swift
header.accessibilityTraits = .header
header.accessibilityTraits = .linkIn SwiftUI, skipping content is mostly relevant to VoiceOver users. VoiceOver includes a rotor which allows users to jump to the following content types:
- Headers - Links - Form Controls - Containers - Text - Lines - Characters - Words
Jumping to headers and links is used most often.
Provide appropriate accessibility markup to your content by using accessibilityAddTraits) view modifier.
swift
Text("Appt")
.font(.largeTitle)
.accessibilityAddTraits(.isHeader)
Button("Visit Appt") {
// Open URL
}
.accessibilityAddTraits(.isLink)In Flutter, skipping content is mostly relevant to TalkBack and VoiceOver users. Both screen readers include shortcuts which allows users to jump to content types, such as headers and links.
Provide appropriate accessibility markup to your content by using Semantics.
dart
Semantics(
header: true,
link: true,
child: Widget(...)
);In React Native, skipping content is mostly relevant to TalkBack and VoiceOver users. Both screen readers include shortcuts which allows users to jump to content types, such as headers and links.
Provide appropriate accessibility markup to your content by using accessibilityRole.
jsx
<Pressable
accessibilityRole="header|link" />In MAUI, skipping content is mostly relevant to TalkBack and VoiceOver users. Both screen readers include shortcuts that allow users to jump to content types. MAUI offers a built-in heading levels feature that can be used to set up which elements and their position to read. You can also set AutomationProperties.IsInAccessibleTree to false if you want to make a UI element not available to the screen reader.
Usage (C#)
csharp
var headerLabel = new Label
{
Text = "Hello"
};
SemanticProperties.SetHeadingLevel(headerLabel, SemanticHeadingLevel.None);
AutomationProperties.SetIsInAccessibleTree(headerLabel, false);xml
<Label
SemanticProperties.HeadingLevel="None"
AutomationProperties.IsInAccessibleTree="False"
Text="Hello" />In Xamarin, skipping content is mostly relevant to TalkBack and VoiceOver users. Both screen readers include shortcuts which allows users to jump to content types, such as headers and links.
Provide appropriate accessibility markup to your content by using SemanticEffect.
csharp
<controls:CustomFontLabel
xct:SemanticEffect.HeadingLevel="1"
xct:SemanticEffect.Description="Link" />