A11y lessons from iOS Weather App design . accessibility . android Karan Sharma www.ksharma.xyz 

DayTile() 

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. 

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. 

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. 

Font Scale: Normal Font Scale: Large DayTile() Code Code 

Header() 

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. 

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 

Header() Code Font Scale: Normal Font Scale: Large 

WeatherConditionTile() 

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() 

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() 

Code WeatherConditionTile() 

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() 

Font Scale: Normal Foldable: Unfold state When font scale is: ● Normal: 3 Column Layout ● Large: 1 Column Layout WeatherConditionTile() Font Scale: Large 

Font Scale: Normal Mobile When font scale is: ● Normal: 2 Column Layout ● Large: 1 Column Layout WeatherConditionTile() Font Scale: Large 

Font Scale: Large Tablet : Landscape Mode When font scale is: ● Normal: 5 Column Layout ● Large: 1 Column Layout WeatherConditionTile() Font Scale: Normal 

Tablet : Portrait Mode When font scale is: ● Normal: 3 Column Layout ● Large: 1 Column Layout WeatherConditionTile() Font Scale: Normal