special-characters
Mobile validation
Emoji and other special characters are defined by Unicode, but they can look and sound different across platforms, and some have ambiguous meanings. A screen reader may announce “🛒” as “shopping cart” on one platform and “trolley” on another, and some symbols, such as certain currency signs (₽, ¥, ₴, ₪), may not be pronounced at all. These differences change how assistive technologies announce a control and how people interpret its purpose, and voice input users may not know what to say to activate it. Use special characters and emoji in control names only when they are essential. When a control shows a symbol, give it an accessible name in words that clearly describes its purpose.
Pass Patterns
Android
XML Views
The button shows an emoji, and its contentDescription, “Cart”, gives it a name in words.
<Button
android:id="@+id/likeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="★"
android:contentDescription="Cart" />iOS
The button shows an emoji, and its accessibilityLabel, “★”, gives it a name in words.
let likeButton = UIButton(type: .system)
likeButton.setTitle("★", for: .normal)
likeButton.accessibilityLabel = "Like"The button shows an emoji, and its accessibilityLabel, “Like”, gives it a name in words.
Button("★") {
like()
}
.accessibilityLabel("Like")Cross Platform
The button shows an emoji, and its semanticsLabel, “Like”, gives it a name in words.
ElevatedButton(
onPressed: ...,
child: const Text('★', semanticsLabel: 'Like'),
),The button shows an emoji, and its accessibilityLabel, “Like”, gives it a name in words.
<Pressable
accessibilityRole="button"
accessibilityLabel="Like"
onPress={...}
>
<Text>★</Text>
</Pressable>Fail Patterns
Some examples of failing characters are: ₽¥₴₪ - this is not an exhaustive list, but screen readers may not be able to pronounce these characters.
Android
The button's only name is the emoji “**”.
<Button
android:id="@+id/likeButton"
android:layout_width="..."
android:layout_height="..."
android:text="★" />The button's only name is the emoji “★”.
Button(onClick = { like() }) {
Text("★")
}iOS
The button's only name is the emoji “★”.
let cartButton = UIButton(type: .system)
cartButton.setTitle("★", for: .normal)The button's only name is the emoji “★”.
Button("★") {
like()
}Cross Platform
The button's only name is the emoji “★”.
ElevatedButton(
onPressed: openCart,
child: const Text('★'),
),The button's only name is the emoji “★”.
<Pressable accessibilityRole="button" onPress={...}>
<Text>★</Text>
</Pressable>Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Turn on VoiceOver on iOS, or TalkBack on Android.
- Swipe right or left to move to the control.
- Listen to its name.
Expected results: The name is announced in words that clearly describe the control's purpose, for example “Cart, button”.
Actual results: The name is announced as an emoji description or symbol name that is unclear or differs from what users expect, or is not announced at all.
Using voice input
New to voice input testing, or need a refresher?
Review this article first: Practical guides for using voice input
- Turn on Voice Control on iOS, or Voice Access on Android.
- Say “Show names” on iOS, or “Show labels” on Android.
- Check the names shown for controls with symbols or emoji.
Expected results: Each control shows a name in words that you can say to activate it.
Actual results: A control shows a symbol or emoji as its name, so it is unclear what to say to activate it.
FAQ
Why is this issue marked as Best Practice?
Users can usually still find and operate the control, but its name may be announced unclearly or inconsistently, and voice input users may need extra effort to activate it, so it is rated best practice.