Chat GPT: Fun fake news
5 minute read
Android’s reusable resizing strategy
Properly-sized text components are essential for accessibility, as users with visual impairments often rely on larger text sizes to read content. Implementing a resizing strategy ensures that text remains readable, promoting inclusivity.
It is important to carry out checks for different text sizes during design and development, as with limited screen real-estate (especially on mobile devices) and variable device sizes and resolutions, modifications to screen layouts may be necessary to accommodate larger font sizes while maintaining an appealing UI.
A number of best practices should be followed when building for scalable text sizes. Whether we are specifying sizes in XML layouts or programmatically, the use of pixels (px) as a measurement should be substituted for density-independent pixels (dp) or scale-independent pixels (sp) for layout elements and text respectively.
Android automatically scales dp values based on the device’s screen density, ensuring consistent sizing across different devices. Meanwhile, sp values are scaled according to the user’s text-size preference in their device system settings, allowing them to adjust text scale within an app to a level that they can comfortably read.
Images, especially those used in layouts and backgrounds, need to maintain their aspect ratios to prevent distortion. A resizing strategy ensures images are resized proportionally, preserving their intended appearance. This may take the form of fixed image sizes with a specified dp or responsive size, for example those using Compose’s weight modifier. Additional adjustments can be carried out to maintain aspect ratio and focal point for an image, such as using an Image composable’s contentScale property.
Responsive layouts can be created with thoughtful use of Jetpack Compose’s layout components like Column, Row, Box, and Spacer. Alternatively, when creating layouts in XML, ConstraintLayout allows us to implement responsive designs by setting out layout elements with respect to one another. Each of these approaches allow us to create flexible UI designs that automatically adjust to different screen sizes and orientations.
A useful tool when designing layouts in Jetpack Compose is the preview pane, allowing us to see any changes declared in real time. Unfortunately, setting up different @Preview composables for each possible font size can take a while and adds a lot of extra code.
Happily, Android Studio Hedgehog (coming late 2023/ early 2024) will be introducing Multipreview Templates with a number of annotations to quickly create a variety of previews with different screen sizes, font sizes (using the @PreviewFontScales annotation) and more. We’re excited to give this a try to see just how much easier inspecting and assessing different text sizes becomes.
Android’s accessibility testing with Google’s accessibility scanner
Assessing accessibility and ensuring app functionality is enjoyable and meaningful to all users – especially later in development or in an app with a large number of features and screens – can be a daunting task. Luckily developers have access to a number of tools to make this much simpler. The Android team spent some time looking into Google’s Accessibility Scanner, an app available on the Play Store which scans the user interface of an app to determine where it could be made more accessible. It suggests a variety of valuable improvements including but not limited to increasing the size of small touch targets, increasing the contrast or text and image elements, and adding meaningful labels and content descriptions which can be used by screen-readers. All of these improvements are easy to implement in both older codebases using XML layouts and our newer Jetpack Compose projects.
The Accessibility Scanner app provides an overlay for your app with a floating action button which, when pressed, highlights information about individual UI components which could be improved as well as providing a report outlining every accessibility issue on the screen. We tested this on a few individual screens within an app to keep on Hack Day, but the Accessibility Scanner also offers the user the ability to record a series of user interactions across multiple screens and assess the accessibility as a whole.
Using this tool helped identify shortfalls in accessibility not just for Android Developers but in a way which could be communicated across the entire team, and brought to light simple but impactful fixes which can be easily overlooked. It provided guidance which we can now incorporate into future iterations of our apps to make them more accessible and enjoyable for all.
Android’s accessibility testing with TalkBack
TalkBack is Android’s built-in screen reader, allowing users to interact with apps without being able to see the screen, swiping or tapping on each element while the user’s device reads aloud information provided about the currently-selected element.
In order to create the most accessible app possible, users should be able to navigate and understand screen elements regardless of visual impairments. In order to test this, Android provides an accessibility testing mode that we can enable in Developer Options. This mode simulates TalkBack behaviour and allows us to test our app’s accessibility without having to enable TalkBack for the entire device.
We tried out TalkBack in our app on both physical Android devices and emulators using the Accessibility Suite APK, testing the impact of our app implementation on different devices that might have varying screen sizes, resolutions, and hardware configurations.
Testing in this way we learned a lot, encountering a number of potential areas of improvement which could prevent users from using our app’s screens by hindering navigation and usability.
Some of these were easy to remedy (for example icon buttons and images with no content descriptions), whereas others (such as more complex custom TextFields with icons, hints and error messages) can require work to ensure that they can be better understood.
Adding semantic meaning to these components made it clearer to users utilising TalkBack so that they could better understand what their purpose was and gave the user confidence when navigating the app. Similarly, we found that in some instances navigating through UI elements one by one didn’t always give the desired experience, with some elements being navigated out of order or in some cases not being possible to navigate to at all.
These issues can be solved using composable properties with FocusManager, or properties such as nextFocusDown in XML layouts.
Key takeaways
- Accessible Android apps have a global impact, reaching users worldwide and contributing to a more accessible digital environment for everyone.
- Accessible app development comes in many forms, from using different text sizes to screen readers and beyond. Each of these can be tested and developed for using Android Studio and built-in Android device tools.
- Android provides tools like Accessibility Scanner, which suggests improvements to enhance app accessibility, making it easier for developers to identify and fix issues.
