Succescriterium 3.1.2 - Niveau AA

Taal van onderdelen

Zorg dat de taal van onderdelen is ingesteld. Soms zijn stukken tekst in een andere taal geschreven. Stel de taal in zodat de tekst op een juiste manier wordt voorgelezen.

Impact

• Mensen met schermlezer kunnen onderdelen van tekst in een andere taal laten voorlezen.

• Zorg dat de taal van tekst die in een andere taal is geschreven correct is ingesteld.

Controleren

“Zijn buitenlandse teksten aangegeven in de respectievelijke taal?“

Dit kan getest worden met de schermlezer.

Let op: dit succescriterium is uitgesloten voor apps in de EN 301 549.

Oplossing

Taal voor tekst instellen

Android

Accessibility language - Android

On Android, you can use LocaleSpan to speak content in a specific language. Multiple LocaleSpan's can be embedded inside a SpannableString to speak content in multiple languages.

Kotlin

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.setText(string)

Bijdragen

Jetpack Compose

Accessibility language - Jetpack Compose

In Jetpack Compose, you can use AnnotatedString inside the text Composable and then use SpanStyle to set locale for a specific part of the text.

Kotlin

val text = buildAnnotatedString {  
    // Setting locale to Dutch for Appt string
    withStyle(style = SpanStyle(localeList = LocaleList("nl"))) {  
        append("Appt")  
    }  
}  
Text(text = text)

Bijdragen

iOS

Accessibility language - iOS

On iOS, the accessibilitySpeechLanguage key of NSAttributedString can be used to speak content in a specific language. Multiple NSAttributedString's can be embedded inside a NSMutableAttributedString to speak content in multiple languages.

In addition, the accessibilityLanguage attribute of the UIAccessibility protocol can be used to set a single language for an element. Many objects implement this protocol, such as UIApplication and UIView.

Swift

element.attributedText = NSAttributedString(
    string: "Appt", 
    attributes: [.accessibilitySpeechLanguage: "nl_NL"]
)

application.accessibilityLanguage = "nl_NL"
view.accessibilityLanguage = "nl_NL"

Bijdragen

SwiftUI

Accessibility language - SwiftUI

In SwiftUI, the accessibilitySpeechLanguage key of AttributedString can be used to speak content in a specific language. Multiple AttributedStrings can be embedded inside a single AttributedString by using the + operator to speak content in multiple languages.

Swift

let attributedString = AttributedString(
    "Appt",
    attributes: AttributeContainer([
        .accessibilitySpeechLanguage: "nl_NL"
    ])
)

Text(attributedString)

Bijdragen

In SwiftUI, you can also easily add localized accessibility features to any view using the accessibilityLabel and accessibilityHint modifiers. These modifiers accept a LocalizedStringKey, making it straightforward to provide localized descriptions and hints for your UI components. This simplifies the process of supporting multiple languages in your app's UI and accessibility technologies.

To effectively follow along with this sample, ensure your project is set up with a Localizable.strings file that includes all of your app's localized texts.

Swift

Button(action: {
    // Action here
}) {
    Text("search_title")
}
.accessibilityLabel(Text("search_accessibility_label"))
.accessibilityHint(Text("search_accessibility_hint"))

Bijdragen

Flutter

Accessibility language - Flutter

With Flutter, the locale parameter of Text or TextSpan can be used to specify the locale for a piece of text. Multiple TextSpan elements can be combined to speak content in multiple languages.

Dart

/// Text implementation
Text(
  'Appt',
  locale: Locale.fromSubtags(languageCode: 'nl'),
);

/// TextSpan implementation
TextSpan(
  text: 'Appt',
  locale: Locale.fromSubtags(languageCode: 'nl'),
);

Bijdragen

React Native

Accessibility language - React Native

In React Native, there is limited support to change the accessibility language. The accessibilityLanguage prop of Text only works on iOS. Multiple Text elements can be combined to speak content in multiple languages.

JSX

<Text>
  <Text accessibilityLanguage="nl-NL">Appt</Text>
  <Text>is an accessibility platform.</Text>
</Text>

Bijdragen

.NET MAUI

Accessibility language - .NET MAUI

In MAUI, there is no built-in support to indicate which language should be used by assistive technologies when reading content.

C#

Not available, contribute!

Bijdragen

Xamarin

Accessibility language - Xamarin

Unfortunately, Xamarin Forms does not have support for changing the accessibility language. When you use HTML such as <span lang="nl">Appt</span> inside a Label, the lang attribute is not used. You can create a component with a custom renderer with native Android and iOS logic. If you have done this, please contribute code.

C#

Not available, contribute!

Bijdragen

Bronnen

• WCAG 2.2 - Succescriterium 3.1.2 - Taal van onderdelen