Skip to main content

Success Criterion 1.1.1 - Level A

Non-text Content

Ensure that alternative text is available for all non-text content. This includes images, icons and graphs. Describe the meaning of this content. Blind people use their screen reader to read out this description. Alternative text can also be useful for anyone who is unsure about the meaning of non-text content.

Impact

Alternative text can help anyone understand the meaning of icons, photos, and other images.
People with a visual impairment can use their screen reader to read what is being shown.
People who are deafblind can read the content in braille.

Check

"Is alternative text available for all non-text content?”

You can use the screen reader or voice control to check alternative text.

Exception: It is not necessary to provide alternative text for decorative images. In this case, you should also make sure that assistive technologies cannot focus on the image.

Solution

Set accessibility label

Accessibility label - Android

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)

Accessibility label - Jetpack Compose

In Jetpack Compose, you can use the contentDescription or 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...
}

Accessibility label - iOS

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.text

Accessibility label - SwiftUI

In SwiftUI, the accessibilityLabel(_:) 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")

You can enhance accessibility in SwiftUI by using the Text initializer with an AttributedString parameter, offering precise control over pronunciation. For instance, you can spell out each character using .accessibilitySpeechPunctuation or specify a language with .accessibilitySpeechLanguage.

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)

When dealing with long labels, consider using accessibilityInputLabels to provide alternative labels. The primary label comes first in the array, followed by optional alternative labels arranged in decreasing order of relevance.

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"
])

Accessibility label - Flutter

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;
);

Accessibility label - React Native

In React Native, you can set an accessibility label by using the accessibilityLabel prop.

JSX

<Control
  accessibilityLabel="Appt" />

Accessibility label - .NET MAUI

In MAUI, you can set an accessibility label by using the SemanticProperties.Description property.

XML

<Control 
  SemanticProperties.Description="Appt" />

As an alternative, you can link a label by setting IsInAccessibleTree to false and setting SemanticProperties.Description the value of the label.

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" />

Note: SemanticProperties.Description will supersede the value of AutomationProperties.IsInAccessibleTree.

In the sample below, the text from SemanticProperties.Description will be spoken regardless of the value of AutomationProperties.IsInAccessibleTree.

XML

<Label
    x:Name="Welcome"
    AutomationProperties.IsInAccessibleTree="False"
    SemanticProperties.Description="Welcome to Appt (will be sproken)"
    Text="Welcome to Appt"
    FontSize="18"
    HorizontalOptions="Center" />

Accessibility label - Xamarin

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

Accessibility focusable - Android

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_NO

XML

<View
  android:importantForAccessibility="no" />

Accessibility focusable - Jetpack Compose

In Jetpack Compose, you can use the 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 property inside the semantics block modifier, so make sure that isn't set.

If Composable doesn't expose the contentDescription property, you can use the invisibleToUser property inside the semantics 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,
)

// Make element invisible for assistive techonologies
Text(
    text = "",
    modifier = Modifier.semantics {
        invisibleToUser()
    }
)

// Make element focusable
Box(modifier = Modifier.focusable()) {
    // Box content...
}

Accessibility focusable - iOS

On iOS, you can use the isAccessibilityElement property to indicate whether assistive technologies can focus on an element.

Swift

element.isAccessibilityElement = false

Accessibility focusable - SwiftUI

In SwiftUI, you can use the accessibilityHidden modifier to hide or expose an element from assistive technologies.

Swift

    Image(systemName: "envelope")
        .accessibilityHidden(true)

Accessibility focusable - Flutter

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();
);

Accessibility focusable - React Native

In React Native, the accessible property indicates whether assistive technologies can focus on an element.

JSX

<View accessible />

Accessibility focusable - .NET MAUI

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>

Accessibility focusable - Xamarin

In Xamarin, the IsInAccessibleTree property indicates whether assistive technologies can focus on an element.

XML

<Image 
  AutomationProperties.IsInAccessibleTree="False" />

Resources

WCAG 2.2 - Success Criterion 1.1.1 - Non-text Content