Use consistent identification
On Android, you should create custom Views to re-use functionality on multiple screens.
When using icons, use the search function of your IDE to check all instances. The icon should have the same accessibility label on each screen, and the functionality should also be the same.
For example, when using a cross icon for closing a screen, make sure the label is 'Close' on all screens, and check that it always closes a screen.
In Android Studio, you can use the Find Usages option to check if resources are used on multiple screens. Go to your drawable folder, right click and select the Find Usages option. You can also use the shortcut Option + F7 on Mac, or Alt + F7 on Windows.
kotlin
Not available, contribute!In Jetpack Compose, you should create your own Composable, that wraps standard Composable to re-use functionality across multiple screens.
In Android Studio, you can use the Find Usages option to check if resources are used on multiple screens. Go to your drawable folder, right click, and select the Find Usages option. You can also use the shortcut Option + F7 on Mac, or Alt + F7 on Windows.
kotlin
// Custom close icon composable, which can be used in all place to provide correct accessibility label
@Composable
fun ApptCloseIcon(modifier: Modifier = Modifier) {
Icon(
painter = painterResource(R.drawable.ic_close),
contentDescription = "Close", // you should get this label from strings.xml
modifier = modifier
)
}On iOS, you should create custom Views to re-use functionality on multiple screens.
When using icons, use the search function of your IDE to check all instances. The icon should have the same accessibility label on each screen, and the functionality should also be the same.
For example, when using a cross icon for closing a screen, make sure the label is 'Close' on all screens, and check that it always closes a screen.
In Xcode you can use the shortcut Cmd + Shift + F on Mac, or Ctrl + Shift + F on Window to open the global Find function.
swift
Not available, contribute!In SwiftUI, encapsulating functionality within custom View's is a highly recommended practice. This allows for the reuse of components across multiple screens, promoting consistency, reducing redundancy, and simplifying maintenance.
When integrating icons into your app, it is essential to ensure that both their appearance and functionality are uniform. Each icon should have a standardized accessibility label-1d7jv) and perform the same action wherever it appears. This consistency is crucial for providing a predictable and accessible user experience, especially for users who rely on assistive technologies.
For instance, if you're using a cross icon (xmark.circle) to close screens, the accessibility label-1d7jv) should always be Close, and it should consistently trigger the close action across all screens.
swift
struct CloseButton: View {
var action: () -> Void
var body: some View {
Button(action: action) {
Image(systemName: "xmark.circle")
.resizable()
.frame(width: 24, height: 24)
.accessibilityLabel("Close")
}
}
}In Flutter, you should create custom Widgets to re-use functionality on multiple screens.
When using icons, use the search function of your IDE to check all instances. The icon should have the same accessibility label on each screen, and the functionality should also be the same.
For example, when using a cross icon for closing a screen, make sure the label is 'Close' on all screens, and check that it always closes a screen.
dart
Not available, contribute!In React Native, you should create custom Components to re-use functionality on multiple screens.
When using icons, use the search function of your IDE to check all instances. The icon should have the same accessibility label on each screen, and the functionality should also be the same.
For example, when using a cross icon for closing a screen, make sure the label is 'Close' on all screens, and check that it always closes a screen.
jsx
const CloseButton = () => <Pressable
accessibilityLabel="Close screen"
>
<Image
source={require("icon-close.png")}
/>
</Pressable>In MAUI, you should create a custom View or extend an existing one to reuse functionality on multiple screens. You can also customize it via styles.
You can use your IDE's "Find All References" feature to see where the component is referenced.
For example, when using a cross icon for closing a screen, make sure the label is Close on all screens and verify that it consistently closes the screen.
Example of creating a custom UI component:
csharp
public class CustomView : ContentView
{
public CustomView()
{
SemanticProperties.SetDescription(this, "CustomNavigationBar");
Content = new StackLayout
{
};
}
}In Xamarin, you should create custom Views to re-use functionality on multiple screens.
When using icons, use the search function of your IDE to check all instances. The icon should have the same accessibility label on each screen, and the functionality should also be the same.
For example, when using a cross icon for closing a screen, make sure the label is 'Close' on all screens, and check that it always closes a screen.
csharp
Not available, contribute!