Building an Accessible Android Weather App: Lessons from iOS Weather App's A11y Features

As an Android developer, making sure that your app is accessible to all users is crucial. This includes those who have visual impairments and require larger font sizes. In this deck, we will be exploring how to make the weather app on Android more accessible.

1. A11y lessons from iOS Weather App design . accessibility . android Karan Sharma www.ksharma.xyz
2. DayTile()
3. Font Scale: Normal Font Scale: Large DayTile() Observation • When the font size is increased to an extent that the text / items cannot be displayed next to each other horizontally, then display the items vertically. • Hide the TemperatureBar and display L and H prefix for low and high temperature. • The start position of each element such as icon, text, temperature bar for each item in a list should be same.
4. Font Scale: Large DayTile() What not to do ? At Large font scale, the horizontal space for the day text is limited. Also, the temperature bar is utilizing a lot of space which may not be useful at large font scale.
5. Font Scale: Normal Font Scale: Large DayTile() Technical Approach There are multiple ways to achieve this. We want to display either a Row or a Column of items based on font scale value. 1. One approach is to use an if else conditional logic to switch between a Row and Column. 2. Another approach can be to use a ConstraintLayout, however it will be hard to maintain all the conditional constraints. Since, maintaining the conditional constraints of the layout will be challenging, therefore, the first approach of switching between a Row and a Column seems easy and optimal at this time.
6. Font Scale: Normal Font Scale: Large DayTile() Code Code
7. Header()
8. Font Scale: Large Header() Font Scale: Normal Observation • When the font size is increased beyond a certain threshold, then the text is aligned to the start of the screen in order to utilize all the given width.
9. TextAlign: Center Header() TextAlign: Start Observation Why is it a good idea to align to Start ? • Aligning to Start will look more pretty • Will also provide more room to grow for text. The difference is especially visible when the text is large and spans across more than one line. v/s
10. Header() Code Font Scale: Normal Font Scale: Large
11. WeatherConditionTile()
12. Font Scale: Large Font Scale: Normal Observation • When the font size is increased beyond a certain threshold, then the tiles stretch to occupy all the horizontal space. • The sticky header is also disabled while scrolling so as to provide maximum visibility area on the screen to read text. WeatherConditionTile()
13. Font Scale: Large Font Scale: Normal Observation • The tiles are square in shape. I.e with equal height and width. The uniformity is maintained in all the tiles. • When the font size is increased beyond a certain threshold, then the tiles stretch to occupy all the horizontal space. • The sticky header is also disabled while scrolling so as to provide maximum visibility area on the screen to read text. WeatherConditionTile()
14. Code WeatherConditionTile()
15. Font Scale: Normal Foldable: Fold state • Always display the UI in full stretch across the screen as the available width is very less. ~330dp WeatherConditionTile()
16. Font Scale: Normal Foldable: Unfold state When font scale is: • Normal: 3 Column Layout • Large: 1 Column Layout WeatherConditionTile() Font Scale: Large
17. Font Scale: Normal Mobile When font scale is: • Normal: 2 Column Layout • Large: 1 Column Layout WeatherConditionTile() Font Scale: Large
18. Font Scale: Large Tablet : Landscape Mode When font scale is: • Normal: 5 Column Layout • Large: 1 Column Layout WeatherConditionTile() Font Scale: Normal
19. Tablet : Portrait Mode When font scale is: • Normal: 3 Column Layout • Large: 1 Column Layout WeatherConditionTile() Font Scale: Normal